.simulation-app{--sim-bg: #080c14;--sim-panel: #111827;--sim-panel-soft: #1b2535;--sim-border: #2b3749;--sim-text: #e2e8f0;--sim-muted: #9aa8bb;--sim-accent: #38bdf8;width:100%;margin:0 auto;padding:.8rem;color:var(--sim-text);font-family:Inter,system-ui,sans-serif;line-height:1.4;box-sizing:border-box}.simulation-app *,.simulation-app *:before,.simulation-app *:after{box-sizing:border-box}.simulation-app [hidden]{display:none!important}.simulation-app{display:flex;flex-direction:column;gap:1rem}.simulation-app #canvasContainer{order:1;position:relative;width:100%;height:min(72vh,720px);min-height:500px;overflow:hidden;background:var(--sim-bg);border:1px solid var(--sim-border);border-radius:14px;box-shadow:0 16px 40px #00000047}.simulation-app #simCanvas{display:block;width:100%;height:100%}.simulation-app #opticsControls{order:2;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:start;gap:1rem;width:100%;height:auto;max-height:none;padding:1.25rem;overflow:visible;background:var(--sim-panel);border:1px solid var(--sim-border);border-radius:14px;box-shadow:0 12px 32px #00000038}.simulation-app .controls-heading{grid-column:1 / -1;padding-bottom:.9rem;border-bottom:1px solid var(--sim-border)}.simulation-app .title-row,.simulation-app .color-row,.simulation-app .control-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}.simulation-app .title-row{justify-content:flex-start;gap:.6rem}.simulation-app .title-indicator{width:.65rem;height:.65rem;flex:0 0 auto;border-radius:50%;background:var(--sim-accent);box-shadow:0 0 12px #38bdf88c}.simulation-app .controls-heading h1{margin:0;color:#f1f5f9;font-size:.95rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.simulation-app .controls-heading p{margin:.3rem 0 0 1.25rem;color:var(--sim-muted);font-size:.8rem}.simulation-app .control-group{display:flex;min-width:0;flex-direction:column;gap:.45rem}.simulation-app .control-group>label,.simulation-app .color-row>label{color:#cbd5e1;font-size:.78rem;font-weight:650;letter-spacing:.045em;text-transform:uppercase}.simulation-app .control-row label{color:#cbd5e1;font-size:.82rem}.simulation-app .control-value{color:#7dd3fc;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem;font-weight:700;white-space:nowrap}.simulation-app .control-help{color:var(--sim-muted);font-size:.75rem}.simulation-app select{width:100%;min-height:2.6rem;padding:.6rem .75rem;color:var(--sim-text);background:var(--sim-panel-soft);border:1px solid var(--sim-border);border-radius:8px;font:inherit;font-size:.82rem}.simulation-app option{color:var(--sim-text);background:var(--sim-panel)}.simulation-app input[type=range]{width:100%;height:1rem;margin:.1rem 0;accent-color:var(--sim-accent);cursor:pointer}.simulation-app :is(button,select,input):focus-visible{outline:2px solid var(--sim-accent);outline-offset:2px}.simulation-app .action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}.simulation-app .action-button{display:inline-flex;min-height:2.5rem;align-items:center;justify-content:center;gap:.4rem;padding:.5rem;color:#e2e8f0;background:var(--sim-panel-soft);border:1px solid #43516a;border-radius:8px;font:inherit;font-size:.78rem;font-weight:650;cursor:pointer;transition:background-color .14s ease,border-color .14s ease}.simulation-app .action-button:hover{background:#28364b;border-color:#64748b}.simulation-app .focus-button{color:#a7f3d0;background:#10b98121;border-color:#10b98161}.simulation-app .brewster-button{color:#c7d2fe;background:#6366f129;border-color:#818cf861}.simulation-app .critical-button{color:#fde68a;background:#f59e0b26;border-color:#f59e0b61}.simulation-app .color-row{min-height:2rem}.simulation-app .color-options{display:flex;gap:.6rem}.simulation-app .color-btn{width:1.45rem;height:1.45rem;padding:0;border:2px solid transparent;border-radius:50%;cursor:pointer;opacity:.55;transition:opacity .14s ease,transform .14s ease,border-color .14s ease}.simulation-app .color-btn:hover{opacity:.85}.simulation-app .color-btn.selected-color{border-color:#f8fafc;opacity:1;transform:scale(1.08)}.simulation-app .color-btn[data-color=red]{background:#ef4444}.simulation-app .color-btn[data-color=green]{background:#10b981}.simulation-app .color-btn[data-color=blue]{background:#3b82f6}@media(max-width:767px){.simulation-app #canvasContainer{height:500px;min-height:0}.simulation-app #opticsControls{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}}@media(max-width:420px){.simulation-app #opticsControls{grid-template-columns:1fr}}