:root{
  --mobile-footer-height:calc(60px + env(safe-area-inset-bottom, 0px));
  color-scheme:dark;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  color:#f2f0e9;
  background:#242320;
  font-synthesis:none;
  font-weight:400
}
*{
  box-sizing:border-box
}
body{
  margin:0
}
button,a,input{
  -webkit-tap-highlight-color:transparent;
  font:inherit
}
button,a{
  color:inherit
}
button{
  cursor:pointer
}
button:disabled,a[aria-disabled=true]{
  cursor:not-allowed
}
button:focus-visible,a:focus-visible,input:focus-visible{
  outline:2px solid #ffac62;
  outline-offset:5px
}
button{
  border:0
}
button[hidden],[hidden]{
  display:none!important
}
.deck{
  height:100svh;
  min-height:320px;
  overflow:hidden;
  position:relative;
  background:#242320
}
.scene{
  position:absolute;
  inset:0;
  overflow:hidden
}
.machine{
  position:absolute;
  width:1672px;
  height:941px;
  transform-origin:0 0;
  will-change:transform
}
.plate{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill
}
.ambient{
  opacity:0;
  transition:opacity .4s
}
.ambient.ready{
  opacity:1
}
.screen{
  position:absolute;
  left:715px;
  top:671px;
  width:244px;
  height:110px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:13px 21px 12px;
  color:#eeeee8;
  text-shadow:0 0 3px #eeeee831;
  background:radial-gradient(ellipse at 60% 40%,#252522,#1e1e1c);
  border-radius:5px;
  overflow:hidden;
  transform:perspective(900px) rotateY(-1deg);
  border:1px solid #ffffff04
}
.screen:after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#0000000a 3px);
  opacity:.5
}
.screen-label{
  font-size:13px;
  line-height:18px;
  white-space:nowrap
}
.screen time{
  font-size:32px;
  letter-spacing:-1.1px;
  font-variant-numeric:tabular-nums;
  line-height:43px
}
.screen-cycle{
  align-self:flex-end;
  font-size:13px;
  line-height:17px;
  white-space:nowrap
}
.footer{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  min-height:51px;
  padding:0 max(24px,env(safe-area-inset-right)) env(safe-area-inset-bottom) max(24px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:linear-gradient(90deg,#232320b8,#272521b0);
  border-top:1px solid #e5e1d343;
  font-size:14px;
  line-height:1.2;
  z-index:3;
  backdrop-filter:blur(9px)
}
.footer:before{
  content:"";
  position:absolute;
  left:4.2%;
  top:-2px;
  width:60px;
  height:2px;
  background:#e1ded2ba
}
.identity,nav{
  display:flex;
  align-items:center;
  gap:14px
}
.wordmark{
  letter-spacing:.4px
}
.divider{
  color:#c4c2b7
}
.quiet-button{
  padding:15px 0;
  background:none;
  font-size:inherit;
  white-space:nowrap
}
.quiet-button:hover:not(:disabled),a:not([aria-disabled=true]):hover{
  color:#ffb273
}
a{
  text-decoration:none;
  padding:15px 0;
  white-space:nowrap
}
a[aria-disabled=true],button:disabled{
  opacity:.72
}
.motion{
  font-size:11px;
  margin-right:9px;
  letter-spacing:.5px
}
.notice{
  position:absolute;
  bottom:72px;
  left:50%;
  transform:translateX(-50%);
  padding:12px 18px;
  background:#232320ed;
  border:1px solid #e5e1d343;
  font-size:12px;
  opacity:0;
  transition:opacity .2s;
  pointer-events:none;
  z-index:5
}
.notice.visible{
  opacity:1
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.mobile-dock{
  display:none
}
dialog{
  width:min(440px,calc(100% - 32px));
  padding:26px;
  border:1px solid #928c7c70;
  background:#272723;
  color:#f2f0e9;
  box-shadow:0 24px 100px #0008
}
dialog::backdrop{
  background:#16161299;
  backdrop-filter:blur(6px)
}
.dialog-top,.dialog-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.eyebrow,.dialog-bottom{
  font-size:10px;
  letter-spacing:.6px;
  color:#c1bcb0
}
.dialog-top button{
  background:none;
  font-size:24px;
  padding:0 4px
}
h2{
  font-size:23px;
  font-weight:400;
  letter-spacing:-1px;
  margin:30px 0 20px
}
dialog p{
  font-size:12px;
  line-height:1.9;
  color:#c9c5ba
}
.dialog-bottom{
  margin-top:30px;
  border-top:1px solid #ffffff20;
  padding-top:16px;
  font-size:9px
}
#address-details{
  margin-top:24px
}
#address-details label{
  font-size:10px
}
#address{
  width:100%;
  padding:12px;
  margin:10px 0;
  background:#1d1d1a;
  color:#e4e1d6;
  border:1px solid #656152
}
#copy-address{
  background:#db8b4b;
  color:#171613;
  padding:10px 15px
}
.mobile-layout .scene{
  bottom:calc(var(--mobile-footer-height) + 100px)
}
.mobile-layout .mobile-dock{
  display:flex;
  position:absolute;
  bottom:var(--mobile-footer-height);
  left:0;
  right:0;
  height:100px;
  align-items:center;
  justify-content:center;
  background:#252420;
  border-top:1px solid #b4afa12e
}
.mobile-layout .screen{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:244px!important;
  height:96px!important;
  background:none;
  border:0;
  transform:none;
  padding:8px 21px
}
.mobile-layout .footer{
  font-size:11px;
  min-height:var(--mobile-footer-height);
  padding-left:18px;
  padding-right:18px;
  gap:12px
}
.mobile-layout .footer nav,.mobile-layout .identity{
  gap:10px
}
.mobile-layout .motion{
  font-size:12px;
  margin-right:0
}
.mobile-layout .motion span{
  display:none
}
.mobile-layout .quiet-button,.mobile-layout a{
  min-height:44px;
  display:inline-flex;
  align-items:center
}
.mobile-layout .notice{
  bottom:180px
}
.mobile-layout .screen time{
  font-size:32px
}
.mobile-layout .screen-label,.mobile-layout .screen-cycle{
  font-size:11px
}
@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{
    transition:none!important;
    animation:none!important
  }
}