*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:consolas,monospace,sans-serif;
-webkit-user-drag:none;
-khtml-user-drag:none;
-moz-user-drag:none;
-o-user-drag:none;
user-drag:none;
}
body{
font-family:sans-serif;
height:100vh;
width:100vw;
overflow:hidden;
}
.dark-theme{
color:#00ff55;
background-color:#0d1117;
}
.light-theme{
color:#cd3928;
background-color:#ffffff;
}
.skip-link{
position:absolute;
top:-40px;
left:6px;
background:#000;
color:#fff;
padding:8px;
text-decoration:none;
z-index:1000;
border-radius:4px;
}
.skip-link:focus{
top:6px;
}
.visually-hidden{
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
main{
height:100vh;
width:100vw;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:var(--gap);
}
.ip-label{
font-size:1.2em;
font-weight:normal;
pointer-events:none;
user-select:none;
margin-bottom:2px;
}
.ip-address{
font-size:3.1em;
font-weight:bold;
cursor:pointer;
white-space:nowrap;
z-index:10;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
padding:6px 16px;
margin:2px 0;
user-select:none;
min-height:44px;
min-width:44px;
border:3px solid;
box-shadow:0 .6px 2.2px rgba(0,0,0,.4) inset;
transition:transform .2s ease-out,opacity .2s ease-out,border-radius .2s ease-out,
color .2s ease-out,box-shadow .2s ease-out;
transform:translateZ(0);
backface-visibility:hidden;
perspective:1000px;
will-change:transform;
overflow:hidden;
}
.dark-theme .ip-address{
border-color:#030508;
background-color:#272B3B;
color:#00ff55;
}
.light-theme .ip-address{
background-color:#FAEDED;
border-color:#D97575;
color:#cd3928;
}
.dark-theme .ip-address:active,.light-theme .ip-address:active{
box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.ip-address:focus-visible{
outline:3px solid #0066cc;
outline-offset:2px;
}
.dark-theme .ip-address:focus-visible{
outline-color:#00ccff;
}
.dark-theme .ip-address.copied{
background-color:#0a4d0a;
box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.light-theme .ip-address.copied{
box-shadow:inset 0 1px 3px rgba(0,0,0,.5);
}
.walrus-container{
position:relative;
display:flex;
align-items:center;
justify-content:center;
margin-top:5px;
cursor:pointer;
}
.tusks{
width:var(--tsk);
cursor:pointer;
z-index:5;
user-select:none;
display:block;
transition:transform .4s ease-out;
transform:translateZ(0);
backface-visibility:hidden;
transform-origin:center;
will-change:transform;
pointer-events:none;
}
.dark-theme .light-logo{
display:none;
}
.light-theme .dark-logo{
display:none;
}
.theme-toggle{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:var(--tsk);
height:var(--tsk);
background:transparent;
border:none;
cursor:pointer;
border-radius:50%;
z-index:6;
aspect-ratio:1/1;
}
.theme-toggle:focus-visible{
outline:3px solid #0066cc;
outline-offset:2px;
border-radius:50%;
}
.dark-theme .theme-toggle:focus-visible{
outline-color:#00ccff;
}
.loading{
opacity:.6;
}
.error{
font-weight:bold;
}
.dark-theme .error{
color:#f44;
}
.light-theme .error{
color:#c00;
}
.pull-to-refresh{
position:fixed;
top:-60px;
left:50%;
transform:translateX(-50%);
padding:6px 8px 5px;
border-radius:6px;
font-size:.9em;
font-weight:bold;
opacity:0;
z-index:1000;
transition:all .3s;
}
.dark-theme .pull-to-refresh{
background-color:rgba(0,255,85,.2);
color:#00ff55;
}
.light-theme .pull-to-refresh{
background-color:rgba(196,30,58,.2);
color:#cd3928;
}
@media (prefers-reduced-motion:reduce){
*{
animation-duration:.01ms;
animation-iteration-count:1;
transition-duration:.01ms;
}
.pull-to-refresh,.ip-walrus,.ip-address{
transition:none;
animation:none;
will-change:auto;
}
}
@media (prefers-contrast:high){
.dark-theme{
color:#fff;
background-color:#000;
}
.light-theme{
color:#000;
background-color:#fff;
}
.dark-theme .ip-address{
border-color:#fff;
background-color:#000;
}
.light-theme .ip-address{
border-color:#000;
background-color:#fff;
}
}