:root{--zs-yellow: #ffd200;--zs-black: #23201f;--zs-white: #ffffff;--zs-yellow-600: #e6bd00;--zs-yellow-300: #ffe264;--zs-danger: #d23b3b;--zs-danger-600: #b32f2f;--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:1fr;grid-template-columns:1fr var(--panel-width);grid-template-areas:"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,#a9cdec,#cfe3f1 55%,#e6f1f5)}.stage__canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none}.stage__tools{position:absolute;top:var(--sp-3);right:var(--sp-3);display:flex;gap:var(--sp-2);z-index:4}.iconbtn--sm{--size: 34px;background:var(--surface-panel);box-shadow:var(--shadow-1)}.iconbtn--sm svg{width:17px;height:17px}.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)}.door-delete{position:absolute;z-index:5;width:34px;height:34px;transform:translate(-50%,-120%);display:grid;place-items:center;border:1px solid var(--zs-black);border-radius:var(--radius-pill);background:var(--zs-yellow);color:var(--text-on-yellow);font-size:var(--fs-lg);font-weight:var(--fw-cta);line-height:1;cursor:pointer;box-shadow:var(--shadow-2)}.door-delete[hidden]{display:none}.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);display:flex;align-items:center;gap:var(--sp-2);font-style:italic;font-weight:var(--fw-head);font-size:var(--fs-md);text-transform:none}.section__icon{display:inline-grid;place-items:center;color:var(--text-secondary);flex:none}.section__icon svg{width:20px;height:20px}.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}.doorlist{display:flex;flex-direction:column;gap:6px}.doorrow{display:flex;align-items:center;gap:var(--sp-2);padding:6px 8px;border:1px solid var(--border-soft);border-radius:var(--radius-sm);background:var(--surface-sunk)}.doorrow__name{flex:1;font-style:italic}.doorrow__preset{font:inherit;font-style:italic;padding:2px 4px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-panel);color:var(--text-primary)}.doorrow__remove{appearance:none;border:1px solid var(--border-strong);background:var(--surface-panel);color:var(--text-primary);width:26px;height:26px;border-radius:var(--radius-pill);cursor:pointer;font-size:var(--fs-md);line-height:1}.doorrow__remove:hover{border-color:var(--zs-ink-400)}.doorrow__step{appearance:none;border:1px solid var(--border-strong);background:var(--surface-panel);color:var(--text-primary);width:26px;height:26px;border-radius:var(--radius-sm);cursor:pointer;font-size:var(--fs-md);line-height:1}.doorrow__step:disabled{opacity:.4;cursor:not-allowed}.doorrow__w{min-width:3.5ch;text-align:center;font-style:italic;font-weight:var(--fw-cta)}.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}.length-row{display:flex;gap:var(--sp-4);flex-wrap:wrap}.length-col{flex:1;min-width:130px}.mini-label{font-weight:400;font-size:var(--fs-sm);margin:0 0 6px;color:var(--text-secondary)}.dims-wrap{margin-top:var(--sp-4)}.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)}.footer-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}.btn-clear{appearance:none;border:1px solid var(--zs-danger);background:transparent;color:var(--zs-danger);font:inherit;font-weight:600;font-style:italic;padding:6px 16px;border-radius:var(--radius-pill);cursor:pointer;transition:background .12s ease,color .12s ease}.btn-clear:hover{background:var(--zs-danger);color:var(--zs-white)}.confirm{width:min(360px,100%);background:var(--surface-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-3);padding:var(--sp-5);text-align:center}.confirm__title{margin:0 0 var(--sp-2);font-family:var(--font-brand);font-style:italic;font-size:var(--fs-lg);color:var(--text-primary)}.confirm__msg{margin:0 0 var(--sp-4);color:var(--text-secondary);line-height:1.5}.confirm__actions{display:flex;gap:var(--sp-3);justify-content:center}.confirm__actions button{appearance:none;font:inherit;font-weight:600;padding:9px 18px;border-radius:var(--radius-pill);cursor:pointer}.btn-ghost{border:1px solid var(--border-strong);background:var(--surface-panel);color:var(--text-primary)}.btn-ghost:hover{background:var(--surface-sunk)}.btn-danger{border:1px solid var(--zs-danger);background:var(--zs-danger);color:var(--zs-white)}.btn-danger:hover{background:var(--zs-danger-600)}.login-screen{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:var(--sp-4);background:linear-gradient(180deg,#a9cdec,#cfe3f1 55%,#e6f1f5)}.login-card{width:min(360px,100%);display:grid;gap:var(--sp-3);padding:var(--sp-5);background:var(--surface-panel);border-radius:var(--radius-lg);box-shadow:var(--shadow-3)}.login-card__title{margin:0;font-family:var(--font-brand);font-style:italic;font-size:var(--fs-lg);color:var(--text-primary)}.login-card__sub{margin:0 0 var(--sp-2);color:var(--text-secondary)}.login-field{display:grid;gap:4px;font-size:var(--fs-sm);color:var(--text-secondary)}.login-field input{padding:10px 12px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-panel);color:var(--text-primary);font:inherit}.login-error{margin:0;color:var(--zs-danger);font-size:var(--fs-sm)}.login-btn{appearance:none;border:none;cursor:pointer;padding:12px 16px;border-radius:var(--radius-pill);background:var(--zs-yellow);color:var(--text-on-yellow);font-family:var(--font-brand);font-style:italic;font-weight:var(--fw-cta);font-size:var(--fs-lg);transition:background .12s ease}.login-btn:hover{background:var(--zs-yellow-600)}.login-btn:disabled{opacity:.6;cursor:default}.auth-lock-wrap{position:relative;display:inline-flex}.auth-lock{appearance:none;width:34px;height:34px;border-radius:50%;border:none;background:var(--zs-danger);color:var(--zs-white);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-1);transition:background .12s ease,transform .05s ease}.auth-lock:hover{background:var(--zs-danger-600)}.auth-lock:active{transform:translateY(1px)}.auth-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;display:grid;gap:2px;padding:var(--sp-2);background:var(--surface-panel);border:1px solid var(--border-soft);border-radius:var(--radius-md);box-shadow:var(--shadow-3)}.auth-menu[hidden]{display:none}.auth-menu__who{padding:6px 10px 8px;margin-bottom:2px;color:var(--text-secondary);font-size:var(--fs-sm);border-bottom:1px solid var(--border-soft);word-break:break-all}.auth-menu__item{appearance:none;border:none;background:transparent;color:var(--text-primary);font:inherit;text-align:left;padding:8px 10px;border-radius:var(--radius-sm);cursor:pointer}.auth-menu__item:hover{background:var(--surface-sunk)}.auth-menu__item--out{color:var(--zs-danger)}.auth-menu__item--out:hover{background:var(--zs-danger);color:var(--zs-white)}.users-modal{width:min(460px,100%);text-align:left}.users-list{display:grid;gap:6px;margin:var(--sp-3) 0;max-height:260px;overflow:auto}.users-row{display:flex;align-items:center;gap:var(--sp-2);padding:8px 10px;background:var(--surface-sunk);border-radius:var(--radius-sm)}.users-row__email{flex:1;color:var(--text-primary);word-break:break-all}.users-row__role{text-transform:capitalize;color:var(--text-secondary);font-size:var(--fs-sm)}.users-row__del{appearance:none;border:1px solid var(--border-strong);background:var(--surface-panel);color:var(--zs-danger);font:inherit;font-size:var(--fs-sm);padding:3px 10px;border-radius:var(--radius-pill);cursor:pointer}.users-row__del:disabled{opacity:.4;cursor:default;color:var(--text-secondary)}.users-add__label{margin:var(--sp-2) 0 6px;font-size:var(--fs-sm);color:var(--text-secondary)}.users-add{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}.users-add input,.users-add select{padding:8px 10px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-panel);color:var(--text-primary);font:inherit;min-width:0}.users-add input{flex:1 1 130px}.users-msg{margin:var(--sp-2) 0 0;font-size:var(--fs-sm)}.users-msg--error{color:var(--zs-danger)}.users-msg--ok{color:var(--text-secondary)}.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;border-radius:var(--radius-lg);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:1fr auto;grid-template-areas:"stage" "panel"}.panel{border-left:none;border-top:1px solid var(--border-soft);max-height:50vh}.stage__hint{display:none}.panel__body{padding:0 var(--sp-5) var(--sp-4)}.section{text-align:center}.section__title,.choices,.length-row{justify-content:center}.dims,.doorrow{text-align:left}.cta{font-size:var(--fs-md);padding:13px 16px}.panel__footer{padding:var(--sp-3)}.units{justify-self:center}}