:root,:root[data-theme=dark]{--bg: #0d1722;--panel: #142230;--panel-2: #1d2f40;--text: #e9eef3;--muted: #8fa3b4;--border: #2a3d4f;--accent: #2f8fd6;--accent-ink: #ffffff;--red: #ff5252;--green: #4caf50;--blue: #42a5f5;--yellow: #ffd23f;--radius: 14px;--radius-sm: 10px;--gap: clamp(12px, 2.5vw, 20px);--shadow: 0 6px 24px rgba(0, 0, 0, .4)}:root[data-theme=light]{--bg: #eef2f6;--panel: #ffffff;--panel-2: #f1f5f9;--text: #0c1c2b;--muted: #5a6b7a;--border: #d5dee6;--accent: #00447c;--accent-ink: #ffffff;--shadow: 0 6px 24px rgba(12, 28, 43, .12)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;min-height:var(--app-height, 100svh);background:var(--bg);color:var(--text);font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);overscroll-behavior:none;touch-action:manipulation}.muted{color:var(--muted);font-weight:400}.topbar{position:relative;padding:clamp(16px,4vw,28px) var(--gap) 4px;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;max-width:1100px;margin:0 auto}.topbar__brand{min-width:0}.topbar__title{margin:0;font-size:clamp(1.5rem,6vw,2.2rem);letter-spacing:.5px;display:inline-flex;align-items:center;gap:.4em}.topbar__mark{color:var(--accent)}.topbar__sub{margin:4px 0 0;color:var(--muted);font-size:.9rem}.layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:var(--gap);max-width:1100px;margin:0 auto}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:clamp(14px,3vw,22px)}@media(min-width:780px){.layout{grid-template-columns:minmax(300px,360px) minmax(0,1fr);grid-template-areas:"controls diagram" "history  diagram";align-items:start}.controls{grid-area:controls}.diagram{grid-area:diagram;position:sticky;top:var(--gap)}.history{grid-area:history}}.form{display:grid;gap:16px}.field-group{border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px 14px;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.field-group legend{padding:0 6px;font-weight:600;font-size:.95rem;color:var(--accent)}.field{display:grid;gap:6px;min-width:0}.field label{font-size:.8rem;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}input[type=number],select{width:100%;min-width:0;padding:12px 14px;font-size:1.05rem;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm);-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}input[type=number]:focus,select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa0a6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;padding-right:40px}.actions{display:grid;grid-template-columns:2fr 1fr;gap:10px}.btn{min-width:0;min-height:44px;padding:14px 16px;font-size:1rem;font-weight:600;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;transition:transform .05s,filter .15s,background .15s;-webkit-tap-highlight-color:transparent}.btn:active{transform:translateY(1px)}.btn--primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}.btn--primary:hover{filter:brightness(1.05)}.btn--ghost:hover{background:var(--border)}.btn--tiny{min-height:0;padding:6px 10px;font-size:.8rem}.toggle{display:flex;align-items:center;gap:10px;font-size:.95rem;cursor:pointer;padding:6px 2px}.toggle[hidden]{display:none}.toggle input{width:22px;height:22px;accent-color:var(--accent)}.result{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;margin-bottom:var(--gap);background:var(--panel-2);border:1px solid var(--border);border-radius:var(--radius-sm)}.result__main{display:flex;flex-direction:column;gap:2px;min-width:0}.result__toggle{display:inline-flex;align-items:center;gap:8px;flex:none;font-size:.85rem;color:var(--muted);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent}.result__toggle input{width:20px;height:20px;accent-color:var(--accent)}.result__label{font-size:.75rem;text-transform:uppercase;letter-spacing:.6px;color:var(--muted)}.result__value{font-size:clamp(1.2rem,4vw,1.5rem);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.canvas-wrap{position:relative;width:min(100%,60svh);max-width:560px;margin:0 auto;aspect-ratio:1 / 1;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}#display{display:block;width:100%;height:100%;touch-action:none}.legend{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;margin:12px 0 0;padding:0;font-size:.82rem;color:var(--muted)}.legend[hidden]{display:none}.legend li{display:inline-flex;align-items:center;gap:6px}.dot{width:12px;height:12px;border-radius:50%;display:inline-block}.dot--red{background:var(--red)}.dot--green{background:var(--green)}.dot--blue{background:var(--blue)}.dot--yellow{background:var(--yellow)}.history__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.history__head h2{margin:0;font-size:1.05rem}.history__list{display:grid;gap:10px;max-height:min(60svh,520px);overflow-y:auto;overscroll-behavior:contain;padding-right:2px}.history__empty{color:var(--muted);margin:8px 2px;font-size:.9rem}.calc{border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;background:var(--panel-2)}.calc__head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:color-mix(in srgb,var(--panel-2) 70%,var(--bg));border-bottom:1px solid var(--border)}.calc__name{font-weight:600;cursor:text;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calc__name-input{flex:1;padding:4px 8px;font:inherit;border-radius:6px;border:1px solid var(--accent);background:var(--panel);color:var(--text)}.calc__del{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:1.1rem;line-height:1;padding:6px 8px;border-radius:6px}.calc__del:hover{color:var(--red);background:#ff52521f}.calc__body{margin:0;padding:10px;display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:6px 12px;cursor:pointer}.calc__body:hover{background:var(--border)}.calc__pair{display:flex;flex-direction:column}.calc__pair dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)}.calc__pair dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}.calc__meta{grid-column:1 / -1;font-size:.72rem;color:var(--muted);border-top:1px dashed var(--border);padding-top:6px;margin-top:2px}.langbar{position:relative;z-index:30;flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.lang-wrap{position:relative}.theme-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;background:var(--panel);border:1px solid var(--border);border-radius:999px;color:var(--muted);cursor:pointer;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent}.theme-toggle:hover{border-color:var(--accent)}.theme-ic{width:15px;height:15px;flex:none}.theme-switch{position:relative;width:38px;height:20px;border-radius:999px;background:var(--panel-2);border:1px solid var(--border);flex:none}.theme-switch__thumb{position:absolute;top:1px;left:1px;width:16px;height:16px;border-radius:50%;background:var(--accent);transition:transform .18s ease}:root[data-theme=light] .theme-switch__thumb{transform:translate(18px)}.flag{display:inline-block;width:22px;height:15px;border-radius:3px;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px #0003;background:var(--panel-2)}.flag svg{display:block;width:100%;height:100%}.lang-pill{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;background:var(--panel);border:1px solid var(--border);border-radius:999px;color:var(--text);cursor:pointer;font:inherit;box-shadow:var(--shadow);-webkit-tap-highlight-color:transparent}.lang-pill:hover{border-color:var(--accent)}.lang-pill__code{font-size:.85rem;font-weight:700;letter-spacing:.5px}.lang-pill__chev{width:16px;height:16px;color:var(--muted)}.lang-menu{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:50;width:min(300px,calc(100vw - 2 * var(--gap)));max-height:min(60svh,460px);overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;display:grid;gap:2px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.lang-menu::-webkit-scrollbar{width:10px}.lang-menu::-webkit-scrollbar-track{background:transparent}.lang-menu::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2px solid var(--panel)}.lang-menu::-webkit-scrollbar-thumb:hover{background:var(--muted)}.lang-menu[hidden]{display:none}.lang-item{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:8px 10px;border:none;border-radius:8px;background:transparent;color:var(--text);font:inherit;text-align:start;cursor:pointer}.lang-item:hover{background:var(--panel-2)}.lang-item[aria-selected=true]{background:color-mix(in srgb,var(--accent) 18%,transparent);outline:1px solid var(--accent)}.lang-item__code{font-size:.72rem;font-weight:700;color:var(--muted);width:26px;flex:none}.lang-item__name{display:flex;flex-direction:column;line-height:1.2;min-width:0}.lang-item__name small{color:var(--muted);font-size:.75rem}.collapse{border:0;margin:0;padding:0}.collapse>summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}.collapse>summary::-webkit-details-marker{display:none}.collapse__head{display:flex;align-items:center;gap:10px;min-height:44px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-2);font-weight:600;user-select:none}.collapse[open]>.collapse__head{border-bottom-left-radius:0;border-bottom-right-radius:0}.collapse__chev{width:18px;height:18px;flex:none;color:var(--muted);transition:transform .15s ease}.collapse[open]>.collapse__head .collapse__chev{transform:rotate(90deg)}.collapse__body{border:1px solid var(--border);border-top:none;border-bottom-left-radius:var(--radius-sm);border-bottom-right-radius:var(--radius-sm)}.field-group--flush{border-radius:0 0 var(--radius-sm) var(--radius-sm);margin:0}.history .collapse__head h2{margin:0;font-size:1.05rem;flex:1}.history__list.collapse__body{padding:12px}.tabs{display:flex;gap:8px;max-width:1100px;margin:0 auto;padding:4px var(--gap) 0}.tab{flex:0 1 auto;min-height:44px;padding:10px 16px;font:inherit;font-weight:600;color:var(--muted);background:transparent;border:1px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;-webkit-tap-highlight-color:transparent}.tab:hover{color:var(--text)}.tab--active{color:var(--accent);background:var(--panel);border-color:var(--border);border-bottom-color:transparent}.vlayout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:var(--gap);max-width:1100px;margin:0 auto}@media(min-width:880px){.vlayout{grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start}}.vs-h{margin:0 0 10px;font-size:1rem;color:var(--accent)}.vs-controls .field{margin-top:14px}.vs-rx{width:100%;border-collapse:collapse;font-size:.85rem}.vs-rx th{color:var(--muted);font-weight:600;text-align:center;padding:2px}.vs-rx tbody th{text-align:start;width:2.2em;color:var(--text)}.vs-rx td{padding:2px}.vs-rx input{width:100%;min-width:0;padding:8px 6px;font-size:.95rem;text-align:center;color:var(--text);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;-webkit-appearance:none;appearance:none}.vs-rx input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}input[type=range]{width:100%;accent-color:var(--accent);touch-action:pan-y}.vs-sub{margin:10px 0 6px;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted)}.vs-samples{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.vs-samples .btn[disabled]{opacity:.5;cursor:progress}.vs-drop{display:flex;align-items:center;justify-content:center;min-height:64px;padding:12px;text-align:center;font-size:.85rem;color:var(--muted);border:1px dashed var(--border);border-radius:var(--radius-sm);cursor:pointer}.vs-drop--over{border-color:var(--accent);color:var(--accent)}.vs-stage{position:relative;width:100%;overflow:hidden;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg);touch-action:pan-y}.vs-stage canvas{display:block;width:100%;height:auto}.vs-original{position:absolute;inset:0;clip-path:inset(0 50% 0 0)}.vs-divider{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:var(--accent);cursor:ew-resize;touch-action:none}.vs-divider:after{content:"";position:absolute;top:50%;left:50%;width:28px;height:28px;transform:translate(-50%,-50%);border-radius:50%;background:var(--accent);box-shadow:0 2px 8px #00000059}.vs-tag{position:absolute;top:8px;padding:3px 8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;color:#fff;background:#0000008c;border-radius:999px;pointer-events:none}.vs-tag--l{inset-inline-start:8px}.vs-tag--r{inset-inline-end:8px}.vs-compare{display:flex;align-items:center;gap:12px;margin:12px 0}.vs-compare[hidden]{display:none}.vs-compare input[type=range]{flex:1}.vs-readout{margin-top:6px}.vs-table{width:100%;border-collapse:collapse;font-size:.82rem}.vs-table th,.vs-table td{padding:6px 8px;text-align:start;border-bottom:1px solid var(--border)}.vs-table thead th{color:var(--muted);font-weight:600;font-size:.72rem;text-transform:uppercase;letter-spacing:.4px}.vs-table tbody th{color:var(--accent);font-weight:700}.vs-table b{font-variant-numeric:tabular-nums}.vs-note,.vs-meta{margin:8px 0 0;font-size:.78rem;color:var(--muted)}.ec-list{display:grid;gap:8px;max-height:min(52svh,520px);overflow-y:auto;overscroll-behavior:contain;padding-right:4px;margin-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--border) transparent}.ec-list::-webkit-scrollbar{width:10px}.ec-list::-webkit-scrollbar-track{background:transparent}.ec-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2px solid var(--panel)}.ec-card{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-2);padding:10px 12px;cursor:pointer}.ec-card--on{border-color:var(--accent)}.ec-card__head{display:flex;align-items:center;gap:9px;min-height:44px;cursor:pointer}.ec-card__head input{width:20px;height:20px;accent-color:var(--accent);flex:none}.ec-icon{font-size:1.05rem;flex:none}.ec-name{font-weight:600;font-size:.92rem}.ec-summary{margin:6px 0 0;font-size:.78rem;line-height:1.35;color:var(--muted)}.ec-controls{display:grid;gap:6px;margin-top:10px}.ec-field{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted)}.ec-controls select{padding:8px 10px;font-size:.9rem;background:var(--panel)}.ec-explain{margin-top:12px;padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--panel-2);font-size:.85rem;line-height:1.5}.ec-explain__title{margin:0 0 8px;font-size:.98rem;color:var(--accent)}.ec-explain p{margin:0 0 8px}.ec-explain p:last-child{margin-bottom:0}.ec-explain b{color:var(--text)}.ec-disclaimer{margin:10px 0 0;font-size:.72rem;font-style:italic;color:var(--muted);border-top:1px dashed var(--border);padding-top:8px}.subtabs{display:flex;flex-wrap:wrap;gap:6px;max-width:1100px;margin:0 auto;padding:var(--gap) var(--gap) 0}.subtab{min-height:44px;padding:8px 14px;font:inherit;font-size:.9rem;font-weight:600;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent}.subtab:hover{color:var(--text)}.subtab--active{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}.simsec{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gap);padding:var(--gap);max-width:1100px;margin:0 auto}@media(min-width:880px){.simsec{grid-template-columns:minmax(300px,360px) minmax(0,1fr);align-items:start}}.simsec__list .ec-card{cursor:pointer}.simsec__controls{display:grid;gap:6px;margin-top:14px}.simsec__controls select{padding:8px 10px;font-size:.9rem;background:var(--panel)}.simsec__math{margin-top:12px}.simsec__mathbody{padding:12px 14px;font-size:.82rem;line-height:1.5}.simsec__mathbody p{margin:0 0 8px}.simsec__mathbody p:last-child{margin-bottom:0}.app-footer{max-width:1100px;margin:0 auto;padding:var(--gap) var(--gap) calc(var(--gap) * 2)}.app-footer p{margin:0;font-size:.74rem;font-style:italic;color:var(--muted);border-top:1px dashed var(--border);padding-top:10px}:root.theme-switching,:root.theme-switching *,:root.theme-switching *:before,:root.theme-switching *:after{transition:none!important}@media(prefers-reduced-motion:reduce){*{transition:none!important}}