html,body{margin:0;width:100%;height:100%}:root{--gold: rgb(212 175 55);--gold-light: rgb(212 175 55 / .15);--gold-hover: rgb(190 155 40);--gold-border: rgb(212 175 55 / .35);--surface: #18181b;--surface-raised: #27272a;--surface-overlay: #303033;--surface-input: #1e1e22;--border: #3f3f46;--border-subtle: #2e2e33;--text: #fafafa;--text-muted: #a1a1aa;--text-dim: #71717a;--radius-sm: 6px;--radius-md: 10px;--radius-lg: 14px;--radius-xl: 18px;--shadow-md: 0 4px 12px rgb(0 0 0 / .35);--transition: .18s ease;color:var(--text);background:var(--surface);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{min-width:320px;background:var(--surface)}button,input,select{font:inherit}button,.text-link{cursor:pointer}.technique-shell{min-height:calc(100vh - 56px);padding:20px}.top-navbar{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:16px;padding:0 24px;height:56px;background:var(--surface-raised);border-bottom:1px solid var(--border);box-shadow:0 2px 10px #00000059}.navbar-brand{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;flex-shrink:0}.navbar-brand .eyebrow{margin:0 0 1px}.navbar-brand h1{margin:0;font-size:1rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}.navbar-presets{flex:1;display:flex;justify-content:center}.navbar-presets .preset-tabs{margin:0}.navbar-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.navbar-link{margin:0;opacity:.7;font-size:.78rem}.navbar-generate-btn{min-height:36px;border:none;border-radius:var(--radius-sm);padding:8px 20px;background:var(--gold);color:#18181b;font-weight:700;font-size:.85rem;cursor:pointer;transition:background var(--transition),transform 80ms ease,opacity var(--transition)}.navbar-generate-btn:hover{background:var(--gold-hover)}.navbar-generate-btn:active:not(:disabled){transform:scale(.97)}.navbar-generate-btn:disabled{cursor:not-allowed;opacity:.4}.workbench{display:grid;grid-template-columns:380px minmax(0,1fr);gap:20px;max-width:1520px;margin:0 auto;align-items:start}.controls{position:sticky;top:76px;border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-md);overflow:hidden;max-height:calc(100vh - 96px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.controls-inner{padding:22px}.brandline{display:none}.eyebrow{margin:0 0 6px;color:var(--gold);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em}h1{margin:0;font-size:1.5rem;line-height:1.15;letter-spacing:-.01em;color:var(--text)}.text-link{display:inline-block;margin-top:10px;color:var(--gold);font-size:.82rem;font-weight:700;text-decoration:none;opacity:.85;transition:opacity var(--transition)}.text-link:hover{opacity:1}.preset-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:18px 0;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:var(--surface-input)}.preset-tab{display:flex;align-items:center;justify-content:center;padding:10px 4px;border:none;border-right:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:.78rem;font-weight:600;cursor:pointer;transition:background var(--transition),color var(--transition)}.preset-tab:last-child{border-right:none}.preset-tab:hover{background:var(--surface-overlay);color:var(--text)}.preset-tab.active{background:var(--gold);color:#18181b;font-weight:700}.section-label{margin:16px 0 10px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.section-divider{border:none;border-top:1px solid var(--border-subtle);margin:14px 0}.control-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:14px 0}.compact-grid{padding-top:0}.field{display:grid;gap:5px;min-width:0}.field-wide{grid-column:1 / -1}.field span,.toggle span{font-size:.75rem;font-weight:600;color:var(--text-muted)}.field input,.field select{width:100%;min-height:38px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-input);color:var(--text);padding:7px 10px;transition:border-color var(--transition),box-shadow var(--transition)}.field input:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px #d4af3733}.toggles{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0}.section-toggles{padding-bottom:14px}.toggle{display:inline-flex;align-items:center;gap:7px;min-height:34px;border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 10px;background:var(--surface-input);transition:border-color var(--transition);cursor:pointer}.toggle:hover{border-color:var(--gold-border)}.toggle input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;background:var(--surface-input);cursor:pointer;transition:background var(--transition),border-color var(--transition);position:relative;flex-shrink:0}.toggle input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}.toggle input[type=checkbox]:checked:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #18181b;border-width:0 2px 2px 0;transform:rotate(45deg)}.toggle input[type=checkbox]:focus-visible{outline:none;box-shadow:0 0 0 3px #d4af3733}.action-row{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--border-subtle)}.action-row button{min-height:38px;border:none;border-radius:var(--radius-sm);padding:8px 16px;font-weight:700;font-size:.85rem;transition:background var(--transition),transform 80ms ease,opacity var(--transition)}.action-row button:last-child{background:var(--gold);color:#18181b}.action-row button:last-child:hover{background:var(--gold-hover)}.action-row button:not(:last-child){background:var(--surface-overlay);color:var(--text-muted);border:1px solid var(--border)}.action-row button:not(:last-child):hover{color:var(--text);border-color:var(--text-dim)}.action-row button:disabled{cursor:not-allowed;opacity:.4}.action-row button:active:not(:disabled){transform:scale(.97)}.score-pane{min-height:calc(100vh - 40px);border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--surface-raised);box-shadow:var(--shadow-md);overflow:hidden}.score-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--border);background:var(--surface);color:var(--text-muted);padding:10px 18px;font-size:.78rem;font-weight:600}.score-toolbar .render-status{display:flex;align-items:center;gap:8px}.score-output{min-height:520px;padding:20px;overflow:auto;background:#fff;transition:opacity .16s ease}.score-output.is-rendering{opacity:.5}.score-output svg{display:block;width:100%;max-width:1120px;height:auto;margin:0 auto}.collection-output{display:grid;gap:4px}.collection-heading{text-align:center}.collection-heading h2{margin:0;font-size:1.35rem;color:#18181b;letter-spacing:-.01em}.collection-score{min-height:0;line-height:0}.collection-score .score-placeholder,.collection-score .inline-error{line-height:1.35}.score-placeholder,.empty-output{min-height:100px;display:grid;place-items:center;border:1px dashed #d4d4d8;border-radius:var(--radius-sm);color:#71717a;font-weight:700;font-size:.85rem;text-align:center;padding:18px;position:relative;overflow:hidden}.score-placeholder:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgb(212 175 55 / .06),transparent);animation:shimmer 1.6s ease infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.render-progress{height:3px;background:var(--border);overflow:hidden}.render-progress-bar{height:100%;background:var(--gold);transition:width .2s ease}.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border);border-top-color:var(--gold);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.error-output{min-height:520px;margin:0;padding:18px;overflow:auto;color:#fca5a5;background:#1c1012;white-space:pre-wrap}.inline-error{min-height:100px;border:1px solid #7f1d1d;border-radius:var(--radius-sm);color:#fca5a5;background:#1c1012}.technique-section{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-input);margin-bottom:8px;overflow:hidden;transition:border-color var(--transition)}.technique-section:hover{border-color:var(--gold-border)}.technique-section.dragging{opacity:.6;border-color:var(--gold)}.technique-section-header{display:flex;align-items:center;gap:10px;padding:10px 12px;cursor:pointer;user-select:none;transition:background var(--transition)}.technique-section-header:hover{background:var(--surface-overlay)}.technique-section-toggle{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--border);border-radius:4px;background:var(--surface-input);cursor:pointer;transition:background var(--transition),border-color var(--transition);position:relative;flex-shrink:0}.technique-section-toggle:checked{background:var(--gold);border-color:var(--gold)}.technique-section-toggle:checked:after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;border:solid #18181b;border-width:0 2px 2px 0;transform:rotate(45deg)}.technique-section-title{flex:1;font-size:.85rem;font-weight:700;color:var(--text)}.technique-section-chevron{width:16px;height:16px;color:var(--text-dim);transition:transform var(--transition);flex-shrink:0}.technique-section-chevron.open{transform:rotate(180deg)}.drag-handle{cursor:grab;color:var(--text-dim);opacity:.5;transition:opacity var(--transition);flex-shrink:0}.drag-handle:hover{opacity:1}.drag-handle:active{cursor:grabbing}.technique-section-body{padding:0 12px 12px;border-top:1px solid var(--border-subtle)}.entry-order-header{display:flex;align-items:center;justify-content:space-between;margin-top:4px}.entry-order-toggle{cursor:pointer;display:inline-flex;align-items:center;gap:6px;user-select:none}.entry-order-list{max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border) transparent;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface-input)}.entry-order-item{display:flex;align-items:center;gap:8px;padding:6px 10px;font-size:.78rem;color:var(--text);cursor:grab;user-select:none;border-bottom:1px solid var(--border-subtle);transition:background var(--transition)}.entry-order-item:last-child{border-bottom:none}.entry-order-item:hover{background:var(--surface-overlay)}.entry-order-item.dragging{opacity:.5;background:var(--surface-overlay)}.entry-order-item:active{cursor:grabbing}.entry-order-index{min-width:22px;text-align:right;color:var(--text-dim);font-size:.72rem;font-variant-numeric:tabular-nums;flex-shrink:0}.entry-order-title{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.key-chips{display:flex;flex-wrap:wrap;gap:5px;padding-top:8px}.key-chip{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text-muted);font-size:.75rem;font-weight:600;cursor:pointer;transition:background var(--transition),border-color var(--transition),color var(--transition);padding:0 8px}.key-chip:hover{border-color:var(--gold-border);color:var(--text)}.key-chip.active{background:var(--gold);border-color:var(--gold);color:#18181b;font-weight:700}.key-chip-actions{display:flex;gap:6px;padding-top:8px}.key-chip-action{font-size:.72rem;font-weight:600;color:var(--gold);background:none;border:none;cursor:pointer;padding:2px 0;opacity:.8;transition:opacity var(--transition)}.key-chip-action:hover{opacity:1}.section-select-row{display:flex;align-items:center;gap:8px;padding-top:8px}.section-select-row label{font-size:.72rem;font-weight:600;color:var(--text-dim);white-space:nowrap}.section-select-row select{flex:1;min-height:30px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);padding:4px 8px;font-size:.78rem}@media (max-width: 920px){.technique-shell{padding:12px}.workbench{grid-template-columns:1fr}.controls{position:static;max-height:none}.score-pane{min-height:560px}}@media (max-width: 560px){h1{font-size:1.25rem}.control-grid{grid-template-columns:1fr}.score-toolbar{flex-direction:column}.preset-tabs{grid-template-columns:repeat(2,1fr)}}@media print{body{background:#fff}.technique-shell{padding:0}.workbench{display:block;max-width:none}.controls,.score-toolbar,.render-progress{display:none}.score-pane{min-height:0;border:0;box-shadow:none;border-radius:0}.score-output{padding:0;overflow:visible}.score-output svg{max-width:none}.collection-output{gap:0}.collection-score,.score-placeholder,.empty-output,.inline-error{min-height:0}}