*{box-sizing:border-box}:root{--paper: #f4efe6;--paper-2: #ebe4d6;--card: #fbf8f2;--ink: #2b2f3a;--ink-2: #6b6f66;--line: rgba(43, 47, 58, .12);--space: #0b0e1a;--kiosk-font: "Avenir Next", "Avenir", "Helvetica Neue", system-ui, sans-serif;--mono: ui-monospace, "SF Mono", Menlo, monospace}body{margin:0;font-family:var(--kiosk-font);background:var(--space);color:var(--ink)}.app{display:grid;grid-template-columns:1fr 520px;height:100vh;overflow:hidden}.left{position:relative;min-width:0;background:var(--space)}.sky-wrap{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}canvas.sky{display:block;width:100%;height:100%}.sky-hud{position:absolute;top:14px;left:16px;display:flex;gap:8px;align-items:center;z-index:1;pointer-events:none}.pill{font:700 13px var(--kiosk-font);letter-spacing:.02em;color:#fff;background:#0b0e1a9e;border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.pill.faint{color:#ecf0ffb3;font-weight:600}.pill.time{color:#0b0e1a;background:#f5c542;border-color:#f5c542;font-weight:700}.apps{position:absolute;top:14px;right:16px;z-index:1;display:flex;gap:4px;padding:3px;border-radius:999px;background:#0b0e1a9e;border:1px solid rgba(255,255,255,.14);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.apps a{font:600 12px var(--kiosk-font);color:#ecf0ffb3;text-decoration:none;padding:4px 10px;border-radius:999px;transition:background .15s ease,color .15s ease}.apps a:hover{color:#fff}.apps a.current{color:#0b0e1a;background:#ecf0ffe6}.card{position:absolute;left:16px;bottom:16px;z-index:1;width:min(340px,calc(100% - 32px));padding:16px 18px 14px;border-radius:16px;background:#f4efe6f0;color:var(--ink);box-shadow:0 18px 40px -16px #000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:rise .4s cubic-bezier(.2,.9,.3,1.1);pointer-events:none}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.card header{display:flex;align-items:center;gap:12px;margin-bottom:10px}.card .swatch{flex:none;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 32% 30%,#fff9 0,var(--body) 45%,color-mix(in srgb,var(--body) 40%,#000) 100%);box-shadow:0 0 0 3px color-mix(in srgb,var(--body) 30%,transparent)}.card h2{margin:0;font-size:1.35rem;letter-spacing:-.01em;line-height:1.1}.card .tagline{margin:2px 0 0;color:var(--ink-2);font-size:.92rem}.card dl{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin:0;font-size:.9rem}.card dl div{display:flex;flex-direction:column;gap:1px}.card dt{color:var(--ink-2);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700}.card dd{margin:0;font-weight:600}.card .note{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:.9rem;line-height:1.35;color:var(--ink)}.panel .foot{margin:auto 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;line-height:1.4;color:var(--ink-2)}.panel{--accent: #3b7fc4;font-family:var(--kiosk-font);color:var(--ink);background:var(--paper);border-left:1px solid var(--line);padding:22px 24px 24px;display:flex;flex-direction:column;gap:18px;min-width:0;overflow-y:auto}.kiosk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:28px}.kiosk-head .mode{display:flex;align-items:center;gap:10px;margin:0;font-size:1.05rem;font-weight:600;letter-spacing:.01em;color:var(--ink)}.kiosk-head .dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}.stops{display:flex;gap:7px;list-style:none;padding:0;margin:0;align-items:center}.stops .pip{display:block;width:9px;height:9px;border-radius:50%;background:var(--body);opacity:.35;transition:transform .25s ease,opacity .25s ease}.stops li.current .pip{opacity:1;transform:scale(1.5);box-shadow:0 0 0 3px color-mix(in srgb,var(--body) 30%,transparent)}.kiosk{display:flex;flex-direction:column;gap:18px}.kiosk .viewfinder{position:relative;aspect-ratio:4 / 3;border-radius:18px;overflow:hidden;background:#1d2129;box-shadow:0 0 0 3px var(--accent),0 14px 32px -12px #2b2f3a73;transition:box-shadow .3s ease}.kiosk .viewfinder video{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;display:block}.kiosk .viewfinder .overlay{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;pointer-events:none}.kiosk .camera-error{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;margin:0;padding:24px;text-align:center;color:#f4efe6}.kiosk .loading{position:absolute;left:50%;bottom:14px;transform:translate(-50%);display:flex;align-items:center;gap:8px;margin:0;padding:6px 12px;border-radius:999px;background:#0b0e1ab8;color:#fff;font-size:.85rem;font-weight:600;white-space:nowrap}.kiosk .loading .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse 1.2s ease-in-out infinite}.kiosk .loading.failed{background:#c94a3e}.kiosk .loading.failed .dot{animation:none;background:#fff}@keyframes pulse{0%,to{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}.legend{display:flex;flex-direction:column;gap:16px}.legend .hint{margin:0;font-size:1.55rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}.legend .note{margin:-6px 0 0;font-size:1.05rem;line-height:1.4;color:var(--ink-2)}.controls{display:grid;grid-template-columns:max-content 1fr;gap:10px 16px;align-items:center;margin:0;font-size:1.05rem}.controls div{display:contents}.controls dt{margin:0}.controls dd{margin:0;color:var(--ink-2)}.controls .key{display:inline-block;padding:4px 10px 5px;border-radius:8px;font-size:.9rem;font-weight:600;white-space:nowrap;color:color-mix(in srgb,var(--accent) 75%,var(--ink));background:color-mix(in srgb,var(--accent) 12%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 1.5px color-mix(in srgb,var(--accent) 45%,transparent);transition:background .15s ease,color .15s ease,transform .15s ease}.controls .held .key{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 1.5px color-mix(in srgb,var(--accent) 60%,var(--ink))}.controls .held dd{color:var(--ink)}.controls .fired .key{background:#f5c542;border-color:#e0a92a;color:var(--ink);box-shadow:0 1.5px #c9931f;animation:keypress .25s ease-out}.controls .fired dd{color:var(--ink);font-weight:600}@keyframes keypress{0%{transform:translateY(1.5px) scale(.97);box-shadow:none}to{transform:none}}@media (max-width: 900px){.app{grid-template-columns:1fr;grid-template-rows:55vh 1fr;height:auto;min-height:100vh;overflow:auto}.left{height:55vh}.panel{border-left:none;border-top:1px solid var(--line)}}.mirrored{transform:scaleX(-1)}