/* Front door: the first screen of the root page. Everything is scoped to #front-door so the existing site CSS is untouched.
   The stage is deliberately fixed-dark in both site themes: it is a lit set, like the site's own dark bands, and theme
   adaptation would flatten the lighting that carries the motion. Site fonts and the site's blue are reused. */
html:not(.fd-pending) #front-door{display:none}
#front-door{--fd-ink:#ECEAE3;--fd-ink-2:#BDBBB2;--fd-ink-3:#8F8D85;--fd-stage:#06070a;--fd-signal:#6F8CFF;--fd-fill:#2457FF;
 --fd-display:Archivo,'Arial Narrow',Impact,sans-serif;--fd-mono:Plex,ui-monospace,monospace;--fd-pad:clamp(20px,5vw,84px);
 position:relative;isolation:isolate;overflow:hidden;height:calc(100vh - 52px);height:calc(100svh - 52px);min-height:520px;
 background:var(--fd-stage);color:var(--fd-ink);font:16px/1.5 var(--fd-mono);-webkit-tap-highlight-color:transparent}
#front-door *{box-sizing:border-box}
#front-door [hidden]{display:none!important}
#front-door .fd-stage{transition:opacity .45s ease}#front-door .fd-stage.dim{opacity:0}
#front-door .fd-shade{position:absolute;inset:0;pointer-events:none;background:
 linear-gradient(90deg,rgba(6,7,10,.9) 0,rgba(6,7,10,.55) 30%,rgba(6,7,10,0) 55%),
 linear-gradient(0deg,rgba(6,7,10,.92) 0,rgba(6,7,10,0) 38%),
 linear-gradient(180deg,rgba(6,7,10,.55) 0,rgba(6,7,10,0) 22%)}
