*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0d0d10;--surface: #16181f;--border: #2a2d38;--accent: #00ff88;--accent2: #ffcc00;--text: #ccd0da;--muted: #5a6070;--danger: #ff5566;--font-mono: "Courier New", Courier, monospace;--radius: 6px}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:13px;line-height:1.5;overflow:hidden}.app-tabs{display:flex;gap:6px;margin:10px 16px 0}.app-tab{flex:1;text-align:center;text-decoration:none;color:var(--muted);border:1px solid var(--border);border-radius:var(--radius);padding:6px 8px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}.app-tab.active{color:var(--bg);background:var(--accent);border-color:var(--accent);font-weight:700}#app{display:flex;height:100vh;overflow:hidden}#canvas-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#000;position:relative;overflow:hidden}#main-canvas{display:block;max-width:100%;max-height:100%;image-rendering:pixelated}#status-msg{position:absolute;top:8px;left:50%;transform:translate(-50%);background:#000000b3;padding:4px 12px;border-radius:20px;color:var(--accent2);font-size:11px;pointer-events:none}#controls{width:260px;min-width:260px;background:var(--surface);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow-y:auto;padding-bottom:16px}.compat-msg{margin:10px 16px 0;padding:8px 10px;border-radius:var(--radius);font-size:10px;line-height:1.5}.compat-msg.ok{background:#0a1a12;border:1px solid #1a3a24;color:var(--accent)}.compat-msg.warn{background:#26190a;border:1px solid #4a2f10;color:var(--accent2)}#controls::-webkit-scrollbar{width:4px}#controls::-webkit-scrollbar-track{background:var(--surface)}#controls::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel-title{padding:14px 16px 10px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border-bottom:1px solid var(--border);flex-shrink:0}.section{padding:12px 16px 6px;border-bottom:1px solid var(--border)}.section-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.toggle-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}.toggle-label{color:var(--text);flex:1}.switch{position:relative;display:inline-block;width:40px;height:22px}.switch input{opacity:0;width:0;height:0}.slider-pill{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--border);border-radius:22px;cursor:pointer;transition:background .2s}.slider-pill:before{content:"";position:absolute;width:16px;height:16px;left:3px;top:3px;background:var(--muted);border-radius:50%;transition:transform .2s,background .2s}.switch input:checked+.slider-pill{background:#1a3a28}.switch input:checked+.slider-pill:before{transform:translate(18px);background:var(--accent)}.ctrl-row{display:grid;grid-template-columns:minmax(64px,80px) minmax(0,1fr) auto;align-items:center;gap:8px;margin-bottom:8px;width:100%}.ctrl-row label{width:auto;min-width:0;color:var(--muted);font-size:11px}.ctrl-row input[type=range]{width:100%;min-width:0;-webkit-appearance:none;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.ctrl-row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;background:var(--accent);border-radius:50%;cursor:pointer;transition:background .15s}.ctrl-row input[type=range]::-webkit-slider-thumb:hover{background:#fff}.ctrl-val{width:58px;min-width:58px;text-align:right;color:#ffe27a;font-size:11px;font-weight:700;background:#ffcc001a;border:1px solid rgba(255,204,0,.35);border-radius:4px;padding:2px 6px;line-height:1.2;justify-self:end}.btn-row{display:flex;gap:8px;margin-top:6px}button{flex:1;padding:6px 4px;background:transparent;border:1px solid var(--border);border-radius:var(--radius);color:var(--text);font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:border-color .15s,color .15s}button:hover{border-color:var(--accent);color:var(--accent)}button.danger:hover{border-color:var(--danger);color:var(--danger)}.cam-info-line{font-size:10px;color:var(--accent);margin-bottom:8px;word-break:break-all;line-height:1.5}.cam-note{font-size:10px;color:var(--muted);line-height:1.6;white-space:pre-line;margin:4px 0}#cam-props .ctrl-row label{width:80px;color:var(--muted);font-size:11px;flex-shrink:0}#cam-props .ctrl-val{width:56px;text-align:right;color:var(--accent2);font-size:10px;flex-shrink:0;white-space:nowrap}.cam-select{flex:1;background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:3px 6px;font-size:11px;font-family:var(--font-mono);cursor:pointer}.cam-select:focus{outline:1px solid var(--accent)}.ws-note{margin:10px 16px 0;padding:8px 10px;background:#0a1a12;border:1px solid #1a3a24;border-radius:var(--radius);font-size:10px;color:var(--muted);line-height:1.6}.ws-note code{color:var(--accent);font-size:10px}#pattern-match{display:none;flex-direction:column;gap:2px;padding:6px 8px;background:#00ff880f;border:1px solid var(--accent);border-radius:var(--radius);margin-top:4px}#pattern-match.visible{display:flex}#pattern-match .match-word{font-family:var(--font-mono);font-size:1rem;font-weight:700;color:var(--accent);letter-spacing:.05em}#pattern-match .match-score{font-size:.72rem;color:var(--muted)}@media (max-width: 900px){html,body{overflow:auto}#app{flex-direction:column;height:100dvh}#canvas-wrap{flex:0 0 46dvh;min-height:320px}#status-msg{max-width:calc(100% - 16px);white-space:normal;text-align:center}#controls{width:100%;min-width:0;border-left:none;border-top:1px solid var(--border);padding-bottom:24px}.panel-title{position:sticky;top:0;z-index:2;background:var(--surface)}.section{padding:12px 12px 6px}.ctrl-row{gap:6px;grid-template-columns:minmax(56px,72px) minmax(0,1fr) auto}.ctrl-row label{width:auto;font-size:10px}.ctrl-val{width:52px;min-width:52px;padding:2px 4px}button{min-height:32px}.ws-note,.compat-msg{margin-left:12px;margin-right:12px}}