@font-face{font-family:Pixelify;src:url('./assets/pixelify-sans.ttf') format('truetype');font-weight:400 700;font-display:swap}
:root{--blue:#083eff;--paper:#fffbe6;--ink:#10110d;--scale:1;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--blue);color:var(--ink)}
body{font-family:Pixelify,monospace}
button,input{font:inherit}
button{color:var(--ink);background:var(--paper);border:3px solid var(--ink);border-radius:3px;cursor:pointer;font-family:Pixelify,monospace;font-weight:600;font-size:25px;line-height:1.1;min-height:46px;padding:9px 18px;box-shadow:4px 4px 0 var(--ink);transition:transform 70ms,box-shadow 70ms}
button:hover:not(:disabled){background:#fffef6;transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
button:active:not(:disabled){transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
button:focus-visible,input:focus-visible{outline:4px solid var(--blue);outline-offset:4px}
.launcher:focus-visible{outline-color:var(--paper);outline-offset:10px}
button:disabled{cursor:default;opacity:.5;box-shadow:none}
[hidden]{display:none!important}
.icon-library{position:absolute;width:0;height:0;overflow:hidden}
#desktop{width:800px;height:600px;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(var(--scale));transform-origin:center;background:var(--blue);overflow:hidden}
.brand{position:absolute;top:94px;left:68px;width:664px;height:74px}
.brand svg{display:block;width:100%;height:100%}
.launchers{position:absolute;top:237px;left:0;width:100%;display:flex;justify-content:center;gap:56px}
.launcher{width:184px;height:183px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px;border-width:3px;box-shadow:7px 7px 0 var(--ink);border-radius:4px;font-size:26px;letter-spacing:0}
.launcher svg{width:108px;height:108px}
.launcher:hover:not(:disabled){box-shadow:8px 8px 0 var(--ink)}
.desktop-hint{position:absolute;top:454px;left:0;width:100%;text-align:center;color:var(--paper);font-family:Pixelify,monospace;font-size:17px;font-weight:500;letter-spacing:1px;margin:0}
.taskbar{position:absolute;bottom:28px;left:28px;right:33px;height:44px;background:var(--paper);border:3px solid var(--ink);border-radius:3px;box-shadow:5px 5px 0 var(--ink);display:grid;grid-template-columns:1fr auto;align-items:center;padding:0 15px;font:600 24px/1 Pixelify,monospace}
.taskbar time{font-variant-numeric:tabular-nums;justify-self:end}
.window{position:absolute;left:29px;right:34px;top:29px;bottom:91px;background:var(--paper);border:3px solid var(--ink);border-radius:4px;box-shadow:6px 6px 0 var(--ink);display:flex;flex-direction:column;z-index:2}
.titlebar{height:51px;min-height:51px;border-bottom:3px solid var(--ink);position:relative;display:flex;align-items:center;justify-content:center;padding:0 12px;gap:20px}
.titlebar h1{font:600 29px/1 Pixelify,monospace;margin:0;background:var(--paper);padding:0 18px;z-index:1}
.stripes{position:absolute;left:15px;right:62px;height:23px;background:repeating-linear-gradient(to bottom,var(--ink) 0,var(--ink) 3px,transparent 3px,transparent 9px)}
.close-button{position:absolute;right:10px;top:6px;font:32px/25px Arial,sans-serif;min-height:33px;width:35px;height:33px;padding:0;box-shadow:none;border-width:2px;z-index:1}
.close-button:hover:not(:disabled){transform:none;box-shadow:none;background:var(--ink);color:var(--paper)}
.window-content{flex:1;min-height:0;position:relative;display:flex;flex-direction:column}
.window-content h2:focus{outline:none}
/* Bottom padding includes the button’s 4px shadow, matching the visible top gap. */
.intro{height:100%;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:24px 50px 28px}
.intro:before,.intro:after{content:'';position:absolute;top:24px;width:96px;height:110px;background:url('./assets/supernova-stars.svg') center / contain no-repeat;pointer-events:none}
.intro:before{left:24px}
.intro:after{right:24px;transform:scaleX(-1)}
.eyebrow{font:600 19px/1.2 Pixelify,monospace;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 12px}
.intro-icon{width:52.7px;height:36.58px;flex-shrink:0;margin:0}
.intro-copy{display:contents}
.intro-copy .eyebrow{margin:0}
.intro h2{font:600 40px/1.05 Pixelify,monospace;margin:0;max-width:500px}
.intro p:not(.eyebrow){font-size:22px;line-height:1.25;max-width:550px;margin:0}
.primary{background:var(--blue);color:var(--paper)}
.primary:hover:not(:disabled){background:#0034eb}
.intro .primary{margin-top:0;min-width:225px}
.question{padding:22px 30px 17px;height:100%;display:flex;flex-direction:column}
.question-meta{display:flex;align-items:center;gap:20px;font:600 19px Pixelify,monospace;margin-bottom:13px}
.progress{display:flex;flex:1;gap:7px}
.progress span{height:9px;border:2px solid var(--ink);flex:1}
.progress span.filled{background:var(--ink)}
.question h2{font:600 29px/1.1 Pixelify,monospace;margin:0 0 18px;min-height:62px;display:flex;align-items:center}
.answers{display:grid;gap:12px;border:0;margin:0;padding:0}
.answer{position:relative;display:flex;align-items:center;min-height:51px;padding:8px 14px;border:2px solid var(--ink);border-radius:2px;font-size:23px;line-height:1.15;cursor:pointer;gap:13px;box-shadow:3px 3px 0 var(--ink)}
.answer:hover{background:#fffef6}
.answer:has(input:checked){background:var(--blue);color:var(--paper)}
.answer:has(input:focus-visible){outline:3px solid var(--blue);outline-offset:4px}
.answer input{position:absolute;opacity:0;width:22px;height:22px}
.radio-mark{width:21px;height:21px;border:2px solid currentColor;flex-shrink:0;display:grid;place-items:center}
.answer input:checked+.radio-mark:after{content:'';width:11px;height:11px;background:currentColor}
.question-actions{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding-top:19px}
.question-actions button{font-size:22px;min-width:118px}
.email-question{padding:12px 26px}
.email-question .question-meta{font-size:17px;margin-bottom:auto}
.email-message{border:2px solid var(--ink);padding:8px 13px;margin-bottom:8px;background:#fffef6}
.email-from{font-size:17px;line-height:1.1;margin:0 0 5px}
.email-from span{font-weight:600;margin-right:8px}
.email-question h2{font-size:26px;line-height:1.05;min-height:0;margin:0 0 7px;display:block}
.email-body{font-size:20px;line-height:1.15;margin:0}
.email-question .answers{gap:7px}
.email-question legend{font-size:17px;font-weight:600;letter-spacing:1px;padding:0;margin-bottom:6px}
.email-question .answer{min-height:40px;padding:6px 11px;font-size:22px;line-height:1.1;gap:11px}
/* Share spare height equally; include the last answer's 3px shadow below. */
.email-question .question-actions{padding-top:3px}
.email-question .question-actions button{font-size:21px;min-height:40px;padding-top:7px;padding-bottom:7px}
.plain{border:0;box-shadow:none;background:transparent;padding:9px 0}
.plain:hover:not(:disabled){box-shadow:none;background:transparent;transform:none;text-decoration:underline}
.result{display:flex;flex-direction:column;gap:20px;height:100%;padding:25px 29px 22px}
.result-main{display:grid;grid-template-columns:190px 1fr;gap:27px;flex:1;min-height:0;align-items:start}
.portrait{border:3px solid var(--ink);background:var(--blue);width:190px;height:220px;box-shadow:5px 5px 0 var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden;margin:0}
.portrait img{width:100%;height:100%;object-fit:contain;object-position:center bottom;image-rendering:pixelated}
.portrait-monogram{font:700 65px Pixelify,monospace;color:var(--paper);border:3px solid currentColor;padding:14px}
.result-copy{min-width:0}
.result-copy .eyebrow{font-size:17px;margin:0 0 8px}
.result h2{font:600 38px/1.05 Pixelify,monospace;margin:0 0 5px}
.founder-company{font-size:20px;line-height:1.15;margin:0 0 17px}
.trait{font:600 23px/1.1 Pixelify,monospace;margin:0 0 9px;color:var(--blue)}
.result-description{font-size:22px;line-height:1.2;margin:0}
.result-footer{border-top:2px solid var(--ink);padding-top:16px;display:flex;align-items:center;justify-content:space-between;gap:19px;min-height:75px}
.print-status{margin:0;font-size:19px;line-height:1.2;flex:1;min-width:0}
.print-status.busy:before{content:'■';display:inline-block;margin-right:8px;animation:blink 1s steps(2,end) infinite}
.result-actions{display:flex;gap:12px;align-items:center;flex-shrink:0}
.result-actions button{font-size:19px;min-height:43px;padding:9px 11px}
#retry-print{max-width:150px}
.watch{height:100%;padding:15px 19px;display:flex;flex-direction:column;gap:12px}
.video-stage{background:var(--ink);border:3px solid var(--ink);min-height:0;flex:1;display:flex;align-items:center;justify-content:center;position:relative;color:var(--paper)}
.video-screen{height:100%;aspect-ratio:4/3;flex:none;position:relative;background:var(--ink);overflow:hidden}
.video-screen > .film-wait{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* Supernova stars fill the cream panels around the 4:3 screen. */
.computer-panel{height:100%;flex:1;min-width:0;position:relative;overflow:hidden;background:var(--paper) url('./assets/supernova-stars.svg') center top / 96px 110px repeat-y}
.video-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.film-wait{text-align:center;padding:20px}
.film-wait svg{width:67px;height:67px;--paper:var(--ink)}
.film-wait h2{font:600 30px Pixelify,monospace;margin:10px 0}
.film-wait p{font-size:18px;line-height:1.4;margin:0}
.video-controls{display:flex;align-items:center;gap:15px;min-height:46px}
.video-controls button{width:50px;height:42px;min-height:42px;padding:7px;box-shadow:3px 3px 0 var(--ink)}
.video-controls svg{width:24px;height:24px}
.video-controls .timeline{flex:1;min-width:0;accent-color:var(--ink);height:25px;cursor:pointer}
.volume-control{position:relative;flex:0 0 50px;height:42px}
.volume-panel{position:absolute;right:0;bottom:calc(100% + 14px);z-index:2;width:50px;height:182px;padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--paper);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}
.volume-panel output{font:600 15px/1 Pixelify,monospace}
#video-volume{writing-mode:vertical-lr;direction:rtl;appearance:none;-webkit-appearance:none;width:24px;flex:1;min-height:0;margin:0;background:transparent;cursor:pointer}
#video-volume::-webkit-slider-runnable-track{width:8px;background:var(--paper);border:2px solid var(--ink);border-radius:0}
#video-volume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:14px;margin-left:-9px;background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 2px var(--ink);border-radius:0}
#video-volume::-moz-range-track{width:4px;background:var(--paper);border:2px solid var(--ink);border-radius:0}
#video-volume::-moz-range-thumb{width:22px;height:14px;background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 2px var(--ink);border-radius:0}
.timecode{font:500 18px Pixelify,monospace;min-width:95px;text-align:right;font-variant-numeric:tabular-nums}
.idle-dialog,.startup-error{position:absolute;z-index:5;left:140px;right:140px;top:185px;padding:26px;background:var(--paper);border:3px solid var(--ink);box-shadow:7px 7px 0 var(--ink);text-align:center}
.idle-dialog h2{font:600 32px Pixelify,monospace;margin:0 0 15px}
.idle-dialog p{font-size:20px;margin:0 0 22px}
.startup-error{font-size:22px}
.connection-error{text-align:center;padding:45px;font-size:20px;line-height:1.5}
@keyframes blink{50%{opacity:.2}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}