:root{--bg-primary:#000;--bg-secondary:#0a0a0f;--bg-tertiary:#14141f;--bg-card:#1a1a2e;--text-primary:#fff;--text-secondary:#a0a0b0;--text-muted:#606070;--accent-primary:#00d4ff;--accent-secondary:#0f8;--accent-warm:#ff9f43;--danger:#f46;--focus-ring:#00d4ff;--focus-glow:#00d4ff66;--success:#0f8;--warning:#fa0;--info:#00b4d8;--radius-sm:8px;--radius-md:12px;--radius-lg:16px}*{box-sizing:border-box;margin:0;padding:0}html,body{width:600px;height:600px;overflow:hidden}body{background:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}#app{width:100%;height:100%;position:relative}.screen{flex-direction:column;width:100%;height:100%;display:flex;position:absolute;top:0;left:0}.screen.hidden{display:none}.header{background:var(--bg-secondary);flex-shrink:0;align-items:center;gap:12px;padding:16px 20px;display:flex}.header h1{flex:1;font-size:22px;font-weight:600}.header-meta{color:var(--text-secondary);font-size:13px}.back-btn{color:var(--text-primary);border-radius:var(--radius-sm);background:0 0;border:2px solid #0000;padding:8px 12px;font-size:22px}.content{flex-direction:column;flex:1;gap:12px;padding:16px 20px;display:flex;overflow-y:auto}.focusable{cursor:pointer;border:2px solid #0000;min-height:44px;transition:all .15s}.focusable:focus{border-color:var(--focus-ring);box-shadow:0 0 20px var(--focus-glow);outline:none}.nav-bar{background:var(--bg-secondary);flex-shrink:0;gap:8px;padding:12px 20px;display:flex}.nav-item{background:var(--bg-tertiary);border-radius:var(--radius-md);color:var(--text-primary);text-align:center;flex:1;justify-content:center;align-items:center;gap:8px;padding:14px 16px;font-size:15px;font-weight:500;display:flex}.nav-item:focus{background:var(--bg-card)}.nav-item.primary{background:var(--accent-primary);color:#0a0a0f}.nav-item.primary:focus{background:#3df}.card{background:var(--bg-card);border-radius:var(--radius-md);border:2px solid #0000;padding:16px}.card:focus{border-color:var(--focus-ring);box-shadow:0 0 20px var(--focus-glow)}.card-title{margin-bottom:6px;font-size:18px;font-weight:600}.card-subtitle{color:var(--text-secondary);font-size:14px}.hero{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;display:flex}.hero h1{letter-spacing:-.02em;font-size:44px;font-weight:700}.hero .tagline{color:var(--text-secondary);font-size:16px}.video-content{justify-content:flex-end;padding:16px 20px}.video-frame{aspect-ratio:16/9;border-radius:var(--radius-md);background:var(--bg-secondary);width:100%;position:relative;overflow:hidden}.video-frame iframe{border:0;width:100%;height:100%;display:block}.video-controls{border-radius:var(--radius-md);z-index:10;background:#0a0a0fbf;gap:12px;padding:8px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.ctrl-btn{background:var(--bg-tertiary);color:var(--text-primary);border-radius:var(--radius-md);align-items:center;gap:6px;padding:10px 18px;font-size:15px;font-weight:600;display:flex}.ctrl-btn:focus{background:var(--bg-card)}.video-chrome{transition:opacity .4s}#video.chrome-hidden .video-chrome{opacity:0;pointer-events:none}.app-grid{grid-template-columns:1fr 1fr;gap:12px;display:grid}.tile{background:var(--bg-card);color:var(--text-primary);border-radius:var(--radius-lg);flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:24px 12px;display:flex}.tile-icon{font-size:32px;line-height:1}.tile-label{font-size:16px;font-weight:600}.input-current{color:var(--text-primary);text-align:center;word-break:break-word;min-height:24px;font-size:18px}.input-section{flex-direction:column;gap:8px;display:flex}.input-label{text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);font-size:12px;font-weight:600}.text-input{background:var(--bg-tertiary);width:100%;color:var(--text-primary);border-radius:var(--radius-md);border:2px solid #0000;padding:12px 14px;font-size:16px}.text-input:focus{border-color:var(--focus-ring);box-shadow:0 0 20px var(--focus-glow);outline:none}.text-input::placeholder{color:var(--text-muted)}.keyboard{grid-template-columns:repeat(7,1fr);gap:6px;display:grid}.key{background:var(--bg-tertiary);color:var(--text-primary);border-radius:var(--radius-sm);text-align:center;padding:10px 0;font-size:15px;font-weight:600}.key:focus{background:var(--bg-card)}.snake-content{justify-content:center;align-items:center}.snake-canvas{background:var(--bg-secondary);border-radius:var(--radius-md);width:480px;max-width:100%;height:480px}.snake-hint{color:var(--text-muted);text-align:center;margin-top:12px;font-size:13px}.header-btn{background:var(--bg-tertiary);color:var(--text-primary);border-radius:var(--radius-sm);border:2px solid #0000;padding:8px 12px;font-size:13px;font-weight:600}.log-list{color:var(--text-secondary);flex-direction:column;gap:2px;height:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;line-height:1.4;display:flex;overflow-y:auto}.log-line{white-space:pre-wrap;word-break:break-word;border-bottom:1px solid #ffffff0a;padding:2px 0}.loading-container{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:16px;padding:40px;display:flex}.loading-spinner{border:4px solid var(--bg-tertiary);border-top-color:var(--accent-primary);border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--text-secondary);font-size:16px}.error-container{text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex}.error-icon{font-size:48px}.error-message{color:var(--text-secondary);max-width:400px;font-size:16px}.toast{background:var(--bg-card);color:var(--text-primary);border-radius:var(--radius-md);border:1px solid var(--accent-primary);z-index:100;pointer-events:none;padding:12px 24px;font-size:14px;transition:transform .3s;position:fixed;bottom:80px;left:50%;transform:translate(-50%)translateY(100px)}.toast.visible{transform:translate(-50%)translateY(0)}.toast.error{border-color:var(--danger)}.toast.success{border-color:var(--success)}.hidden{display:none!important}.text-center{text-align:center}.text-accent{color:var(--accent-primary)}.text-muted{color:var(--text-secondary)}.mt-auto{margin-top:auto}