/* /continue — the book's permanent entry. Inherits the site's tokens; adds the key form and transition. */
:root { --stage-h: 44svh; }
@media (min-width: 900px) { .continue .app { grid-template-columns: minmax(0, 1fr) clamp(400px, 38vw, 540px); } }
.stage.dim .scene { filter: brightness(.62) saturate(.85); transition: filter 1.6s ease; }
.continue .side { padding-top: 28px; }
@media (min-width: 900px) { .continue .side { padding-top: 64px; display: flex; flex-direction: column; justify-content: center; } .continue .side-head { position: absolute; top: 40px; left: 44px; right: 44px; } }
.continue .panel { gap: 18px; }
.gate, .intro { display: flex; flex-direction: column; gap: 18px; transition: opacity .5s ease, transform .5s ease; }
.gate.fade { opacity: 0; transform: translateY(-6px); }
.intro { opacity: 0; transform: translateY(6px); transition: opacity .9s ease, transform .9s ease; }
.intro.in { opacity: 1; transform: none; }
.gate h1.display, .intro h1.display { font-size: clamp(30px, 7vw, 40px); margin: 0; }
@media (min-width: 900px) { .gate h1.display, .intro h1.display { font-size: clamp(32px, 2.8vw, 46px); } }
.keyform { display: grid; gap: 10px; margin-top: 18px; max-width: 420px; }
.keyform label { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ochre); }
.keyform input { background: transparent; border: 0; border-bottom: 1px solid rgba(236,230,216,.35); border-radius: 0; padding: 12px 2px 10px; font-family: var(--display); font-size: 26px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); min-height: 52px; caret-color: var(--ochre); transition: border-color .3s; }
.keyform input:focus { outline: none; border-bottom-color: var(--ochre); }
.keyform input:focus-visible { outline: 2px solid var(--ochre); outline-offset: 6px; }
.key-msg { margin: 0; min-height: 1.5em; font-size: 15px; color: var(--ink-2); font-style: italic; }
.keyform.miss .key-msg { animation: settle .5s ease; }
@keyframes settle { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.key-btn { justify-self: start; background: transparent; border: 1px solid rgba(201,162,74,.7); color: var(--ink); border-radius: 2px; padding: 12px 22px; min-height: 48px; min-width: 160px; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; transition: border-color .25s, background .25s, opacity .6s, transform .6s; }
.key-btn:hover:not(:disabled) { border-color: var(--ochre); background: rgba(201,162,74,.08); }
.key-btn:disabled { opacity: .55; cursor: default; }
.key-help { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }
.kept { font-style: italic; font-size: clamp(30px, 7vw, 44px); margin: 12vh 0; opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; }
.kept.in { opacity: 1; transform: none; }
.question .key-btn { margin-top: 18px; opacity: 0; transform: translateY(6px); }
.question .key-btn.in { opacity: 1; transform: none; }
.actions .key-btn { width: 100%; justify-self: stretch; text-align: left; }
.actions .ghost { text-decoration: none; display: block; }
.todo { font-size: 12px; color: var(--muted); border: 1px dashed var(--line); padding: 8px 10px; border-radius: 3px; }
.reset { opacity: .55; }
.reset:hover { opacity: 1; }
.motion-off .gate, .motion-off .intro, .motion-off .kept { transition-duration: .2s; }
@media (prefers-reduced-motion: reduce) { .gate, .intro, .kept, .key-btn { transition-duration: .15s; } .keyform.miss .key-msg { animation: none; } }