/* Universe · account (v98) — the Signal's house style: near-black, one breathing amber orb, Cormorant for the voice, Nunito for the words, DM Mono for the facts. */
[data-theme="dark"]{--bg:#03030a;--bg2:rgba(236,232,225,.035);--text:#ece8e1;--dim:rgba(236,232,225,.66);--muted:rgba(236,232,225,.55);--line:rgba(236,232,225,.1);--line2:rgba(236,232,225,.22);--warn:#ff7a6b;--ok:#b9e36a;--orb:.16;}
[data-theme="light"]{--bg:#dbd6cc;--bg2:rgba(26,22,12,.035);--text:#1a160c;--dim:rgba(26,22,12,.84);--muted:rgba(26,22,12,.72);--line:rgba(26,22,12,.12);--line2:rgba(26,22,12,.26);--warn:#a30000;--ok:#3d5a00;--orb:.22;}
:root{--amber:240,192,64;--f-voice:'Cormorant Garamond',Georgia,serif;--f-text:'Nunito',-apple-system,system-ui,sans-serif;--f-mono:'DM Mono',ui-monospace,Menlo,monospace;--ease:cubic-bezier(.2,.7,.2,1);}
*{box-sizing:border-box;}
html,body{margin:0;min-height:100%;}
body{background:var(--bg);color:var(--text);font-family:var(--f-text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background .5s var(--ease),color .5s var(--ease);}
[hidden]{display:none!important;}
button,input,select{font:inherit;color:inherit;}
a{color:inherit;}
:focus-visible{outline:1px solid rgba(var(--amber),.9);outline-offset:3px;}

/* the orb: one light, breathing, behind everything */
.orb{position:fixed;left:50%;top:42%;width:min(92vw,560px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(circle,rgba(var(--amber),var(--orb)) 0%,rgba(var(--amber),calc(var(--orb)*.3)) 42%,transparent 70%);animation:breathe 6s ease-in-out infinite;}
.orb::after{content:"";position:absolute;inset:-9%;border-radius:50%;border:1px solid rgba(var(--amber),.09);animation:breathe 6s ease-in-out infinite reverse;}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.06);opacity:1}}
.orb::after{animation-name:ring;}
@keyframes ring{0%,100%{transform:scale(1);opacity:.6}50%{transform:scale(1.04);opacity:1}}
body.home .orb{top:0;opacity:.55;}
@media (prefers-reduced-motion:reduce){.orb,.orb::after{animation:none;}}

/* top line */
.top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(18px + env(safe-area-inset-top)) 24px 0;}
.mark{display:flex;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--dim);text-decoration:none;}
.mark i{width:8px;height:8px;border-radius:50%;background:rgba(var(--amber),1);box-shadow:0 0 14px rgba(var(--amber),.7);}
.tools{display:flex;align-items:center;gap:4px;}
.tool{background:none;border:0;padding:8px 8px;min-height:36px;font-family:var(--f-mono);font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);cursor:pointer;border-radius:8px;}
.tool:hover{color:var(--text);}
.tool b{font-weight:400;color:var(--text);}

/* the stage: one column, centred, for every sign-in step */
.stage{position:relative;z-index:1;min-height:calc(100svh - 60px);display:flex;align-items:center;justify-content:center;padding:24px 24px calc(48px + env(safe-area-inset-bottom));}
.step{width:100%;max-width:380px;animation:rise .6s var(--ease) both;}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);margin:0 0 16px;}
h1{font-family:var(--f-voice);font-style:italic;font-weight:300;font-size:clamp(40px,11vw,52px);line-height:1.02;letter-spacing:-.5px;margin:0 0 16px;}
.lead{color:var(--dim);margin:0 0 32px;max-width:34ch;}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:0 24px;border-radius:999px;border:1px solid var(--line2);background:transparent;cursor:pointer;font-weight:600;font-size:15px;text-decoration:none;transition:transform .15s var(--ease),background .3s,border-color .3s,opacity .3s;}
.btn:active{transform:scale(.985);}
.btn.primary{background:var(--text);color:var(--bg);border-color:var(--text);}
.btn.primary:hover{opacity:.9;}
.btn:not(.primary):hover{border-color:var(--text);}
.btn[disabled]{opacity:.45;cursor:default;}
.btn svg{width:18px;height:18px;flex:none;}
.stack{display:grid;gap:12px;}
.stack .field{margin:0;}
.row.center{justify-content:center;gap:24px;}
#btn-to-code{display:block;margin:24px auto 0;}
.or{display:flex;align-items:center;gap:12px;margin:4px 0;font-family:var(--f-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line);}
.link{background:none;border:0;padding:12px 0;cursor:pointer;color:var(--dim);font-size:14px;text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;}
.link:hover{color:var(--text);}
.msg{min-height:20px;margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--warn);}
.msg.ok{color:var(--ok);}
.msg:empty{margin:0;min-height:0;}
.hint{margin:24px 0 0;font-size:13px;color:var(--muted);}
.hint code,.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.3px;}
.hint code{color:var(--dim);}

