:root{--bg:#050505;--tx:#e9e7df;--dim:#77756d;--ln:#3a3935;--font:"Silkscreen","Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--bg);color:var(--tx);font-family:var(--font);font-weight:700;font-size:16px;line-height:1.7;text-transform:uppercase}
a{color:var(--dim)}
a:hover,a:focus-visible{color:var(--tx)}
.dim{color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* background gif (empty until BACKGROUND_GIF is set in script.js; fade time is set from script.js) */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:center / cover no-repeat;transition:opacity var(--bg-fade,3s) ease}
#bg.on{opacity:1}
#bg::after{content:"";position:absolute;inset:0;background:rgba(5,5,5,var(--dim-level,.6))}

/* screens */
.screen{display:none;position:relative;z-index:1;min-height:100vh;padding:26px 22px}
.screen.on{display:block;animation:pop .8s ease}
@keyframes pop{from{opacity:0}to{opacity:1}}
.wrap{max-width:760px;margin:0 auto;padding-top:6vh}
.center{min-height:calc(100vh - 52px);display:grid;place-items:center;text-align:center}
.center[hidden]{display:none}

/* intro: text on top, eye underneath */
.intro-stack{display:flex;flex-direction:column;align-items:center;gap:clamp(40px,9vw,88px)}
.intro-line{font-size:clamp(16px,3.4vw,30px);line-height:1.5;min-height:1.5em}
/* The letters still to be typed are laid out invisibly right after the typed ones, so long lines wrap
   in the right place and the text never shifts while it types. */
.line-wrap{display:inline;white-space:normal}
.ghost{visibility:hidden}
.intro-stack{max-width:min(860px,100%)}
.eye{position:relative;width:clamp(80px,14vw,130px);aspect-ratio:1;opacity:0;color:var(--tx)}
.eye-frame{position:absolute;inset:0;width:100%;height:100%}
.eye-open{display:none}
.eye.open .eye-closed{display:none}
.eye.open .eye-open{display:block}

/* "Made by ..." title card, shown after the welcome line. One line, same font as everything else. */
.title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;
  padding-left:.12em;text-align:center;opacity:0;pointer-events:none;font-size:clamp(18px,4.6vw,64px);line-height:1.2;
  letter-spacing:.12em;will-change:opacity,filter,transform}
/* faint hint shown under the welcome line if the visitor hasn't clicked or pressed a key yet */
.intro-hint{position:absolute;left:0;right:0;top:calc(50% + 56px);text-align:center;opacity:0;pointer-events:none;
  transition:opacity 1.4s ease;font-size:clamp(12px,2vw,16px);letter-spacing:.08em;padding:0 22px}

/* end screen text */
.big{font-size:clamp(20px,5vw,40px);line-height:1.4;opacity:0;will-change:transform,opacity}

/* survey */
#progress{margin-bottom:24px}
h2{font-weight:700;font-size:24px;line-height:1.5;margin:0 0 26px}
.field{display:block;width:100%;min-height:5.2em;resize:none;background:none;border:0;border-bottom:2px solid var(--tx);
  color:var(--tx);font:inherit;padding:6px 0;text-transform:none}
.field:focus{outline:none;border-bottom-style:dashed}
.field:disabled{color:var(--dim);border-bottom-color:var(--ln)}
#hint{min-height:1.7em;margin-top:10px}
.actions{margin:28px 0 0;display:flex;gap:12px}
/* the AI reply, shown alone and centered like the intro lines */
.reply-line{max-width:760px;font-size:clamp(16px,3.4vw,30px);line-height:1.5;min-height:1.5em}

/* rating sliders */
.rate{display:grid;grid-template-columns:14ch 1fr 2.5ch;align-items:center;gap:14px;margin:10px 0}
.rate label{color:var(--c)}
.rate output{text-align:right}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--dim)}
input[type=range]::-moz-range-track{height:2px;background:var(--dim)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;margin-top:-6px;background:var(--c,#e9e7df);border:0;border-radius:0}
input[type=range]::-moz-range-thumb{width:14px;height:14px;background:var(--c,#e9e7df);border:0;border-radius:0}
input[type=range]:focus-visible{outline:1px dashed var(--dim);outline-offset:2px}
input[type=range]:disabled{cursor:default;opacity:.55}

/* buttons (same feel as the archive) */
button{font:inherit;text-transform:uppercase;color:var(--tx);border:2px solid var(--tx);padding:6px 16px;cursor:pointer;
  background:linear-gradient(var(--tx),var(--tx)) no-repeat left/0% 100%;
  transition:background-size .2s steps(5),color .2s steps(2),transform .12s steps(2)}
button:hover,button:focus-visible{background-size:100% 100%;color:var(--bg);outline:none}
button:active{transform:translate(1px,1px)}
button[hidden]{display:none}

@media(prefers-reduced-motion:reduce){*,*::before{transition:none!important;animation:none!important}}
@media(max-width:560px){
  body{font-size:14px}
  h2{font-size:18px}
  .rate{grid-template-columns:1fr 2.5ch;gap:4px 12px}
  .rate label{grid-column:1;grid-row:1}
  .rate output{grid-column:2;grid-row:1}
  .rate input{grid-column:1 / span 2;grid-row:2}
  button{padding:6px 12px}
}