:root{--bg: #101a2d;--panel: rgba(28, 40, 60, .9);--panelBorder: rgba(150, 210, 255, .3);--text: #f7faff;--muted: #c6d4ef;--accent: #7fd1ff;--accent-strong: #4aa7ff;--glow: rgba(140, 210, 255, .7);--rail-dim: rgba(165, 190, 220, .35);--rail-bright: rgba(140, 220, 255, .9);--node-size: 60px;--node-gap: 14px}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,Liberation Sans,sans-serif;background:radial-gradient(1200px 600px at 10% -10%,rgba(120,180,255,.22),transparent 60%),radial-gradient(900px 500px at 90% 0%,rgba(255,200,160,.18),transparent 55%),var(--bg);color:var(--text);height:100%}#app{min-height:100%;display:flex;flex-direction:column;padding:calc(16px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));gap:16px}.app-header{display:flex;justify-content:space-between;align-items:baseline}.app-title{text-transform:uppercase;letter-spacing:.16em;font-size:12px;color:var(--muted)}.progress{font-size:12px;color:var(--muted)}.reset-btn{font-size:12px;color:var(--muted);background:transparent;border:1px solid transparent;padding:6px 10px;border-radius:999px;cursor:pointer}.reset-btn:hover{border-color:#7fb7ff4d;color:var(--text)}.panel{background:var(--panel);border:1px solid var(--panelBorder);border-radius:16px;padding:16px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.timeline-wrap{position:relative;padding:10px 0}.timeline-camera{overflow:hidden;position:relative;width:min(100%,calc(var(--node-size) * 4 + var(--node-gap) * 3 + 36px));margin:0 auto;padding:4px 0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,1) 10%,rgba(0,0,0,1) 90%,transparent 100%)}.timeline-track{display:flex;align-items:center;gap:var(--node-gap);padding:10px 12px;min-height:104px;transition:transform .52s cubic-bezier(.2,.8,.2,1);will-change:transform}.rail{height:2px;background:var(--rail-dim);flex:1;min-width:28px}.rail--done{background:var(--rail-bright);box-shadow:0 0 12px #74a8ff59}.node{width:var(--node-size);height:var(--node-size);aspect-ratio:1 / 1;border-radius:50%;border:1px solid var(--panelBorder);background:#ffffff0a;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;position:relative;scroll-snap-align:center;transition:transform .22s ease,box-shadow .22s ease,opacity .22s ease}.node--active{border-color:var(--accent);color:var(--text);box-shadow:0 0 24px var(--glow);transform:scale(1.5)}.node--done{border-color:#7fb7ff99;color:var(--text);box-shadow:0 0 16px #7fb7ff38}.node--locked{opacity:.5}.node--near{opacity:1;transform:scale(1.05)}.node--far{opacity:.18;transform:scale(.62);pointer-events:none}.node--past{opacity:.45;transform:scale(.85)}.node--future{opacity:.7;transform:scale(.9)}.node--activate{animation:nodePop .42s cubic-bezier(.2,.8,.2,1)}.node--deactivate{animation:nodeSquash .26s ease}.node__lock{width:16px;height:16px}.content{min-height:240px;position:relative}.screen{opacity:1;transform:translateY(0);transition:opacity .22s ease,transform .22s ease}.screen-enter{opacity:0;transform:translateY(6px)}.screen-exit{opacity:0;transform:translateY(-4px)}.node-title{text-transform:uppercase;letter-spacing:.12em;font-size:12px;color:var(--muted);margin:0 0 8px}.node-subtitle{font-size:14px;color:var(--text);margin:0 0 10px}.node-body{font-size:16px;line-height:1.4;margin:0 0 16px}.node-body--rich{margin:0 0 16px}.chat-replay{position:relative;margin-top:8px;margin-bottom:18px;min-height:210px;max-height:320px;overflow:hidden;border-radius:18px;padding:18px 18px 8px;background:radial-gradient(1200px 400px at 20% 0%,rgba(90,140,255,.18),transparent 55%),radial-gradient(900px 320px at 80% 20%,rgba(120,255,200,.1),transparent 50%),#ffffff08;border:1px solid rgba(255,255,255,.06)}.chat-bubble{max-width:720px;width:fit-content;margin:10px 0;padding:12px 14px;border-radius:16px;line-height:1.35;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transform:translateY(18px);opacity:0;animation:bubbleIn .42s cubic-bezier(.2,.9,.2,1) forwards}.chat-bubble.you{margin-left:auto;background:#5a8cff29;border:1px solid rgba(90,140,255,.28);box-shadow:0 0 0 1px #5a8cff1a inset}.chat-bubble.reni{margin-right:auto;background:#78ffc81a;border:1px solid rgba(120,255,200,.22);box-shadow:0 0 0 1px #78ffc814 inset}.chat-meta{font-size:12px;opacity:.72;margin-bottom:6px;display:flex;gap:10px}.chat-who{font-weight:600;letter-spacing:.2px}.chat-time{opacity:.75}.chat-bubble.fade-away{animation:bubbleOut .52s cubic-bezier(.2,.9,.2,1) forwards}@keyframes bubbleIn{0%{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes bubbleOut{0%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-12px) scale(.98)}}.teaser-card{margin-top:14px;padding:14px 16px;border-radius:16px;background:radial-gradient(900px 260px at 10% 0%,rgba(255,180,90,.1),transparent 55%),#ffffff08;border:1px solid rgba(255,255,255,.06)}.teaser-title{font-size:12px;letter-spacing:.18em;opacity:.7;text-transform:uppercase;margin-bottom:8px}.teaser-title--spaced{margin-top:12px}.teaser-text{opacity:.92;line-height:1.5}.hint-line{margin:6px 0}.teaser-foot{margin-top:12px;opacity:.75;font-size:13px}.gate{display:flex;flex-direction:column;gap:12px}.gate-status{font-size:12px;color:var(--muted)}.primary-btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 14px;border-radius:999px;background:transparent;color:var(--text);border:1px solid rgba(127,183,255,.35);cursor:pointer;transition:background .2s ease,border .2s ease}.primary-btn--disabled{opacity:.45;cursor:not-allowed}.primary-btn--hidden{display:none}.gate-input{background:#ffffff0a;border:1px solid var(--panelBorder);border-radius:10px;padding:10px 12px;color:var(--text);font-size:14px}.poem-prompt{font-size:14px;color:var(--text)}.poem-input-wrap{display:flex;flex-direction:column;gap:6px}.poem-helper{font-size:12px;color:var(--muted);min-height:16px}.poem-error .poem-input{border-color:#7fb7ff80;box-shadow:0 0 0 2px #7fb7ff1a;animation:inputShake .22s ease}.poem-success .poem-input{border-color:#78ffc899;box-shadow:0 0 0 2px #78ffc826}@keyframes inputShake{0%{transform:translate(0)}25%{transform:translate(-4px)}50%{transform:translate(4px)}75%{transform:translate(-3px)}to{transform:translate(0)}}.hints-wrap{margin-top:12px;display:flex;flex-direction:column;gap:10px}.hints-intro{font-size:12px;color:var(--muted)}.hint-card{padding:12px 14px;border-radius:12px;background:#ffffff05;border:1px solid rgba(255,255,255,.06)}.hint-head{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-bottom:8px}.hint-body{white-space:pre-wrap;line-height:1.45;font-size:14px}.hint-reveal{background:transparent;border:1px solid rgba(127,183,255,.25);border-radius:999px;padding:6px 10px;color:var(--text);cursor:pointer;font-size:12px}.hint-locked{white-space:pre-wrap;font-size:13px;opacity:.78;margin-bottom:10px}.hint-unlock{display:flex;gap:8px;align-items:center}.hint-unlock-input{flex:1}.hold-wrap{display:flex;flex-direction:column;gap:8px}.hold-audio{gap:12px}.hold-canvas{width:100%;height:120px;border-radius:14px;background:#ffffff05;border:1px solid rgba(127,183,255,.12)}.hold-ready .hold-fill{background:linear-gradient(90deg,#5bffb7,#7fd7ff)}.hold-bar{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}.hold-fill{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-strong));transition:width 80ms linear}.toast{position:absolute;right:18px;bottom:18px;background:#121826e6;color:var(--text);border:1px solid var(--panelBorder);border-radius:999px;padding:8px 12px;font-size:12px;opacity:0;transform:translateY(6px);transition:opacity .18s ease,transform .18s ease;pointer-events:none}.toast--show{opacity:1;transform:translateY(0)}.drag-wrap{display:flex;flex-direction:column;gap:12px}.drag-area{position:relative;height:160px;border-radius:18px;background:#ffffff08;border:1px solid rgba(255,255,255,.06);overflow:hidden}.drag-target{position:absolute;right:18px;top:50%;width:86px;height:86px;transform:translateY(-50%);border-radius:50%;border:2px dashed rgba(134,182,255,.5);box-shadow:0 0 20px #86b6ff33;display:flex;align-items:center;justify-content:center}.drag-target__label{font-size:10px;letter-spacing:.2em;text-transform:uppercase;opacity:.7}.drag-chip{position:absolute;left:18px;width:86px;height:42px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.08em;font-size:12px;-webkit-user-select:none;user-select:none;touch-action:none}.drag-chip--yes{top:26px;background:#5a8cff33;border:1px solid rgba(90,140,255,.45);color:var(--text);cursor:grab}.drag-chip--wait{top:92px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);color:var(--muted);opacity:.7;pointer-events:none}.drag-chip--dragging{cursor:grabbing;box-shadow:0 10px 24px #00000059}.drag-chip--snap{box-shadow:0 0 20px #86b6ff73}.tangle-wrap{margin-top:8px;position:relative}.tangle-canvas{width:100%;height:260px;border-radius:18px;border:1px solid rgba(127,183,255,.12);background:radial-gradient(900px 260px at 20% 0%,rgba(90,140,255,.12),transparent 60%),radial-gradient(800px 240px at 80% 20%,rgba(120,255,200,.08),transparent 55%),#090c12eb;box-shadow:inset 0 0 28px #0a10188c;touch-action:none}.tangle-reveal{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;gap:10px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .24s ease,transform .24s ease}.tangle-reveal--show{opacity:1;transform:translateY(0)}.tangle-digit{width:36px;height:44px;border-radius:10px;background:#78ffc829;border:1px solid rgba(120,255,200,.45);color:#e6fff5f2;display:flex;align-items:center;justify-content:center;font-weight:600;letter-spacing:.12em;box-shadow:0 0 16px #78ffc859;animation:digitPop .32s ease}@keyframes digitPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.tangle-input-wrap{margin-top:12px}.tangle-input-wrap .gate-input:disabled{opacity:.5}.repair-wrap{margin-top:8px;display:grid;gap:12px}.repair-btn{width:100%;padding:14px 18px;font-size:16px;letter-spacing:.04em}.repair-full-btn{width:100%;padding:12px 16px;font-size:14px;letter-spacing:.04em;background:#ffffff0a;border:1px solid rgba(255,255,255,.12);color:var(--text);border-radius:12px;transition:background .16s ease,border-color .16s ease}.repair-full-btn:hover{background:#ffffff14;border-color:#ffffff2e}.repair-canvas{width:100%;height:140px;border-radius:16px;border:1px solid rgba(127,183,255,.1);background:#090c12eb;box-shadow:inset 0 0 24px #0a101880}.repair-bar{height:6px;border-radius:999px;background:#ffffff14;overflow:hidden}.repair-fill{height:100%;width:0%;border-radius:inherit;background:linear-gradient(90deg,#78ffc8a6,#86b6ffb3);transition:width .12s ease-out}.repair-ready .repair-fill{box-shadow:0 0 12px #78ffc873}.repair-complete .repair-canvas{border-color:#78ffc859;box-shadow:inset 0 0 28px #78ffc82e}.mutual-wrap{margin-top:8px;display:grid;gap:10px;padding:6px 2px}.mutual-line{opacity:0;transform:translateY(6px);transition:opacity .26s ease,transform .26s ease;font-size:16px;color:var(--text);letter-spacing:.01em}.mutual-line--show{opacity:1;transform:translateY(0)}.mutual-line--prompt{font-weight:600}.mutual-line--dim{color:var(--muted)}.mutual-glow{animation:mutualGlow .7s ease}@keyframes mutualGlow{0%{text-shadow:0 0 0 rgba(120,255,200,0)}40%{text-shadow:0 0 18px rgba(120,255,200,.4)}to{text-shadow:0 0 0 rgba(120,255,200,0)}}.mutual-success{animation:mutualBloom .42s ease}@keyframes mutualBloom{0%{filter:brightness(1)}60%{filter:brightness(1.18)}to{filter:brightness(1)}}.billboard-wrap{margin-top:12px;display:flex;justify-content:center}.billboard-card{width:min(420px,100%);padding:20px 18px;border-radius:16px;background:#0c1018eb;border:1px solid rgba(255,255,255,.08);text-align:center;box-shadow:0 14px 30px #00000040;transition:transform .2s ease,box-shadow .2s ease}.billboard-header{font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.7;margin-bottom:10px}.billboard-code{font-size:36px;font-weight:600;letter-spacing:.2em;margin-bottom:16px;color:#e6ebffe6}.billboard-label{display:block;font-size:13px;margin-bottom:8px;color:var(--muted)}.billboard-input{text-align:center;font-size:16px;letter-spacing:.15em;text-transform:uppercase}.billboard-btn{margin-top:12px;width:100%}.billboard-error{animation:billboardShake .22s ease;box-shadow:0 0 0 1px #78ffc826}.billboard-success{box-shadow:0 0 24px #78ffc859}@keyframes billboardShake{0%{transform:translate(0)}30%{transform:translate(-6px)}60%{transform:translate(6px)}to{transform:translate(0)}}.finale-wrap{margin-top:12px;display:grid;gap:18px;position:relative;--finale-warmth: 0;background:radial-gradient(900px 300px at 20% -10%,rgba(120,180,255,.12),transparent 60%),radial-gradient(800px 300px at 80% 10%,rgba(255,200,160,calc(.12 + var(--finale-warmth) * .18)),transparent 55%),#0a0c1233;border-radius:18px;padding:10px 12px 22px}.finale-stage{display:grid;gap:16px;grid-template-columns:minmax(220px,320px) minmax(0,1fr);align-items:start}.memory-panel{position:relative;width:100%;aspect-ratio:2 / 3;height:auto;border-radius:16px;overflow:hidden;box-shadow:0 18px 30px #0000004d}.memory-panel:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45));pointer-events:none}.memory-inner{position:absolute;top:0;right:0;bottom:0;left:0}.memory-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);transition:opacity 1.2s ease,transform 1.2s ease}.memory-img--active{opacity:1;transform:scale(1)}.finale-chat{display:grid;gap:10px;padding:4px 6px}@media (max-width: 820px){.finale-stage{grid-template-columns:1fr}.memory-panel{max-width:320px;margin:0 auto}}.finale-line{opacity:0;transform:translateY(6px);transition:opacity .32s ease,transform .32s ease;font-size:16px;line-height:1.6;color:#e6ebffeb}.finale-line--show{opacity:1;transform:translateY(0)}.finale-line--past{opacity:.55}.finale-who{font-weight:600;margin-right:6px}.finale-end{text-align:center;opacity:0;transform:translateY(6px);transition:opacity .42s ease,transform .42s ease;padding:10px 0 4px}.finale-end--show{opacity:1;transform:translateY(0)}.finale-end__title{font-size:18px;font-weight:600;margin-bottom:6px}.finale-end__subtitle{color:var(--muted);font-size:14px}.finale-reset{position:absolute;bottom:8px;right:10px;font-size:12px;padding:6px 10px;border-radius:999px;background:#ffffff0a;border:1px solid rgba(255,255,255,.1);color:var(--muted)}.finale-reset--hold{border-color:#78ffc859;color:#e6fff5e6;box-shadow:0 0 14px #78ffc859}.primary-btn:active{background:#7fb7ff14}.fade-in{animation:fadeIn .24s ease}.slide-in{animation:slideIn .24s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideIn{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes nodePop{0%{transform:scale(.95)}55%{transform:scale(1.45)}to{transform:scale(1.35)}}@keyframes nodeSquash{0%{transform:scale(1.15)}to{transform:scale(.9)}}