/* fields */
.field{display:block;margin:0 0 16px;}
.field span{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.field input,.field select{width:100%;min-height:48px;padding:12px 16px;background:var(--bg2);border:1px solid var(--line);border-radius:12px;outline:none;font-size:16px;}
.field input:focus,.field select:focus{border-color:var(--line2);}
.code-in{display:block;width:100%;margin:0 0 24px;padding:8px 0 16px;background:none;border:0;border-bottom:1px solid var(--line2);outline:none;text-align:center;font-family:var(--f-mono);font-size:40px;font-weight:300;letter-spacing:.32em;text-indent:.32em;caret-color:rgba(var(--amber),1);}
.code-in:focus{border-bottom-color:rgba(var(--amber),.9);}
.code-in::placeholder{color:var(--line2);}

/* home: signed in */
.home-wrap{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:40px 24px calc(80px + env(safe-area-inset-bottom));}
.home-wrap h1{font-size:clamp(36px,8vw,48px);margin-bottom:8px;}
.home-wrap .lead{margin-bottom:48px;}
.block{padding:32px 0;border-top:1px solid var(--line);}
.block h2{font-family:var(--f-voice);font-style:italic;font-weight:400;font-size:28px;line-height:1.1;margin:0 0 8px;}
.block > p{color:var(--dim);margin:0 0 24px;max-width:52ch;}
.block .btn{width:auto;display:inline-flex;}
.row{display:flex;flex-wrap:wrap;gap:12px;align-items:center;}
.row .field{flex:1 1 220px;margin:0;}
.row.form{align-items:flex-end;}

/* the code on the signed-in device */
.linkbox{margin-top:8px;}
.bigcode{font-family:var(--f-mono);font-weight:300;font-size:clamp(48px,14vw,76px);letter-spacing:.12em;line-height:1;margin:8px 0 16px;user-select:all;}
.bigcode.dead{opacity:.3;text-decoration:line-through;text-decoration-thickness:1px;}
.timer{position:relative;height:1px;background:var(--line);margin:0 0 12px;overflow:hidden;}
.timer i{position:absolute;inset:0;background:rgba(var(--amber),1);transform-origin:left;transition:transform 1s linear;}
.linkmeta{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-bottom:24px;}
.done{font-family:var(--f-voice);font-style:italic;font-size:30px;margin:8px 0 24px;}

/* lists */
.list{display:grid;}
.li{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line);}
.li:last-child{border-bottom:0;}
.li b{font-weight:600;}
.li .sub{font-family:var(--f-mono);font-size:11px;letter-spacing:.5px;color:var(--muted);}
.li .grow{flex:1;}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;}
.out{margin:16px 0 0;font-family:var(--f-mono);font-size:12px;word-break:break-all;color:var(--dim);}
.out:empty{margin:0;}
details.more{border-top:1px solid var(--line);}
details.more > summary{list-style:none;cursor:pointer;padding:24px 0;font-family:var(--f-mono);font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);}
details.more > summary::-webkit-details-marker{display:none;}
details.more > summary::after{content:" +";}
details.more[open] > summary::after{content:" −";}
.audit .li{font-family:var(--f-mono);font-size:11px;color:var(--dim);gap:16px;padding:8px 0;}
.audit .li span:first-child{color:var(--muted);min-width:128px;}

@media (max-width:520px){
  .top{padding-left:16px;padding-right:12px;}
  .stage{padding-left:24px;padding-right:24px;align-items:flex-start;padding-top:12vh;}
  .home-wrap{padding-left:16px;padding-right:16px;padding-top:24px;}
  .block .btn{width:100%;}
}