.kw-page { position:relative; --kw-bg:#10292d; --kw-panel:#153236; --kw-line:#365052; --kw-text:#e6f1e9; --kw-muted:#a1b9b6; --kw-mint:#71ddbc; --kw-coral:#f19378; --kw-purple:#b8a1f0; --kw-ink:#10292d; }
.kw-modebar { position:absolute; top:24px; right:110px; display:flex; padding:3px; border:1px solid var(--line); border-radius:5px; gap:3px; }.kw-modebar button { border:0; border-radius:3px; color:var(--muted); padding:7px 16px; cursor:pointer; background:transparent; font-size:12px; }.kw-modebar button[aria-pressed="true"] { background:var(--surface-alt); color:var(--ink); }
.kw-online-launch { padding:42px; border:1px solid var(--line); border-radius:6px; background:var(--surface); }.kw-online-launch h2 { margin:10px 0; font-size:36px; letter-spacing:-.04em; }.kw-online-launch>p { color:var(--muted); max-width:660px; }
.kw-online-launch form { display:flex; align-items:flex-end; gap:16px; margin:28px 0; }.kw-online-launch label { display:grid; gap:7px; font-size:12px; }.kw-online-launch input,.kw-online-launch select { padding:12px; background:var(--page); border:1px solid var(--line); border-radius:4px; color:var(--ink); }.kw-online-launch input { min-width:280px; }
.kw-lobby-heading { display:flex; justify-content:space-between; align-items:center; border-top:1px solid var(--line); padding-top:20px; }.kw-online-launch ul { list-style:none; padding:0; }.kw-online-launch li { display:flex; justify-content:space-between; align-items:center; padding:16px 0; border-top:1px solid var(--line); }.kw-online-launch li strong,.kw-online-launch li small { display:block; }.kw-online-launch li small { color:var(--muted); margin-top:4px; }
.kw-room-actions { display:flex; gap:8px; margin-left:auto; margin-right:18px; }.kw-room-actions button { background:transparent; color:var(--kw-muted); border:1px solid var(--kw-line); padding:8px; border-radius:3px; font-size:10px; cursor:pointer; }.kw-room-actions input { width:250px; }
.kw-members { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:18px; }.kw-members span { font-size:11px; color:var(--kw-text); border-left:3px solid; padding:4px 8px; background:#ffffff08; }.kw-overlay-actions { display:flex; align-items:center; gap:12px; }
.kw-speed-note { color:var(--kw-muted); font-size:10px; display:flex; align-items:center; padding:6px; }.kw-page[data-online="true"] .kw-map-bottom>span:first-child { gap:5px; font-size:9px; }.kw-page[data-online="true"] .kw-map-bottom>span:first-child>span { max-width:115px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kw-page[data-online="true"] #kw-board { height:clamp(330px,calc(100vh - 385px),620px); }
.kw-workspace { display:grid; grid-template-columns:minmax(0,1fr) 246px; background:var(--kw-bg); color:var(--kw-text); border-radius:6px; overflow:hidden; box-shadow:0 16px 40px #10292d14; }
.kw-map-column { min-width:0; display:flex; flex-direction:column; }
.kw-map-heading { display:flex; align-items:center; justify-content:space-between; padding:24px 28px 0; }
.kw-eyebrow { font-size:10px; letter-spacing:.16em; font-weight:650; color:var(--kw-muted); }
.kw-map-heading h2 { font-size:23px; letter-spacing:-.04em; font-weight:500; margin:5px 0 0; color:var(--kw-text); }
.kw-clock { display:grid; text-align:right; gap:4px; }
.kw-clock span { color:var(--kw-muted); font-size:11px; }.kw-clock b { font-family:Consolas,'Courier New',monospace; font-size:20px; font-weight:400; }
.kw-board-wrap { position:relative; flex:1; display:grid; align-content:center; min-height:330px; }
#kw-board { display:block; width:100%; height:clamp(330px,calc(100vh - 330px),620px); overflow:visible; user-select:none; touch-action:none; }
.kw-grid-line { stroke:#769490; stroke-width:.6; opacity:.1; }.kw-lane { stroke:#83b0a6; stroke-width:1.4; stroke-dasharray:3 8; opacity:.19; }
.kw-lane.kw-available { opacity:.65; stroke:var(--kw-mint); stroke-width:2; }
.kw-route { fill:none; stroke-width:3; opacity:.75; }.kw-route[data-owner="1"] { stroke:var(--kw-mint); }.kw-route[data-owner="2"] { stroke:var(--kw-coral); }.kw-route[data-owner="3"] { stroke:var(--kw-purple); }
.kw-drag-line { fill:none; stroke:var(--kw-mint); stroke-width:2; stroke-dasharray:6 5; pointer-events:none; }
.kw-drag-line.kw-drag-invalid { stroke:var(--kw-coral); opacity:.65; }.kw-hit { pointer-events:all; }.kw-node.kw-drop-target .kw-halo { opacity:1; stroke-width:4; }.kw-node.kw-armed .kw-core { stroke-width:3; }
.kw-node { cursor:pointer; outline:none; }.kw-node .kw-halo { fill:none; stroke:currentColor; stroke-width:1; opacity:.2; transition:opacity .2s; }
.kw-node .kw-core { fill:var(--kw-bg); stroke:currentColor; stroke-width:2; }.kw-node .kw-fill { fill:currentColor; opacity:.12; }
.kw-node[data-owner="0"] { color:#92a7a3; }.kw-node[data-owner="1"] { color:var(--kw-mint); }.kw-node[data-owner="2"] { color:var(--kw-coral); }.kw-node[data-owner="3"] { color:var(--kw-purple); }
.kw-node .kw-node-number { font:600 24px Consolas,'Courier New',monospace; fill:var(--kw-text); text-anchor:middle; dominant-baseline:central; pointer-events:none; }
.kw-node .kw-node-label { font:10px Consolas,'Courier New',monospace; letter-spacing:1px; fill:var(--kw-muted); text-anchor:middle; pointer-events:none; }
.kw-node .kw-node-level { stroke:currentColor; stroke-width:3; stroke-linecap:round; }
.kw-node:hover .kw-halo,.kw-node:focus-visible .kw-halo,.kw-node.kw-selected .kw-halo { opacity:1; stroke-width:2; }
.kw-node.kw-selected .kw-halo { stroke-dasharray:6 4; animation:kw-orbit 18s linear infinite; transform-box:fill-box; transform-origin:center; }
.kw-node:focus-visible .kw-core { stroke-width:5; }.kw-node.kw-captured .kw-halo { animation:kw-capture .7s ease-out; }
.kw-map-caption { font:9px Consolas,'Courier New',monospace; fill:var(--kw-muted); opacity:.45; letter-spacing:2px; }
.kw-map-bottom { display:flex; justify-content:space-between; align-items:center; padding:12px 26px 20px; font-size:10px; color:var(--kw-muted); gap:12px; }
.kw-map-bottom>span:first-child { display:flex; align-items:center; gap:8px; }.kw-map-bottom #kw-third-team { align-items:center; gap:8px; display:inline-flex; }
.kw-dot { display:inline-block; height:7px; width:7px; border-radius:50%; margin-left:8px; }.kw-dot:first-child { margin-left:0; }.kw-team-1 { background:var(--kw-mint); }.kw-team-2 { background:var(--kw-coral); }.kw-team-3 { background:var(--kw-purple); }.kw-neutral { background:#92a7a3; }
.kw-inspector { background:var(--kw-panel); border-left:1px solid var(--kw-line); padding:26px 22px 18px; display:flex; flex-direction:column; }
.kw-control-count { display:flex; align-items:baseline; gap:9px; margin:8px 0 12px; }.kw-control-count strong { font-size:48px; font-weight:400; line-height:1; letter-spacing:-.05em; }.kw-control-count>span { color:var(--kw-muted); font-size:12px; }
.kw-balance-bar { background:#ffffff0b; height:4px; display:flex; overflow:hidden; }.kw-balance-bar i { height:100%; transition:width .4s; }#kw-share-1 { background:var(--kw-mint); }#kw-share-2 { background:var(--kw-coral); }#kw-share-3 { background:var(--kw-purple); }
.kw-balance dl { margin:16px 0 0; }.kw-balance dl>div { display:flex; justify-content:space-between; align-items:baseline; margin:9px 0; }.kw-balance dt { font-size:12px; color:var(--kw-muted); }.kw-balance dd { margin:0; font:18px Consolas,'Courier New',monospace; }.kw-balance dd small { font:11px inherit; color:var(--kw-muted); }
.kw-selection { border-block:1px solid var(--kw-line); padding:20px 0; margin:14px 0 18px; min-height:158px; }.kw-selection h3 { margin:8px 0 6px; font-size:18px; font-weight:500; color:var(--kw-text); }.kw-selection p { font-size:11px; color:var(--kw-muted); line-height:1.6; margin:0 0 8px; min-height:34px; }
.kw-levels { display:flex; gap:5px; margin:10px 0; }.kw-levels i { height:3px; width:22px; background:var(--kw-line); }.kw-levels i.active { background:var(--kw-mint); }
.kw-page button,.kw-page select { font-family:inherit; }.kw-primary,.kw-secondary,.kw-text-button { cursor:pointer; transition:background .15s,transform .15s; }
.kw-primary { background:var(--kw-mint); color:var(--kw-ink); border:0; border-radius:3px; font-size:13px; font-weight:700; padding:14px 20px; display:inline-flex; justify-content:space-between; gap:24px; align-items:center; }.kw-primary:hover { background:#9cebcf; transform:translateY(-1px); }
.kw-secondary { background:transparent; border:1px solid #5b7773; border-radius:3px; color:var(--kw-text); padding:10px 9px; font-size:11px; }.kw-secondary:hover { background:#ffffff0a; }.kw-selection .kw-secondary { width:100%; display:flex; justify-content:space-between; align-items:center; }
.kw-text-button { color:var(--kw-muted); border:0; background:none; padding:10px 0 0; font-size:11px; display:flex; justify-content:space-between; align-items:center; width:100%; }.kw-text-button:hover { color:var(--kw-text); }
.kw-page kbd { background:#ffffff0a; border:1px solid #526e69; padding:1px 4px; border-radius:2px; font:10px Consolas,monospace; color:var(--kw-muted); }
.kw-controls { margin-top:auto; }.kw-controls label { display:block; font-size:10px; color:var(--kw-muted); margin-bottom:6px; }.kw-controls select { color:var(--kw-text); background:var(--kw-panel); border:1px solid #5b7773; border-radius:3px; font-size:12px; padding:8px; width:100%; margin-bottom:12px; }.kw-controls option { background:var(--kw-panel); color:var(--kw-text); }
.kw-control-buttons { display:flex; gap:7px; }.kw-control-buttons>button { flex:1; }.kw-prototype-note { font-size:9px; line-height:1.6; margin:15px 0 0; color:var(--kw-muted); opacity:.8; }
.kw-page button:disabled { opacity:.4; cursor:default; transform:none; }.kw-page :is(button,select):focus-visible { outline:2px solid var(--kw-mint); outline-offset:3px; }
.kw-overlay { position:absolute; inset:0; padding:30px 10%; display:flex; align-items:flex-start; flex-direction:column; justify-content:center; background:linear-gradient(90deg,#10292df7 18%,#10292de6 58%,#10292d70); animation:kw-enter .45s ease-out; }.kw-overlay h2 { font-size:clamp(30px,3.5vw,51px); line-height:1.08; letter-spacing:-.05em; font-weight:450; max-width:500px; color:var(--kw-text); margin:18px 0; }.kw-overlay p { max-width:360px; color:var(--kw-muted); font-size:13px; line-height:1.8; margin:0 0 25px; }
.kw-pause-screen { position:absolute; inset:0; background:#10292dea; display:flex; flex-direction:column; justify-content:center; align-items:center; }.kw-pause-screen>span { color:var(--kw-mint); font-size:32px; }.kw-pause-screen h2 { color:var(--kw-text); font-size:28px; font-weight:450; margin:14px 0 24px; }
.kw-page [hidden] { display:none!important; }.kw-status { min-height:40px; display:flex; align-items:center; font-size:12px; color:var(--muted); padding:8px 0; }
.kw-guide { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); gap:28px; padding:18px 0 0; }.kw-guide p { margin:0; }.kw-guide b { font-size:11px; display:block; margin-bottom:6px; }.kw-guide span { font-size:11px; color:var(--muted); display:block; line-height:1.6; }
.kw-dialog-actions { display:flex; gap:12px; justify-content:flex-end; margin-top:20px; }
@keyframes kw-orbit { to { transform:rotate(360deg); } }@keyframes kw-enter { from { opacity:0; transform:translateY(8px); }to { opacity:1; transform:none; } }@keyframes kw-capture { from { r:36; opacity:1; stroke-width:5; }to { r:62; opacity:0; stroke-width:1; } }
@media (min-width:1600px) { .kw-page { width:min(1440px,calc(100vw - 96px)); margin-left:calc((100% - min(1440px,calc(100vw - 96px))) / 2); }.kw-workspace { grid-template-columns:minmax(0,1fr) 260px; } }
@media (max-width:1400px) { .kw-inspector { padding:20px 18px 16px; }.kw-map-heading { padding:20px 24px 0; }.kw-selection { padding:14px 0; margin:10px 0 14px; min-height:145px; }.kw-control-count strong { font-size:40px; }.kw-overlay h2 { font-size:39px; }.kw-prototype-note { margin-top:10px; } }
@media (max-height:850px) {
    .kw-inspector { padding:16px 18px 12px; }.kw-control-count { margin:6px 0 10px; }.kw-control-count strong { font-size:32px; }
    .kw-balance dl { margin:8px 0 0; }.kw-balance dl>div { margin:4px 0; }.kw-balance dd { font-size:16px; line-height:1.2; }.kw-balance dt { line-height:1.3; }
    .kw-selection { height:190px; min-height:190px; margin:10px 0; padding:10px 0; }.kw-selection h3 { font-size:16px; line-height:1.2; margin:6px 0 4px; }.kw-selection p { line-height:1.5; min-height:30px; margin-bottom:4px; }.kw-levels { margin:6px 0 8px; }
    .kw-secondary { padding:8px; }.kw-controls select { padding:6px 8px; margin-bottom:8px; }.kw-controls label { margin-bottom:4px; }.kw-prototype-note { margin-top:10px; }.kw-map-bottom { padding-bottom:14px; }
}
@media (prefers-reduced-motion:reduce) { .kw-page *, .kw-page *::before { animation:none!important; transition:none!important; } }