.dwarf-cam{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.view-row{display:flex;align-items:stretch;gap:1rem;width:100%;justify-content:center}.viewport{position:relative;width:500px;flex-shrink:0;aspect-ratio:4/3;background:linear-gradient(180deg,#1a2520,#0f1412);border-radius:12px;overflow:hidden;border:2px solid var(--accent-dim);box-shadow:0 8px 32px #00000080}.viewport canvas{display:block;width:100%;height:100%;object-fit:contain}.camera-preview{width:500px;flex-shrink:0;display:flex;flex-direction:column;border-radius:12px;overflow:hidden;border:2px solid var(--accent-dim);background:#0f1412;box-shadow:0 8px 32px #00000080}.camera-preview-label{padding:.35rem .6rem;font-size:.8rem;font-weight:600;color:var(--text);opacity:.9;background:#0000004d}.camera-preview-video{flex:1;min-height:120px;object-fit:cover;transform:scaleX(-1)}.camera-preview-placeholder{flex:1;min-height:120px;display:flex;align-items:center;justify-content:center;font-size:.85rem;color:var(--text);opacity:.5}.dwarf-cam-video,.dwarf-cam-canvas{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover}.dwarf-cam-canvas{pointer-events:none}.placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;color:var(--text);opacity:.85}.placeholder .sub{font-size:.9rem;opacity:.75}.dwarf-cam-error{color:#c75c5c;text-align:center;font-size:.95rem}.dwarf-cam-loading{text-align:center;font-size:.95rem;color:var(--text);opacity:.9}.dwarf-cam-hint{font-size:.85rem;opacity:.8;text-align:center}.dwarf-cam-hint code{background:var(--accent-dim);padding:.15rem .4rem;border-radius:4px}.controls{margin-top:.5rem}.btn{font-family:inherit;font-size:1rem;padding:.65rem 1.5rem;border:none;border-radius:8px;cursor:pointer;transition:transform .15s,box-shadow .15s}.btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px #0000004d}.btn-start{background:var(--accent);color:var(--bg-dark)}.btn-start:hover{background:#5a9068}.btn-stop{background:var(--accent-dim);color:var(--text)}.btn-stop:hover{background:#3a5a45}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:1.5rem}.loading-screen,.error-screen{justify-content:center;gap:1.5rem;text-align:center}.loader{width:48px;height:48px;border:3px solid var(--accent-dim);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-screen .hint{font-size:.9rem;opacity:.85}.header{text-align:center;margin-bottom:1.5rem}.header h1{font-size:clamp(1.5rem,4vw,2.2rem);color:var(--gold);letter-spacing:.05em;margin-bottom:.35rem}.header p{font-size:.95rem;opacity:.9}.mode-toggle{display:flex;gap:.5rem;margin-top:.75rem}.btn-mode{font-family:inherit;font-size:.85rem;padding:.4rem .9rem;border:1px solid var(--accent-dim);border-radius:6px;background:transparent;color:var(--text);cursor:pointer}.btn-mode:hover{background:var(--accent-dim)}.btn-mode.active{background:var(--accent);color:var(--bg-dark);border-color:var(--accent)}*{margin:0;padding:0;box-sizing:border-box}:root{--bg-dark: #0f1412;--accent: #4a7c59;--accent-dim: #2d4a35;--text: #e8e4dc;--gold: #c9a227}body{font-family:Cinzel,Georgia,serif;background:var(--bg-dark);color:var(--text);min-height:100vh;overflow-x:hidden}#root{min-height:100vh}