* { box-sizing: border-box; }
html { background: #0b0d0a; color: #f7f8ed; font-family: Arial, Helvetica, sans-serif; }
body { margin: 0; }
.shadow-mode { background: #101113; color: #eee; }
.shadow-mode .scene-button, .shadow-mode .play-panel, .shadow-mode .mode-panel, .shadow-mode .advanced { background: #1b1c1f; border-color: #4c4e53; }
.shadow-mode .scene-button.selected { background: #303236; border-color: #eee; }
.shadow-mode .scene-button canvas { background: #fff; border-radius: 6px; }
.shadow-mode h1 span, .shadow-mode #modeLabel, .shadow-mode #connection, .shadow-mode .scene-button.selected:after { color: #eee; }
.shadow-mode .intro, .shadow-mode #modeHint, .shadow-mode #sceneHint, .shadow-mode .eyebrow { color: #bec0c6; }
.shadow-mode #modeToggle, .shadow-mode .action { background: #e3e3e5; color: #151517; border-color: #a9a9ad; }
.shadow-mode .live-dot { background: #eee; }
button, input, select { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus, a:focus, input:focus, select:focus { outline: 3px solid #e4ffae; outline-offset: 3px; }
button:disabled { cursor: default; opacity: 0.42; }
button, .direction-pad { -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
.shell { max-width: 520px; padding: 20px 20px 28px; margin: 0 auto; }
.topline { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; font-size: 12px; min-height: 26px; }
.topline a { color: #dfe5d4; text-decoration: none; padding: 8px 0; }
#connection { color: #baff6b; font-size: 11px; text-align: right; }
header { margin: 27px 0 22px; }
.eyebrow { font-size: 10px; letter-spacing: 2px; color: #a8b29d; font-weight: bold; margin: 0 0 8px; }
h1 { margin: 0; font-size: 49px; letter-spacing: -2.7px; line-height: 1.08; font-weight: 800; }
h1 span { color: #baff6b; }
.intro { color: #bdc4b5; font-size: 14px; margin: 11px 0 0; }
.mode-panel { padding: 14px; margin-bottom: 20px; border: 1px solid #52603f; border-radius: 14px; background: #182012; }
.mode-panel.demo { border-color: #d6b768; background: #252115; }
.mode-row { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; margin-bottom: 12px; }
#modeLabel { color: #d6ffa7; font-size: 15px; margin: 0 10px 4px 0; }
.demo #modeLabel { color: #ffe898; }
.mode-countdown { color: #fff; font-size: 13px; line-height: 1.6; white-space: nowrap; }
#modeToggle { width: 100%; min-height: 64px; padding: 12px; background: #d0f5aa; color: #14200c; border: 1px solid #a7cf7d; border-bottom: 4px solid #a7cf7d; border-radius: 10px; font-size: 16px; font-weight: bold; }
.demo #modeToggle { background: #ffe898; border-color: #cbb670; }
#modeHint { color: #c4d2b6; font-size: 12px; line-height: 1.5; margin: 10px 0 0; }
.scene-list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px 16px; }
.scene-card { position: relative; width: 33.333%; padding: 4px; }
.scene-button { width: 100%; background: #151a13; border: 1px solid #333b2d; color: #e0e5d9; border-radius: 12px; padding: 6px 3px 10px; min-height: 112px; }
.scene-button.selected { background: #24301c; border: 2px solid #bdff7d; padding: 5px 2px 9px; color: #fff; }
.scene-button.selected:after { content: '\2713'; position: absolute; top: 11px; right: 13px; color: #c5ff84; font-size: 12px; }
.scene-button canvas { width: 74px; height: 74px; display: block; margin: 0 auto 2px; }
.scene-button span { display: block; font-size: 11px; font-weight: bold; }
.play-panel { background: #161c13; border: 1px solid #394430; border-radius: 18px; padding: 19px 18px 12px; }
.scene-heading { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; -webkit-align-items: center; align-items: center; }
.scene-heading .eyebrow { font-size: 9px; letter-spacing: 1.5px; }
h2 { font-size: 26px; letter-spacing: -0.7px; margin: 5px 0 0; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #c4ff81; }
#sceneHint { color: #c3ccba; font-size: 12px; margin: 8px 0 18px; }
.direction-pad { width: 256px; max-width: 100%; height: 256px; position: relative; margin: 6px auto 10px; border: 1px solid #435139; border-radius: 28px; background: #0b1108; touch-action: none; cursor: move; }
.direction-pad.active { border-color: #c7ff8b; }
.direction { position: absolute; width: 80px; height: 80px; border: 1px solid #536044; border-bottom: 4px solid #4b593d; border-radius: 18px; background: #2c3823; color: #edffd7; font-size: 36px; line-height: 1; }
.direction.pressed { background: #c7ff8b; color: #14200c; border-color: #c7ff8b; }
.up { left: 50%; top: 4px; margin-left: -40px; }.left { left: 4px; top: 50%; margin-top: -40px; }.right { right: 4px; top: 50%; margin-top: -40px; }.down { left: 50%; bottom: 4px; margin-left: -40px; }
.pad-center { position: absolute; left: 50%; top: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; border: 2px solid #6e8558; border-radius: 50%; background: #27351e; text-align: center; line-height: 56px; font-size: 28px; color: #d5eabb; pointer-events: none; }
.direction-pad.active .pad-center { background: #c7ff8b; color: #14200c; border-color: #e5ffc5; }
.direction-pad[aria-disabled="true"] .pad-center { opacity: 0.42; }
.direction-pad.horizontal { height: 112px; width: 100%; }
.horizontal .up, .horizontal .down { display: none; }
.pad-hint { color: #c3ccba; text-align: center; font-size: 12px; line-height: 1.4; margin: 0 0 18px; }
.action-list { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin: 0 -4px; }
.action { width: calc(50% - 8px); min-height: 76px; margin: 4px; padding: 12px 5px; border: 1px solid #91be5e; border-bottom: 4px solid #91be5e; border-radius: 12px; background: #c5ff83; color: #17230e; font-size: 15px; font-weight: bold; touch-action: none; }
.action:first-child { background: #ffe898; border-color: #cbb670; }
.action.hold { width: calc(100% - 8px); min-height: 85px; }
.action:only-child { width: calc(100% - 8px); min-height: 85px; }
.choice-label { margin: 0 0 8px; color: #e0e5d9; font-size: 13px; font-weight: bold; }
#choices { margin-bottom: 12px; }
#choices .scene-button canvas { width: 64px; height: 64px; }
#choices .scene-button { min-height: 104px; }
.action .mark { font-size: 23px; vertical-align: middle; margin-right: 7px; }
.action.pressed, .action:active { background: #fff; border-color: #fff; }
.shadow-mode .action:nth-child(2n) { background: #c7c8cc; border-color: #93959b; }
.shadow-mode .direction-pad { background: #111215; border-color: #555860; }
.shadow-mode .direction, .shadow-mode .pad-center { background: #313339; color: #eee; border-color: #6e717a; }
.shadow-mode .direction.pressed, .shadow-mode .direction-pad.active .pad-center { background: #ddd; color: #111; border-color: #eee; }
.feedback { min-height: 16px; text-align: center; font-size: 11px; color: #c3d5b1; margin: 14px 0 1px; }
.advanced-toggle { display: block; width: 100%; text-align: left; padding: 22px 2px; border: 0; background: none; color: #aab69f; font-size: 12px; }
.advanced-toggle span { float: right; font-size: 17px; }
.advanced { background: #151a12; border: 1px solid #37402d; padding: 0 16px 12px; border-radius: 12px; margin-bottom: 20px; }
.setting { display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; padding: 18px 0; border-bottom: 1px solid #353f2c; }
.setting span { -webkit-flex: 1; flex: 1; padding-right: 20px; }.setting strong { font-size: 13px; }.setting small { display: block; color: #b6c0ab; font-size: 11px; line-height: 1.5; margin-top: 5px; }
.setting input { width: 26px; height: 26px; }
.setting.qr-setting { display: block; }
.qr-setting span { display: block; padding-right: 0; }
#qrSize, #style, #flybyDelay { display: block; width: 100%; min-height: 64px; margin-top: 12px; padding: 12px; border: 1px solid #5c6c4d; border-radius: 7px; background: #090e06; color: #fff; font-size: 16px; }
#qrSize:disabled, #style:disabled, #flybyDelay:disabled { opacity: 0.42; }
.small-note { font-size: 11px; line-height: 1.5; color: #b2c09f; }
footer { border-top: 1px solid #30382a; padding-top: 18px; font-size: 10px; color: #99a48e; }footer a { color: #bac8a9; float: right; }
@media (max-width: 360px) { .shell { padding: 12px; } h1 { font-size: 43px; } .scene-button span { font-size: 10px; } .play-panel { padding: 17px 12px 12px; } }
.glow-mode #scenes .scene-card { width: 33.333%; }
.glow-mode h1, .glow-mode #playingLabel, .glow-mode .subtitle { color: #c4efff; }
.glow-mode .scene-button.selected { border-color: #b6eaff; background: #172c39; }
.glow-mode .action { background: #c4efff; color: #10212b; }
.glow-mode h1 span, .glow-mode #modeLabel, .glow-mode #connection, .glow-mode .scene-button.selected:after { color: #c4efff; }
.glow-mode .scene-button, .glow-mode .play-panel, .glow-mode .mode-panel, .glow-mode .advanced { border-color: #3b5262; }
.glow-mode #modeToggle, .glow-mode .action:nth-child(2n) { background: #acd6ed; color: #10212b; border-color: #8cbfd8; }
.glow-mode .live-dot { background: #c4efff; }