:root { font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; color: #eff1e9; background: #101310; font-synthesis: none; --lime:#d4ff4b; --muted:#aab2a4; --line:#363c32; }
* { box-sizing:border-box; }
body { margin:0; }
button,input,select { font:inherit; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:wait; opacity:.5; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid var(--lime); outline-offset:5px; }
[hidden] { display:none!important; }
.masthead { max-width:1320px; margin:auto; padding:26px 48px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:inherit; font-size:16px; letter-spacing:.07em; font-weight:750; }
.brand-mark { color:var(--lime); font-size:29px; font-weight:900; letter-spacing:-.12em; padding-right:4px; }
.edition { color:var(--muted); font-size:13px; }
.shell { max-width:1140px; margin:0 auto; padding:48px 32px 28px; }
.eyebrow { color:var(--lime); font-size:14px; }
h1 { font-size:clamp(32px,4.2vw,54px); line-height:1.32; letter-spacing:-.03em; margin:14px 0 16px; }
h2 { font-size:18px; margin:0 0 24px; font-weight:650; }
p { font-size:16px; line-height:1.8; }
.intro p { color:var(--muted); margin:0 0 36px; }
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.setup { padding-top:12px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
label { display:grid; gap:10px; font-size:14px; }
input,select { background:#191e17; color:inherit; border:1px solid #58614f; border-radius:4px; padding:14px; min-width:0; font-size:16px; }
select { width:100%; }
.check { display:flex; align-items:center; gap:12px; margin-top:20px; line-height:1.7; cursor:pointer; }
input[type=checkbox] { accent-color:var(--lime); width:20px; height:20px; flex:none; }
.primary,.secondary { min-height:52px; border-radius:4px; padding:12px 22px; font-weight:650; border:1px solid #626a59; }
.primary { background:var(--lime); color:#11160b; border-color:var(--lime); }
.secondary { background:transparent; color:inherit; }
.wide { width:100%; display:flex; justify-content:space-between; align-items:center; margin-top:24px; }
.join { border-top:1px solid var(--line); margin-top:28px; padding-top:25px; }
.join h2 { margin-bottom:14px; }
.join form { display:flex; gap:12px; }
.join input { width:100%; }
.join button { flex-shrink:0; white-space:nowrap; }
.test-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.test-heading h2 { font-size:15px; margin:0; }
.test-heading>span { font-size:13px; color:var(--muted); }
.test-pad { background:#d4ff4b; color:#182109; width:100%; border:0; border-radius:4px; margin:16px 0 0; min-height:305px; display:flex; flex-direction:column; align-items:center; justify-content:center; touch-action:none; user-select:none; -webkit-user-select:none; }
.test-letter { font-size:180px; font-weight:850; line-height:1.1; font-family:Arial,sans-serif; }
#test-result { font-size:14px; padding:20px 12px; }
.test-pad.pressed { background:#f2ffbf; }
.test-note { color:var(--muted); font-size:14px; margin:14px 0 0; }
.footnote { border-top:1px solid var(--line); color:var(--muted); font-size:13px; margin-top:36px; padding-top:20px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#notice { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:16px 24px; background:#eef3e5; color:#141a0e; border:1px solid #79856a; border-radius:5px; z-index:10; max-width:calc(100vw - 32px); width:max-content; font-size:15px; }
.stage { position:fixed; inset:0; background:var(--lime); color:#11170a; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:5; touch-action:none; user-select:none; -webkit-user-select:none; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.stage.waiting { background:#101310; color:#e9efdc; }
.stage.mistake { background:#ff977c; }
.stage-top,.stage-bottom { position:absolute; left:24px; right:24px; display:flex; justify-content:space-between; align-items:center; gap:16px; font-size:16px; }
.stage-top { top:max(20px,env(safe-area-inset-top)); }
.stage-bottom { bottom:max(28px,env(safe-area-inset-bottom)); }
.stage-stop { background:transparent; border:1px solid currentColor; color:inherit; border-radius:4px; padding:12px 20px; }
.stimulus { font-family:Arial,sans-serif; font-weight:800; font-size:min(67vw,66dvh); line-height:1; }
.stage.waiting .stimulus { font-family:inherit; font-size:clamp(32px,15vw,110px); }
@media(max-width:680px) { .masthead { padding:16px 20px; }.edition{font-size:12px; max-width:100px; text-align:right;}.shell{padding:28px 20px 20px;}.home-grid{grid-template-columns:1fr;gap:32px}.intro p{margin-bottom:24px;font-size:14px}.test-pad{min-height:240px}.test-letter{font-size:140px}.footnote{margin-top:28px}.stage-top,.stage-bottom{left:16px;right:16px} }
.lobby-heading { display:flex; align-items:start; justify-content:space-between; gap:20px; }
.lobby-heading h1 { margin-top:12px; }
.quiet-link { color:var(--muted); font-size:14px; padding:12px 0; display:inline-block; }
.lobby-grid { display:grid; grid-template-columns:1fr 1fr; gap:72px; margin-top:20px; }
.room-label,.sync-label { font-size:14px; color:var(--muted); }
.room-code { font-family:ui-monospace,monospace; font-size:60px; color:var(--lime); letter-spacing:.08em; font-weight:700; margin:8px 0 24px; }
.rule-line { display:flex; gap:16px; align-items:center; border-block:1px solid var(--line); padding:14px 0; font-size:16px; }
.rule-line strong { font-size:32px; color:var(--lime); }.rule-line>span { margin-left:auto; }
.muted { color:var(--muted); }.small { font-size:14px; line-height:1.7; }
.peers h2 { display:flex; justify-content:space-between; font-size:18px; }.peers h2>span { font-size:14px; font-weight:400; color:var(--muted); }
.member { padding:18px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:10px; font-size:16px; }
.ready-state { color:var(--lime); font-size:14px; }
.share { border-top:1px solid var(--line); margin-top:32px; padding-top:28px; display:flex; gap:22px; align-items:center; }
.share img { flex:none; background:#fff; border-radius:3px; }.share h3 { font-size:16px; margin:0 0 8px; }.share p { margin:0 0 10px; font-size:14px; color:var(--muted); }.share-link { font-size:13px; color:var(--lime); word-break:break-all; }
.result-summary { display:grid; grid-template-columns:2fr 1fr 1fr; border-block:1px solid var(--line); margin:32px 0 24px; padding:26px 0; gap:24px; }.result-summary>div>span { display:block; font-size:14px; color:var(--muted); }.result-summary strong { display:block; font-size:48px; margin-top:12px; font-variant-numeric:tabular-nums; }.result-summary small { font-size:18px; font-weight:400; color:var(--muted); }
.table-wrap { overflow-x:auto; }table { border-collapse:collapse; width:100%; font-size:16px; }th { color:var(--muted); font-size:14px; font-weight:400; }th,td { padding:15px 10px; text-align:left; border-bottom:1px solid var(--line); }th:last-child,td:last-child { text-align:right; font-variant-numeric:tabular-nums; }.exit-result { margin-left:24px; }.text-link { text-decoration:none; display:inline-block; }
@media(max-width:680px){.lobby-grid{grid-template-columns:1fr;gap:32px}.room-code{font-size:52px}.share{gap:16px}.share img{width:108px;height:108px}.result-summary{gap:16px;grid-template-columns:1fr 1fr}.result-summary>div:first-child{grid-column:1/-1}.result-summary strong{font-size:42px}}
.input-choice { margin-top:20px; }
.camera-panel { max-width:1076px; margin:24px auto 48px; border-top:1px solid var(--line); padding:28px 0; display:grid; grid-template-columns:minmax(180px,320px) 1fr; gap:32px; align-items:start; }
#camera-video { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:#232a20; border:1px solid var(--line); border-radius:4px; transform:scaleX(-1); }
.camera-details h2 { margin:0 0 12px; }.camera-details p { margin:8px 0 16px; }.camera-actions { display:flex; gap:12px; flex-wrap:wrap; }.camera-steps { padding-left:24px; line-height:1.8; font-size:14px; }.camera-steps li { margin:18px 0; }.camera-steps button { display:block; margin-top:8px; }.camera-warning { color:#ffc899; }#camera-status { color:var(--lime); }
body[data-view="stage"] #camera-panel { position:fixed; top:max(16px,env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:72px; margin:0; padding:0; border:0; display:block; z-index:6; pointer-events:none; }
body[data-view="stage"] .camera-details { display:none; }
@media(max-width:1120px){.camera-panel{margin:24px 32px 48px;}}
@media(max-width:680px){.camera-panel{margin:16px 20px 32px;grid-template-columns:1fr;gap:20px;}#camera-video{max-width:260px;}.camera-actions button{padding-inline:14px;}}