@font-face{font-family:"Segoe Print";src:local("Segoe Print"),url("/fonts/SegoePrint.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
:root{
  color-scheme:dark;
  --bg:#0b0e12;--card:#12161c;--text:#e7edf2;--muted:#9ba7b4;--accent:#4aa3ff;--accent-main:#00cfff;
  --radius:16px;--s1:6px;--s2:10px;--s3:14px;--s4:18px;--s5:24px;--s6:32px;--shadow:0 10px 30px rgba(0,0,0,.25);
}
*{box-sizing:border-box;}
html{min-height:100%;}
body{margin:0;min-height:100vh;min-height:100svh;background:radial-gradient(1200px 800px at 20% -10%,#0f1420,#07090c) fixed;color:var(--text);font:15px/1.75 system-ui,Segoe UI,Roboto,Arial,sans-serif;display:flex;flex-direction:column;}
.wrapper{width:100%;max-width:836px;margin:auto;padding:56px var(--s5) var(--s5);}
.card{position:relative;width:100%;background:linear-gradient(180deg,rgba(29,36,50,.4),rgba(15,20,31,.7));border:1px solid rgba(255,255,255,.08);border-radius:var(--radius);padding:40px 48px var(--s6);box-shadow:var(--shadow);}
.header{position:relative;padding:var(--s2) 0 var(--s5);}
.sharing-mark{position:absolute;right:-12px;top:-28px;width:150px;height:150px;opacity:.15;pointer-events:none;}
.title{position:relative;margin:0 0 var(--s5);font-size:clamp(26px,4.5vw,36px);font-weight:700;line-height:1.25;letter-spacing:.2px;text-shadow:0 0 30px rgba(0,207,255,.18);}
.intro{position:relative;margin:0;font-size:18px;line-height:1.6;color:var(--text);}
.story p{margin:0 0 var(--s4);}
.story .recordings{margin:var(--s5) 0;color:var(--accent-main);font-family:"Segoe Print",cursive;font-size:20px;}
.span-blue{color:var(--accent-main);}
.story .signature{margin:var(--s5) 0 var(--s6);font-size:15px;line-height:1.7;}
.signature>strong{font-family:"Segoe Print",cursive;font-weight:400;font-size:18px;}
.signature span{font-size:12px;color:var(--muted);}
.signature span strong{font-weight:600;color:var(--accent-main);}
.entry{padding-top:var(--s5);border-top:1px dotted rgba(255,255,255,.25);}
.actions{display:grid;grid-template-columns:1fr 1.35fr;gap:12px;}
.btn{appearance:none;width:100%;min-height:48px;margin:0;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.15);background:#141a25;color:var(--text);font:600 14px/1.5 system-ui,Segoe UI,Roboto,Arial,sans-serif;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease,opacity .12s ease;}
.btn:hover:enabled{transform:translateY(-1px);border-color:var(--accent);background:#1a2535;}
.btn:focus-visible,.legal:focus-visible{outline:2px solid var(--accent);outline-offset:4px;}
.btn:disabled{opacity:.4;cursor:default;}
.signin-btn{border-color:rgba(0,207,255,.45);background:rgba(0,207,255,.07);color:var(--accent-main);}
.signin-btn:hover:enabled{border-color:var(--accent-main);background:rgba(0,207,255,.12);}
.session-status,.auth-status{margin:12px 0 0;font-size:12px;line-height:1.6;text-align:center;color:var(--muted);}
.auth-status:empty{display:none;}
.ok{color:#86f2d1;}
.err{color:#ff8a8a;}
footer{width:100%;max-width:836px;margin:0 auto;padding:0 var(--s5) var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s3);color:var(--muted);text-align:center;}
.legal{font-size:11px;color:var(--muted);text-decoration:none;text-underline-offset:4px;}
.legal:hover{color:var(--text);text-decoration:underline;}
#tOP{font-size:11px;}
@media (max-width:600px){
  .wrapper{padding:var(--s5) var(--s3) var(--s4);}
  .card{padding:var(--s5) var(--s5) var(--s4);}
  .header{padding-top:var(--s2);}
  .sharing-mark{width:110px;height:110px;top:-12px;right:-12px;opacity:.12;}
  .intro{font-size:16px;}
  .actions{grid-template-columns:1fr;gap:var(--s2);}
  footer{flex-wrap:wrap;justify-content:center;gap:var(--s2) var(--s5);padding:0 var(--s3) var(--s5);}
  #tOP{order:1;flex-basis:100%;}
}
@media (prefers-reduced-motion:reduce){
  .btn{transition:none;}
  .btn:hover:enabled{transform:none;}
}