/* Secret lives in deep space: one dark world, gold for attention, cyan/violet from Secret's body. */
:root{
  --bg:#000;
  --fg:#ecf0fb;
  --muted:#8e98b4;
  --line:#1d2338;
  --panel:#0b0f1e;
  --panel-2:#11162a;
  --gold:#ffc766;
  --cyan:#5fe3f0;
  --violet:#a569ff;
  --ok:#5fd39a;
  --bad:#ff7b8a;
  --font:'Prompt',system-ui,-apple-system,'Segoe UI',sans-serif;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:16px;-webkit-text-size-adjust:100%}
body{overflow-x:hidden}
[hidden]{display:none!important}
a{color:var(--cyan)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

#app{min-height:100%;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px)}
#view{flex:1;display:flex;flex-direction:column;width:100%;max-width:720px;margin:0 auto;padding-inline:16px;padding-block:8px 96px;outline:none}

/* Secret stage */
.stage{position:relative;width:min(78vw,46vh,420px);aspect-ratio:1/1;margin:8px auto 0;flex:none;transition:width .5s ease}
.stage.small{width:min(34vw,140px)}
.stage.hidden-stage{display:none}
.stage .body{position:absolute;inset:6%;width:88%;height:88%;object-fit:cover;mix-blend-mode:screen;transform-origin:50% 50%;will-change:transform,filter;pointer-events:none}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.plus-hit{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;border:0;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* type */
h1{font-weight:500;font-size:1.45rem;margin:.4rem 0;text-wrap:balance;text-align:center}
h2{font-weight:500;font-size:1.1rem;margin:0 0 .6rem}
.lead{color:var(--muted);text-align:center;margin:.2rem auto 1rem;max-width:40ch;line-height:1.55}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* forms */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:.85rem;color:var(--muted)}
input[type=text],input[type=email],input[type=password],input[type=search],textarea,select{width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 14px;min-height:46px}
textarea{resize:none}
.btn{appearance:none;border:1px solid var(--gold);background:var(--gold);color:#1a1300;border-radius:999px;padding:12px 20px;font-weight:500;cursor:pointer;min-height:46px}
.btn:disabled{opacity:.5;cursor:default}
.ghost{appearance:none;background:transparent;border:1px solid var(--line);color:var(--fg);border-radius:999px;padding:10px 16px;cursor:pointer;min-height:42px}
.link{appearance:none;background:none;border:0;color:var(--cyan);cursor:pointer;padding:6px;text-decoration:underline}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip{appearance:none;border:1px solid var(--line);background:transparent;border-radius:999px;padding:10px 16px;cursor:pointer;min-height:42px}
.chip[aria-pressed=true]{border-color:var(--gold);color:var(--gold)}
.err{color:var(--bad);font-size:.9rem;min-height:1.2em}

/* First Meeting */
.meet-q{font-size:1.15rem;text-align:center;margin:.6rem auto;max-width:34ch;line-height:1.5;min-height:3em}
.meet-a{display:flex;flex-direction:column;gap:12px;align-items:stretch;width:100%;max-width:460px;margin:0 auto}
.progress{height:3px;background:var(--line);border-radius:3px;overflow:hidden;margin:6px auto 0;width:min(240px,60%)}
.progress i{display:block;height:100%;background:var(--gold);transition:width .3s}

/* chat */
.chat{display:flex;flex-direction:column;gap:10px;margin-top:8px;padding-bottom:8px}
.msg{max-width:86%;padding:10px 14px;border-radius:18px;line-height:1.55;white-space:pre-wrap;word-wrap:break-word}
.msg.user{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line);border-bottom-right-radius:6px}
.msg.secret{align-self:flex-start;background:transparent;border:1px solid #1e3550;border-bottom-left-radius:6px}
.msg.note{align-self:center;color:var(--muted);font-size:.85rem;border:0;text-align:center}
.suggest{align-self:flex-start;max-width:92%;background:var(--panel);border:1px solid #3d3216;border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;font-size:.92rem}
.suggest .row{gap:8px}
.composer{position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom,0px));padding:8px 16px;background:linear-gradient(transparent,var(--bg) 30%)}
.composer form{max-width:720px;margin:0 auto;display:flex;gap:8px;align-items:flex-end}
.composer textarea{flex:1;max-height:140px}
.banner{border:1px solid #3d3216;color:var(--gold);background:#120e02;border-radius:12px;padding:10px 12px;font-size:.9rem;line-height:1.5}
.status-line{text-align:center;color:var(--muted);font-size:.85rem;min-height:1.3em}

/* lists */
.list{display:flex;flex-direction:column;gap:8px}
.item{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px}
.item .txt{flex:1;min-width:0;line-height:1.5;word-wrap:break-word}
.item.done .txt{color:var(--muted);text-decoration:line-through}
.item .kind{font-size:.75rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 8px;margin-right:6px}
.check{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--muted);background:transparent;flex:none;cursor:pointer;margin-top:1px}
.item.done .check{background:var(--ok);border-color:var(--ok)}
.x{appearance:none;background:none;border:0;color:var(--muted);cursor:pointer;font-size:1.1rem;padding:2px 6px}
.empty{color:var(--muted);text-align:center;padding:24px 8px;line-height:1.6}

/* tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;display:flex;justify-content:space-around;background:rgba(5,7,14,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:4}
.tabs a{flex:1;text-align:center;color:var(--muted);text-decoration:none;padding:10px 4px;font-size:.92rem;border-radius:10px}
.tabs a[aria-current=page]{color:var(--gold)}

/* sheet + toast */
.sheet-scrim{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center;z-index:10}
.sheet{width:min(100%,520px);background:var(--panel);border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.opt{border:1px solid var(--line);border-radius:12px;padding:14px;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.opt small{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--panel);border:1px solid var(--gold);padding:10px 16px;border-radius:999px;z-index:11;max-width:calc(100% - 32px);font-size:.92rem}

@media (prefers-reduced-motion:reduce){.stage{transition:none}}