:root{--bg-color: #f0f0f0;--sidebar-bg: #ffffff;--text-color: #333333;--border-color: #dddddd;--input-bg: #f9f9f9;--input-border: #cccccc;--accent-color: #007acc;--font-size-title: 1.2rem;--font-size-label: .9rem;--font-size-input: .9rem;--font-size-mono: .8rem;--font-size-instruction: 1rem;--success-color: #28a745}@media (prefers-color-scheme: dark){:root{--bg-color: #121212;--sidebar-bg: #1e1e1e;--text-color: #e0e0e0;--border-color: #333333;--input-bg: #2d2d2d;--input-border: #444444;--accent-color: #3b9deb;--success-color: #2ea043}}*{box-sizing:border-box}body{margin:0;font-family:Roboto,Helvetica,Arial,sans-serif;background-color:var(--bg-color);color:var(--text-color);height:100vh;height:100dvh;overflow:hidden}.app-container{display:flex;height:100%;width:100%}.sidebar{width:230px;background-color:var(--sidebar-bg);border-right:1px solid var(--border-color);padding:15px;display:flex;flex-direction:column;gap:10px;box-shadow:2px 0 5px #0000000d;z-index:10;overflow-y:auto}.sidebar h1{margin:0 0 10px;font-size:var(--font-size-title)}.control-group{display:flex;flex-direction:column;gap:3px}.control-group label{font-size:var(--font-size-label);font-weight:500}#ui-status,#ui-camera{font-size:var(--font-size-mono);font-family:monospace;padding:6px;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:4px;color:var(--text-color)}@keyframes status-rotate{to{background-position:14px 0}}.status-rendering{border:2px solid transparent!important;background:linear-gradient(var(--input-bg),var(--input-bg)) padding-box,repeating-linear-gradient(-45deg,var(--accent-color) 0,var(--accent-color) 5px,transparent 5px,transparent 10px) border-box;background-size:14px 14px;animation:status-rotate .5s linear infinite}.status-finished{border:2px solid var(--success-color)!important;background:var(--input-bg)}.control-group input,.control-group select{padding:4px 6px;border:1px solid var(--input-border);background-color:var(--input-bg);color:var(--text-color);border-radius:4px;font-size:var(--font-size-input);outline:none}.separator{border:none;border-top:1px solid var(--border-color);margin:0;width:100%}.control-group input:focus,.control-group select:focus{border-color:var(--accent-color)}.instructions-wrapper{margin-top:auto;display:flex;flex-direction:column;gap:10px}.instructions{padding:10px;background-color:var(--input-bg);border:1px solid var(--border-color);border-radius:6px;font-size:var(--font-size-instruction);line-height:1.3}.instructions ul{margin:5px 0 0;padding-left:20px}.canvas-container{flex:1;position:relative;display:flex;justify-content:center;align-items:center;background-color:var(--bg-color)}canvas{object-fit:contain;max-width:100%;max-height:100%;touch-action:none}.touch-controls{display:none}@media (pointer: coarse){.touch-controls{display:block}}