:root{--zs-yellow: #ffd200;--zs-black: #23201f;--zs-white: #ffffff;--zs-yellow-600: #e6bd00;--zs-yellow-300: #ffe264;--zs-ink-900: #23201f;--zs-ink-800: #322f2d;--zs-ink-700: #45413f;--zs-ink-500: #6f6a67;--zs-ink-400: #938d89;--zs-ink-300: #c4bfbb;--zs-ink-200: #e4e0dc;--zs-ink-100: #f2efec;--zs-ink-050: #faf8f6;--zs-olive: #4b573c;--zs-sand: #d9b65a;--surface-app: var(--zs-ink-050);--surface-panel: var(--zs-white);--surface-bar: var(--zs-white);--surface-sunk: var(--zs-ink-100);--border-soft: var(--zs-ink-200);--border-strong: var(--zs-ink-300);--text-primary: var(--zs-ink-900);--text-secondary: var(--zs-ink-500);--text-on-dark: var(--zs-white);--text-on-yellow: var(--zs-black);--accent: var(--zs-yellow);--accent-ink: var(--zs-black);--focus-ring: color-mix(in srgb, var(--zs-yellow) 70%, var(--zs-black));--font-brand: "Kanit", "Helvetica Neue", Arial, sans-serif;--font-body: "Kanit", "Helvetica Neue", Arial, sans-serif;--fw-body: 300;--fw-subhead: 400;--fw-head: 600;--fw-cta: 600;--fs-xs: .6875rem;--fs-sm: .8125rem;--fs-md: .9375rem;--fs-lg: 1.125rem;--fs-xl: 1.5rem;--sp-1: 4px;--sp-2: 8px;--sp-3: 12px;--sp-4: 16px;--sp-5: 24px;--sp-6: 32px;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px;--radius-pill: 999px;--shadow-1: 0 1px 2px rgba(35, 32, 31, .08), 0 1px 3px rgba(35, 32, 31, .06);--shadow-2: 0 4px 14px rgba(35, 32, 31, .1);--shadow-3: 0 10px 30px rgba(35, 32, 31, .16);--slash: 10px;--bar-height: 64px;--panel-width: 360px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{font-family:var(--font-body);font-weight:var(--fw-body);color:var(--text-primary);background:var(--surface-app);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden}.app{display:grid;grid-template-rows:var(--bar-height) 1fr;grid-template-columns:1fr var(--panel-width);grid-template-areas:"bar bar" "stage panel";height:100vh;width:100vw}.toolbar{grid-area:bar;display:flex;align-items:center;gap:var(--sp-4);padding:0 var(--sp-4);background:var(--surface-bar);border-bottom:1px solid var(--border-soft);z-index:5}.toolbar__brand{display:flex;align-items:center;gap:var(--sp-3);font-weight:var(--fw-head);font-style:italic;font-size:var(--fs-lg);letter-spacing:.2px}.toolbar__logo{height:30px;width:auto;display:block}.toolbar__sub{font-weight:400;font-style:italic;font-size:var(--fs-md);color:var(--text-secondary);padding-left:var(--sp-3);border-left:1px solid var(--border-soft)}.toolbar__doc{color:var(--text-secondary);font-style:italic;font-weight:var(--fw-subhead)}.toolbar__spacer{flex:1}.toolbar__tools{display:flex;gap:var(--sp-2)}.iconbtn{--size: 40px;width:var(--size);height:var(--size);display:inline-grid;place-items:center;border-radius:var(--radius-pill);border:1px solid var(--border-soft);background:var(--surface-sunk);color:var(--text-primary);cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .05s ease}.iconbtn:hover{background:var(--zs-ink-200)}.iconbtn:active{transform:translateY(1px)}.iconbtn[aria-pressed=true]{background:var(--zs-black);color:var(--zs-white);border-color:var(--zs-black)}.iconbtn svg{width:20px;height:20px}.stage{grid-area:stage;position:relative;overflow:hidden;background:linear-gradient(180deg,#bcdcf5,#d9ecf8 55%,#e9f3f7)}.stage__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.stage__zoom{position:absolute;left:50%;bottom:var(--sp-5);transform:translate(-50%);display:flex;align-items:center;gap:var(--sp-2);padding:6px 10px;background:var(--surface-panel);border:1px solid var(--border-soft);border-radius:var(--radius-pill);box-shadow:var(--shadow-2);font-weight:var(--fw-subhead);font-style:italic}.stage__zoom button{border:none;background:transparent;font-size:var(--fs-lg);cursor:pointer;width:28px;height:28px;border-radius:var(--radius-pill);color:var(--text-primary)}.stage__zoom button:hover{background:var(--surface-sunk)}.stage__webgl-fallback{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:var(--sp-6);color:var(--text-secondary)}.panel{grid-area:panel;display:grid;grid-template-rows:auto auto 1fr auto;background:var(--surface-panel);border-left:1px solid var(--border-soft);min-height:0}.panel__tabs{display:flex;gap:var(--sp-1);padding:var(--sp-3) var(--sp-3) 0}.tab{flex:1;height:42px;display:grid;place-items:center;border-radius:var(--radius-sm);border:1px solid transparent;background:transparent;color:var(--text-secondary);cursor:pointer}.tab:hover{background:var(--surface-sunk)}.tab[aria-selected=true]{background:var(--surface-sunk);border-color:var(--border-soft);color:var(--text-primary)}.tab svg{width:22px;height:22px}.panel__search{padding:var(--sp-3)}.panel__search input{width:100%;height:40px;padding:0 var(--sp-3);border-radius:var(--radius-pill);border:1px solid var(--border-soft);background:var(--surface-sunk);font:inherit;color:inherit}.panel__body{overflow-y:auto;padding:0 var(--sp-4) var(--sp-4);min-height:0}.section{padding:var(--sp-4) 0;border-top:1px solid var(--border-soft)}.section:first-child{border-top:none}.section__title{margin:0 0 var(--sp-3);font-style:italic;font-weight:var(--fw-head);font-size:var(--fs-md);text-transform:none}.choices{display:flex;flex-wrap:wrap;gap:var(--sp-2)}.chip{appearance:none;border:1px solid var(--border-strong);background:var(--surface-panel);color:var(--text-primary);padding:8px 12px;border-radius:var(--radius-sm);font:inherit;font-style:italic;cursor:pointer;transition:border-color .12s ease,background .12s ease,box-shadow .12s ease}.chip:hover{border-color:var(--zs-ink-400)}.chip[aria-pressed=true]{border-color:var(--zs-black);background:var(--zs-yellow);color:var(--text-on-yellow);box-shadow:inset 0 0 0 1px var(--zs-black);font-weight:var(--fw-cta)}.chip:disabled{opacity:.4;cursor:not-allowed}.stepper{display:inline-flex;align-items:center;gap:var(--sp-3)}.stepper button{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border-strong);background:var(--surface-panel);font-size:var(--fs-lg);cursor:pointer}.stepper button:hover{background:var(--surface-sunk)}.stepper output{min-width:2.5ch;text-align:center;font-weight:var(--fw-cta);font-style:italic}.toggle{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0}.switch{position:relative;width:46px;height:26px;border-radius:var(--radius-pill);background:var(--zs-ink-300);border:none;cursor:pointer;transition:background .15s ease;flex:none}.switch:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:var(--radius-pill);background:var(--zs-white);box-shadow:var(--shadow-1);transition:transform .15s ease}.switch[aria-checked=true]{background:var(--zs-black)}.switch[aria-checked=true]:after{transform:translate(20px)}.dims{display:grid;gap:var(--sp-1);padding:var(--sp-3);background:var(--surface-sunk);border-radius:var(--radius-md);font-style:italic}.dims__row{display:flex;justify-content:space-between;gap:var(--sp-3)}.dims__row--total{font-weight:var(--fw-cta);border-top:1px dashed var(--border-strong);padding-top:var(--sp-2);margin-top:var(--sp-1)}.dims__code{color:var(--text-secondary);font-size:var(--fs-sm)}.panel__footer{padding:var(--sp-4);border-top:1px solid var(--border-soft);display:grid;gap:var(--sp-3)}.units{display:inline-flex;border:1px solid var(--border-strong);border-radius:var(--radius-pill);overflow:hidden;justify-self:start;font-style:italic}.units button{border:none;background:transparent;padding:6px 14px;cursor:pointer;font:inherit;font-style:italic}.units button[aria-pressed=true]{background:var(--zs-black);color:var(--zs-white)}.cta{appearance:none;border:none;cursor:pointer;width:100%;padding:16px 20px;background:var(--zs-yellow);color:var(--text-on-yellow);font-family:var(--font-brand);font-weight:var(--fw-cta);font-style:italic;font-size:var(--fs-lg);letter-spacing:.2px;clip-path:polygon(var(--slash) 0,100% 0,100% calc(100% - var(--slash)),calc(100% - var(--slash)) 100%,0 100%,0 var(--slash));transition:background .12s ease,transform .05s ease}.cta:hover{background:var(--zs-yellow-600)}.cta:active{transform:translateY(1px)}:where(button,input,[tabindex]):focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}.modal-overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:var(--sp-4);background:#23201f8c;backdrop-filter:blur(2px)}.modal{width:min(560px,100%);max-height:92vh;overflow:auto;background:var(--surface-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}.modal__head{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--zs-black);color:var(--zs-white)}.modal__title{margin:0;font-style:italic;font-weight:var(--fw-head);font-size:var(--fs-lg)}.modal__close{border:none;background:transparent;color:var(--zs-white);font-size:var(--fs-lg);cursor:pointer;width:36px;height:36px;border-radius:var(--radius-pill)}.modal__close:hover{background:#ffffff1f}.modal__body{padding:var(--sp-5);display:grid;gap:var(--sp-4)}.modal__snap{border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border-soft);background:var(--surface-sunk)}.modal__snap img{display:block;width:100%;height:auto}.modal__summary{font-style:italic;font-size:var(--fs-sm);line-height:1.5;padding:var(--sp-3);background:var(--surface-sunk);border-left:4px solid var(--zs-yellow);border-radius:var(--radius-sm);white-space:pre-wrap}.modal__hint{margin:0 0 var(--sp-3);color:var(--text-secondary);font-style:italic;font-size:var(--fs-sm)}@media (max-width: 760px){.app{grid-template-columns:1fr;grid-template-rows:var(--bar-height) 1fr auto;grid-template-areas:"bar" "stage" "panel"}.panel{border-left:none;border-top:1px solid var(--border-soft);max-height:46vh}}