:root{--bg: #101014;--panel: #17171d;--panel-2: #1f1f27;--border: #2b2b35;--text: #eceaf0;--muted: #8f8d99;--accent: #e8c98f;--accent-2: #c9a86a}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:Montserrat,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:14px;background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}.app{display:flex;height:100vh;overflow:hidden}.controls{width:320px;min-width:320px;height:100%;overflow-y:auto;padding:20px 18px 40px;background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;gap:20px}.controls-head{display:flex;align-items:center;justify-content:space-between}.controls h1{font-family:Playfair Display,Georgia,serif;font-size:20px;font-weight:600;margin:0;letter-spacing:.2px}.brand-accent{font-style:italic;color:var(--accent)}.collapse-btn,.panel-reopen{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;cursor:pointer;padding:6px 10px}.panel-reopen{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:30;padding:11px 22px;border-radius:999px;font-weight:600;box-shadow:0 6px 24px #00000073}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.controls section{display:flex;flex-direction:column;gap:10px}.field-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:600}.btn{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;font-size:13px;font-family:inherit;transition:border-color .15s,background .15s,color .15s}.btn:hover:not(:disabled){border-color:var(--accent-2);background:var(--panel-2)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:var(--accent);border-color:var(--accent);color:#171310;font-weight:600}.btn-primary:hover:not(:disabled){filter:brightness(1.06);background:var(--accent)}.words-input,input[type=number]{background:var(--panel-2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:10px;font-size:13px;font-family:inherit;resize:vertical;width:100%}.words-input:focus,input[type=number]:focus{outline:none;border-color:var(--accent-2)}.chips{display:flex;flex-wrap:wrap;gap:8px}.chip{background:var(--panel-2);color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:7px 12px;cursor:pointer;font-size:12.5px;font-family:inherit;transition:background .15s,color .15s,border-color .15s}.chip:hover:not(.on){color:var(--text)}.chip.on{background:var(--accent);border-color:var(--accent);color:#171310;font-weight:600}.checkbox{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}.checkbox input{accent-color:var(--accent)}.grid-size{flex-direction:row;gap:12px}.grid-size>div{flex:1;display:flex;flex-direction:column;gap:6px}hr{border:none;border-top:1px solid var(--border);margin:2px 0}.playback-controls{display:flex;gap:10px}.playback-controls .btn{flex:1}.warn{color:#ffb84d;font-size:12px;margin:0}.hint,.credit{color:var(--muted);font-size:12px;margin:0;line-height:1.5}.credit a{color:var(--accent);text-decoration:none;font-weight:600}.credit a:hover{text-decoration:underline}input[type=range]{width:100%;accent-color:var(--accent)}input[type=color]{width:100%;height:34px;border:1px solid var(--border);border-radius:6px;background:var(--panel-2);cursor:pointer}.stage{flex:1;min-width:0;display:flex;flex-direction:column;padding:16px 20px;gap:12px;background:var(--bg)}.stage-top{display:flex;align-items:center;justify-content:center;flex-shrink:0}.seg{display:flex;background:var(--panel-2);border:1px solid var(--border);border-radius:8px;overflow:hidden;max-width:560px;flex:1}.seg button{flex:1;padding:8px 6px;background:none;border:none;color:var(--muted);font-size:12.5px;font-family:inherit;white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}.seg button.on{background:var(--accent);color:#171310;font-weight:600}.seg button:not(.on):hover{color:var(--text)}.canvas-wrap{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}.stage-canvas{position:relative;overflow:hidden;background:#000;border-radius:10px;box-shadow:0 12px 40px #00000080}.stage-canvas.fill{width:100%;height:100%}.stage-canvas.boxed{max-width:100%;max-height:100%;height:100%}.bg-media{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06)}.bg-darken{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:none}.bg-placeholder{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px}.grid-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;z-index:5;padding:3%}.grid-cell{display:flex;align-items:center;justify-content:center;color:var(--letter-color, #fff);opacity:var(--letter-opacity, .92);font-weight:500;font-size:calc(clamp(10px,1.6vw,22px) * var(--letter-scale, 1));text-shadow:0 1px 3px rgba(0,0,0,.6);-webkit-user-select:none;user-select:none}.stroke-canvas{position:absolute;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.hud-counter{position:absolute;top:18px;right:18px;z-index:20;background:#101014d1;color:var(--accent);font-size:20px;font-weight:600;padding:8px 18px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.drawer-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:45;background:#00000080}.drawer-content{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;flex-direction:column;height:100%;max-height:97%;background:var(--panel);border-top:1px solid var(--border);border-top-left-radius:16px;border-top-right-radius:16px;box-shadow:0 -8px 40px #0000008c;outline:none}.drawer-handle{flex-shrink:0;width:40px;height:5px;margin:10px auto 4px;border-radius:999px;background:var(--border)}.drawer-body.controls{width:100%;min-width:0;height:auto;flex:1;border-right:none;padding-top:4px;padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}@media (max-width: 820px){.app{flex-direction:column}.stage{height:100vh;padding:12px}}