body{background:#224fed;color:#f9f7ed;font-family:'DM Sans',Arial,sans-serif}
.reaction-shell{
 --reaction-bg:#224fed;--reaction-ink:#f9f7ed;
 --coffee-bg:var(--reaction-ink);--coffee-ink:var(--reaction-bg);--coffee-edge:var(--reaction-ink);--coffee-radius:0;--coffee-shadow:3px 3px 0 color-mix(in srgb,var(--reaction-ink) 35%,transparent);
 height:100svh;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;
 padding:clamp(12px,2vw,28px) clamp(12px,3vw,48px);
 background:var(--reaction-bg);color:var(--reaction-ink);transition:background .1s,color .1s;
}
.reaction-shell:has(.waiting){--reaction-bg:#e9a078;--reaction-ink:#392720}
.reaction-shell:has(.go){--reaction-bg:#d3f966;--reaction-ink:#22320d}
.reaction-shell:has(.early){--reaction-bg:#f4cf67;--reaction-ink:#483513}
.reaction-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;min-width:0}
.reaction-identity{min-width:0}
.reaction-header .exit-experiment{opacity:.8}
.reaction-header h1{font:900 italic clamp(22px,2.2vw,32px)/1 Arial,Helvetica,sans-serif;letter-spacing:-1px;margin:16px 0 0}
.reaction-header h1>span{display:inline-block;margin-left:10px;font-style:normal}
.reaction-top-right{display:flex;align-items:center;gap:24px}
.reaction-top-right .small-label{font-size:13.75px;letter-spacing:1.5px;opacity:.65}
.reaction-top-right .help-button{opacity:.75}
.reaction-controls{display:grid;grid-template-columns:repeat(2,minmax(0,max-content));align-items:center;justify-content:center;justify-items:center;gap:10px 20px;min-width:0;width:100%;flex-shrink:0;text-align:center;font-size:16.25px}
.reaction-controls #round-label{grid-column:1/-1;opacity:.7}
.reaction-records{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.best-time,.highest-time{font:15px 'Space Mono',monospace}
.reaction-controls .control-button{grid-column:1/-1;min-height:44px;margin-top:5px;border:1px solid #fff;background:var(--reaction-bg);color:#fff;padding:8px 12px;font-size:16.25px;font-weight:700}
.reaction-controls .control-button:hover{background:color-mix(in srgb,var(--reaction-bg) 90%,#fff)}
.reaction-controls .control-button:focus-visible{outline-color:var(--reaction-ink)}
.reaction-shell:has(.reaction-stage:is(.waiting,.go,.early)) .reaction-controls .control-button{color:#000;border-color:#000}
.reaction-playfield{min-height:0;min-width:0;display:flex;flex-direction:column}
.reaction-center{flex:1;min-height:0;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px}
.reaction-experience .game-stage{flex:0 1 auto;min-height:0;width:100%;display:flex}
.reaction-stage{display:flex;flex:1;min-width:0;min-height:0;width:100%;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 20px;gap:clamp(8px,2svh,20px);background:transparent;color:inherit}
.reaction-symbol{font:900 clamp(32px,9svh,100px)/1 Arial,Helvetica,sans-serif}
.reaction-stage strong{font:900 italic clamp(40px,min(9.5vw,14svh),132px)/.95 Arial,Helvetica,sans-serif;display:block;max-width:1050px;letter-spacing:-.075em;text-transform:uppercase;text-wrap:balance}
.reaction-stage>span:not(.reaction-symbol){font-size:20px;line-height:1.4;max-width:600px}
.reaction-stage .reaction-hint{font:13.75px/1.4 'Space Mono',monospace!important;letter-spacing:.4px;opacity:.6}
.reaction-stage .reaction-hint:empty{display:none}
.reaction-stage:focus-visible{outline-offset:-4px}
.round-results{display:flex;justify-content:center;gap:10px;width:min(100%,820px);margin:0 auto;flex-shrink:0}
.round-results:empty{display:none}
.round-result{width:calc((100% - 40px)/5);min-width:0;border:1px solid currentColor;padding:10px 6px;font:clamp(16.25px,1.875vw,25px)/1.2 'Space Mono',monospace;text-align:center;overflow-wrap:anywhere}
.round-result span{font-size:12.5px;letter-spacing:1px;opacity:.6;display:block;margin-bottom:6px}
.reaction-playfield>.game-footer{margin:0;border:0;padding:8px 0 0;gap:12px;min-height:0;justify-content:space-between}
.reaction-playfield>.game-footer>#game-status{max-width:420px;font:13.75px/1.4 'Space Mono',monospace;opacity:.65}
.reaction-playfield .game-utilities{gap:8px 16px}
.reaction-experience .game-footer .game-utilities>:is(.support-link,.sound-toggle,.fullscreen-button){font-size:17.5px}
.reaction-experience .game-footer .game-utilities>:is(.sound-toggle,.fullscreen-button){
 display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;
 border:1px solid var(--coffee-edge);border-radius:var(--coffee-radius);background:var(--coffee-ink);color:var(--coffee-bg);
 box-shadow:var(--coffee-shadow);font-family:var(--coffee-font,'DM Sans',Arial,sans-serif);font-weight:700;
 transition:filter .2s,transform .2s;
}
.reaction-experience .game-footer .game-utilities>:is(.sound-toggle,.fullscreen-button):hover:not(:disabled){background:var(--coffee-ink);filter:brightness(1.1);transform:translateY(-1px);text-decoration:none}
.reaction-experience .game-footer .game-utilities>:is(.sound-toggle,.fullscreen-button):active:not(:disabled){transform:translateY(2px)}
.reaction-experience .game-footer .game-utilities>:is(.sound-toggle,.fullscreen-button):focus-visible{outline-color:var(--coffee-bg)}
.reaction-experience .help-dialog{border-radius:0;background:#f4f2e9;box-shadow:10px 10px 0 #1115}
.reaction-experience .help-dialog h2{font-family:Arial,Helvetica,sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:-1.5px}
.reaction-experience .dismiss-help{background:#224fed;border-radius:0}
@media(max-width:700px){
 .reaction-shell{padding:14px 12px 12px;gap:8px}
 .reaction-header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}
 .reaction-header h1{font-size:22px;margin-top:12px}
 .reaction-top-right{grid-column:2;grid-row:1;align-self:start}
 .reaction-top-right .small-label{display:none}
 .reaction-center{gap:10px}
 .reaction-controls{grid-template-columns:minmax(0,1fr);gap:8px 12px;font-size:15px}
 .best-time,.highest-time{font-size:13.75px}
 .reaction-controls .control-button{font-size:15px;padding:8px 12px}
 .reaction-stage{padding:8px 0;gap:clamp(6px,1.5svh,12px)}
 .reaction-stage strong{font-size:clamp(32px,min(10vw,10svh),64px);max-width:560px;letter-spacing:-.065em}
 .reaction-stage>span:not(.reaction-symbol){font-size:17.5px;max-width:350px}
 .reaction-stage .reaction-hint{font-size:12.5px!important}
 .reaction-symbol{font-size:clamp(28px,7svh,62px)}
 .round-results{gap:5px}
 .round-result{width:calc((100% - 20px)/5);padding:8px 2px;font-size:15px}
 .round-result span{font-size:11.25px;letter-spacing:0;margin-bottom:4px}
 .reaction-playfield .game-utilities{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 .reaction-experience .game-footer .game-utilities>:is(.support-link,.sound-toggle,.fullscreen-button){padding:8px 6px;font-size:15px;white-space:normal;text-align:center;overflow:visible;text-overflow:clip}
}
@media(max-height:600px){
 .reaction-shell{padding-block:10px;gap:6px}
 .reaction-header h1{margin-top:8px}
 .reaction-center{gap:6px}
 .reaction-stage{padding-block:6px;gap:6px}
 .reaction-symbol{font-size:28px}
 .reaction-stage strong{font-size:clamp(28px,min(8vw,11svh),64px)}
 .reaction-stage>span:not(.reaction-symbol){font-size:16.25px}
 .round-result{padding-block:5px;font-size:15px}
 .round-result span{font-size:11.25px;margin-bottom:3px}
 .reaction-playfield>.game-footer{padding-top:4px}
}
@media(max-height:460px) and (min-width:501px){
 .reaction-header{gap:6px 12px}
 .reaction-identity{display:flex;align-items:center;gap:16px}
 .reaction-header h1{font-size:20px;margin:0}
 .reaction-stage{gap:5px}
 .reaction-stage>span:not(.reaction-symbol){max-width:100%}
 .reaction-symbol{display:none}
 .reaction-stage strong{font-size:clamp(28px,8svh,40px)}
 .reaction-controls{grid-template-columns:repeat(2,minmax(0,max-content));gap:6px 12px}
}