#front-door .fd-ui{position:absolute;inset:0;pointer-events:none}
#front-door .fd-ui>*{pointer-events:auto}
#front-door :is(button,textarea,a):focus-visible{outline:3px solid var(--fd-signal);outline-offset:4px}
#fd-title{position:absolute;left:var(--fd-pad);top:clamp(28px,6vh,72px);margin:0;font:900 clamp(74px,10.6vw,176px)/.82 var(--fd-display);letter-spacing:-.025em;word-spacing:.08em;text-transform:uppercase;color:var(--fd-ink);transition:font-size .6s cubic-bezier(.2,.8,.2,1),top .6s cubic-bezier(.2,.8,.2,1),opacity .5s}
/* Opening line while the examples play; the question takes over for the visitor (or when the examples finish). */
#fd-title .fd-t-open{display:none;font-size:.7em;line-height:.9}
#front-door:is([data-phase=demo],[data-phase=boot]) #fd-title .fd-t-open{display:block}
#front-door:is([data-phase=demo],[data-phase=boot]) #fd-title .fd-t-ask{display:none}
#front-door:not([data-phase=demo]):not([data-phase=boot]) #fd-title .fd-t-ask{animation:fd-title .7s cubic-bezier(.2,.8,.2,1) both}
#front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-title{font-size:clamp(20px,2.2vw,30px);top:26px;line-height:1;opacity:.85}
#front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-title br{display:none}
#fd-composer{position:absolute;left:var(--fd-pad);bottom:max(26px,env(safe-area-inset-bottom));width:min(660px,calc(100% - 2 * var(--fd-pad)));margin:0;transition:bottom .5s,width .5s,opacity .45s,transform .45s}
#fd-field{position:relative;border-top:2px solid var(--fd-ink);border-bottom:2px solid var(--fd-ink);background:rgba(10,12,16,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:border-color .2s}
#fd-field:focus-within{border-color:var(--fd-signal)}
#fd-problem,#fd-ghost{display:block;width:100%;height:170px;padding:24px 92px 24px 22px;margin:0;border:0;border-radius:0;outline:0;resize:none;background:transparent;color:var(--fd-ink);font:400 clamp(18px,1.7vw,24px)/1.5 var(--fd-mono);caret-color:var(--fd-signal);-webkit-appearance:none;appearance:none;transition:height .5s cubic-bezier(.2,.8,.2,1),padding .5s,font-size .4s}
#fd-problem::placeholder{color:var(--fd-ink-3);opacity:1}
#fd-ghost{position:absolute;inset:0;pointer-events:none;white-space:pre-wrap;overflow:hidden}
#fd-ghost .c{display:inline-block;width:.6em;height:1.15em;margin-left:2px;vertical-align:-.18em;background:var(--fd-signal);animation:fd-blink 1s steps(1) infinite}
#fd-ghost.sent{color:var(--fd-ink-2)}#fd-ghost.sent .c{display:none}
@keyframes fd-blink{50%{opacity:0}}
#front-door[data-phase=demo] #fd-problem::placeholder{opacity:0}
#front-door:not([data-phase=demo]) #fd-ghost{display:none}
#front-door[data-phase=demo][data-label=on] #fd-composer{opacity:0;transform:translateY(14px);pointer-events:none}
#front-door .fd-send{position:absolute;right:16px;bottom:16px;width:60px;height:60px;margin:0;border:0;border-radius:0;background:var(--fd-fill);color:#fff;font:400 38px/1 var(--fd-mono);display:grid;place-items:center;padding:0;cursor:pointer;transition:transform .25s,opacity .3s}
#front-door .fd-send:hover{transform:translateX(3px)}#front-door .fd-send.press{transform:translateX(7px) scale(.94)}
#front-door .fd-send:active{transform:scale(.94)}
#front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-composer{bottom:auto;top:78px;width:min(520px,calc(100% - 2 * var(--fd-pad)))}
#front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-problem{height:62px;padding:14px 20px;font-size:15px;color:var(--fd-ink-2)}
#front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) .fd-send{opacity:0;pointer-events:none}
#fd-verdict{position:absolute;left:var(--fd-pad);bottom:max(30px,env(safe-area-inset-bottom));width:min(720px,calc(100% - 2 * var(--fd-pad)))}
#front-door[data-label=on] #fd-verdict-title{font-size:clamp(36px,4.8vw,84px);line-height:.95}
/* A dark plate behind the small blue line keeps it readable wherever the lit floor passes behind it. */
#fd-kicker{display:inline-block;margin:0 0 14px;padding:3px 8px 3px 0;font:700 12px/1.4 var(--fd-mono);letter-spacing:.14em;color:#A9BCFF;background:rgba(6,7,10,.88);box-shadow:-6px 0 0 rgba(6,7,10,.88)}
#fd-verdict-title{margin:0;font:900 clamp(46px,6.2vw,106px)/.9 var(--fd-display);letter-spacing:-.015em;text-transform:uppercase;color:var(--fd-ink)}
#fd-verdict-line{margin:16px 0 0;font:400 clamp(15px,1.4vw,19px)/1.5 var(--fd-mono);color:var(--fd-ink-2);max-width:46ch}
#front-door .fd-go{display:inline-flex;align-items:center;gap:18px;margin:26px 0 0;min-height:62px;padding:14px 26px;border:0;border-radius:0;background:var(--fd-fill);color:#fff;font:800 clamp(26px,2.4vw,34px)/1 var(--fd-display);letter-spacing:.01em;cursor:pointer;transition:transform .2s,background .2s}
#front-door .fd-go:hover{background:#3A68FF;transform:translateX(4px)}
#fd-truth{margin:18px 0 0;font:13px/1.5 var(--fd-mono);color:var(--fd-ink-3);letter-spacing:.02em}
#fd-clarify{margin:20px 0 0;display:grid;gap:12px;max-width:520px}
#fd-detail{width:100%;padding:14px 16px;border:0;border-radius:0;border-bottom:2px solid var(--fd-ink);outline:0;background:rgba(10,12,16,.6);color:var(--fd-ink);font:17px/1.5 var(--fd-mono);resize:none;-webkit-appearance:none;appearance:none}
#fd-detail:focus{border-color:var(--fd-signal)}
#fd-detail::placeholder{color:var(--fd-ink-3);opacity:1}
#fd-added{position:absolute;left:var(--fd-pad);top:182px;width:min(520px,calc(100% - 2 * var(--fd-pad)));margin:0;padding:8px 12px 8px 14px;border-left:2px solid var(--fd-signal);background:rgba(10,12,16,.62);max-height:calc(4 * 1.45em + 40px);overflow:auto;font:400 13.5px/1.45 var(--fd-mono);color:var(--fd-ink-2)}
#fd-added b{display:block;margin:0 0 2px;font:700 12px/1.4 var(--fd-mono);letter-spacing:.14em;color:var(--fd-signal)}
#fd-added p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
#front-door:not([data-phase=playing]):not([data-phase=result]):not([data-phase=clarify]) #fd-added{display:none}
#front-door .fd-edit{display:inline-block;margin:26px 0 0;padding:14px 0;border:0;border-bottom:2px solid var(--fd-ink);border-radius:0;background:transparent;color:var(--fd-ink);font:700 13px/1 var(--fd-mono);letter-spacing:.14em;cursor:pointer}
#front-door .fd-edit:hover{color:var(--fd-signal);border-color:var(--fd-signal)}
#fd-verdict.reveal{animation:fd-rise .7s cubic-bezier(.2,.8,.2,1) both}
#fd-verdict.reveal #fd-verdict-title{animation:fd-title .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes fd-rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes fd-title{from{opacity:0;transform:translateY(26px) scale(.98);letter-spacing:.04em}to{opacity:1;transform:none}}
/* STOP DEMO: a real button, early in the tab order, only while the automatic examples play (never in reduced motion). */
#fd-pause{position:absolute;right:var(--fd-pad);top:62px;display:none;align-items:center;min-height:44px;padding:0 16px;margin:0;border:2px solid var(--fd-ink-2);border-radius:0;background:rgba(10,12,16,.72);color:var(--fd-ink);font:700 13px/1 var(--fd-mono);letter-spacing:.14em;cursor:pointer;-webkit-appearance:none;appearance:none}
#front-door[data-phase=demo] #fd-pause{display:inline-flex}
#fd-pause:hover{color:#fff;border-color:#fff}
@media(prefers-reduced-motion:reduce){#front-door #fd-pause{display:none!important}}
/* The way down to the rest of the site: the only words on the stage besides the question. */
#front-door .fd-more{position:absolute;right:var(--fd-pad);top:18px;display:flex;align-items:center;gap:10px;min-height:44px;color:var(--fd-ink-3);font:700 12px/1 var(--fd-mono);letter-spacing:.14em;text-decoration:none;transition:color .2s,opacity .4s}
#front-door .fd-more:hover{color:var(--fd-ink)}
#front-door:is([data-phase=playing]) .fd-more{opacity:0;pointer-events:none}

@media(max-width:760px),(max-aspect-ratio:4/5){
 #front-door{--fd-pad:20px;height:calc(100vh - 50px);height:calc(100svh - 50px)}
 #fd-title{top:34px;font-size:clamp(60px,18vw,120px);line-height:.84}
 #front-door .fd-shade{background:linear-gradient(0deg,rgba(6,7,10,.95) 0,rgba(6,7,10,.35) 32%,rgba(6,7,10,0) 52%),linear-gradient(180deg,rgba(6,7,10,.8) 0,rgba(6,7,10,.3) 30%,rgba(6,7,10,0) 46%)}
 #fd-composer{width:calc(100% - 2 * var(--fd-pad))}
 #fd-problem,#fd-ghost{height:126px;padding:18px 78px 18px 16px;font-size:16px}
 #front-door .fd-send{width:50px;height:50px;font-size:32px;right:12px;bottom:12px}
 #front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-title{font-size:19px;top:30px}
 #front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-composer{top:62px;width:calc(100% - 2 * var(--fd-pad))}
 #front-door:is([data-phase=playing],[data-phase=result],[data-phase=clarify]) #fd-problem{height:56px;padding:12px 14px;font-size:13.5px}
 #fd-verdict{width:calc(100% - 2 * var(--fd-pad))}
 #fd-added{top:164px;font-size:12.5px;max-height:calc(3 * 1.45em + 36px);padding:6px 10px 6px 12px}
 #fd-verdict-title{font-size:clamp(40px,12.4vw,76px)}
 #front-door[data-label=on] #fd-verdict-title{font-size:clamp(32px,9.4vw,52px)}
 #front-door .fd-go{width:100%;justify-content:space-between;margin-top:20px}
 #fd-truth{font-size:12px;margin-top:14px}
 #front-door .fd-more{top:4px;min-height:30px;font-size:12px}
 #fd-pause{top:auto;right:auto;left:var(--fd-pad);bottom:max(206px,calc(env(safe-area-inset-bottom) + 206px));min-height:44px}
 /* Once there is a verdict, the lower half is for reading it: the scene stays visible above and fades behind the text. */
 #front-door:is([data-phase=result],[data-phase=clarify]) .fd-shade{background:linear-gradient(0deg,rgba(6,7,10,.97) 0,rgba(6,7,10,.92) 40%,rgba(6,7,10,0) 66%),linear-gradient(180deg,rgba(6,7,10,.8) 0,rgba(6,7,10,.3) 30%,rgba(6,7,10,0) 46%)}
}
@media(max-height:560px) and (min-aspect-ratio:1/1){#fd-title{font-size:64px;top:22px}#fd-problem,#fd-ghost{height:104px}}
/* iOS Safari only delivers click to document-level listeners for elements it considers clickable; this is what makes a tap on the stage count. */
@media(pointer:coarse){#front-door{cursor:pointer}#front-door :is(textarea,#fd-detail){cursor:text}}
@media(prefers-reduced-motion:reduce){#front-door *,#front-door *::before,#front-door *::after{animation:none!important;transition:none!important}}