/* ══════════════════════════════════════════════════════════
   sign-studio.css — סטודיו השלט (js/06k2, 06k3, 06k6–06k8)
   מוקאפ מאושר: שלטים לדלת/mockup/studio.html (אופציית "וואו", יוסי 19/10/26)
   בהיר בלבד · Assistant · עברית RTL · מגע = אפקטים קלים
   ══════════════════════════════════════════════════════════ */
#dsim{--ink:#1d1d1f;--mut:#626269;--mut2:#6e6e73;--line:#e8e8ed;--fill:#f2f2f4;--sel:#0071e3;--gold:#b08a3e;--goldS:#f7f1e3;--ease:cubic-bezier(.22,.8,.24,1);
  position:fixed;inset:0;z-index:9600;background:rgba(245,242,235,.65);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;align-items:center;justify-content:center;padding:14px;
  font-family:Assistant,Heebo,sans-serif;font-weight:800;color:var(--ink);-webkit-font-smoothing:antialiased}
#dsim *{box-sizing:border-box}
#dsim button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;padding:0}
#dsim button:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4.5px rgba(0,113,227,.55)}
#dsim .dsw-win{position:relative;width:min(1320px,100%);height:min(860px,100%);background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 30px 80px rgba(0,0,0,.16);display:flex;flex-direction:column;overflow:hidden}
#dsim .dsw-win>*{transition:opacity .18s}
#dsim .dsw-win.swap .dsw-canvas{opacity:.35}
/* toolbar */
#dsim .dsw-tb{height:60px;flex:none;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line)}
#dsim .dsw-ttl{display:flex;flex-direction:column;line-height:1.15;margin-inline-end:8px;min-width:0}
#dsim .dsw-ttl b{font-size:17px;font-weight:900;white-space:nowrap}
#dsim .dsw-ttl small{font-size:12px;font-weight:800;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dsim .dsw-sp{flex:1}
#dsim .dsw-sep{width:1px;height:20px;background:var(--line);margin:0 2px}
#dsim .dsw-ib{width:44px;height:44px;flex:none;border-radius:50%;display:grid;place-items:center;color:var(--ink);transition:background .2s,opacity .2s}
#dsim .dsw-ib:hover{background:var(--fill)}
#dsim .dsw-ib[disabled]{opacity:.3;cursor:default}
#dsim .dsw-ib.on{background:var(--sel);color:#fff}
#dsim .dsw-close{color:var(--gold);margin-inline-start:4px}
#dsim .dsw-ib svg{width:20px;height:20px}
#dsim .dsw-ib.flip svg{transform:scaleX(-1)}
#dsim .dsw-btn{min-height:44px;font-weight:800;font-size:15px;border-radius:999px;padding:9px 22px;transition:transform .15s,background .2s,opacity .2s;white-space:nowrap}
#dsim .dsw-btn:active{transform:scale(.97)}
#dsim .dsw-btn.pri{background:var(--ink);color:#fff}
#dsim .dsw-btn.pri.done{background:#1f8f4e}
#dsim .dsw-btn.sec{background:var(--fill)}
#dsim .dsw-btn.sec:hover{background:#e9e9ec}
#dsim .dsw-btn.txt{color:var(--mut);padding:9px 12px}
#dsim .dsw-btn.txt:hover{color:var(--ink)}
#dsim .dsw-btn.danger{background:#fff0ef;color:#d70015}
#dsim .dsw-btn[disabled]{opacity:.35;pointer-events:none}
#dsim .dsw-btn.nudge{animation:dswNudge 1.4s var(--ease) 2}
@keyframes dswNudge{0%,100%{box-shadow:0 0 0 0 rgba(0,113,227,0)}40%{box-shadow:0 0 0 6px rgba(0,113,227,.28)}}
#dsim .dsw-seg{display:inline-flex;background:var(--fill);border-radius:10px;padding:3px;gap:2px}
#dsim .dsw-seg button{min-height:44px;font-weight:800;font-size:14px;padding:6px 14px;border-radius:8px;white-space:nowrap;transition:background .2s,box-shadow .2s}
#dsim .dsw-seg button.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
/* body */
#dsim .dsw-body{flex:1;display:flex;min-height:0;position:relative}
#dsim .dsw-insp{width:360px;flex:none;border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0;background:#fbfbfd}
#dsim .dsw-itabs{display:flex;margin:12px 14px 0;flex:none}
#dsim .dsw-itabs button{flex:1}
#dsim .dsw-scroll{flex:1;overflow:auto;overscroll-behavior:contain;min-height:0}
#dsim .dsw-sec{padding:14px 14px 4px}
#dsim .dsw-sec>h2{font-size:13px;font-weight:900;color:var(--mut);margin:0 4px 8px;display:flex;align-items:baseline;gap:6px}
#dsim .dsw-sec>h2 small{font-weight:800;color:var(--mut2);font-size:12px}
#dsim .dsw-sec>h2 .dsw-surp{margin-inline-start:auto}
#dsim .dsw-div{height:1px;background:var(--line);margin:6px 14px 0}
#dsim .dsw-foot{flex:none;padding:10px 14px 12px;border-top:1px solid var(--line);background:#fbfbfd}
#dsim .dsw-foot .dsw-btn{width:100%}
/* name + model */
#dsim .dsw-namebox{position:relative}
#dsim input.dsw-in{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font:inherit;font-size:1.05rem;font-weight:800;background:#fff;color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
#dsim input.dsw-in:focus{border-color:var(--sel);box-shadow:0 0 0 3px rgba(0,113,227,.15)}
#dsim input.dsw-in.bad{border-color:#d70015;background:#fff6f5}
#dsim input#dsim-name{font-size:1.3rem;padding:13px 14px;padding-inline-end:56px}
#dsim .dsw-count{position:absolute;inset-inline-end:14px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--mut2)}
#dsim .dsw-msg{font-size:13px;color:#d70015;margin:6px 4px 0}
#dsim .dsw-msg:empty{display:none}
#dsim .dsw-row{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
#dsim .dsw-chip{min-height:44px;border-radius:999px;padding:7px 14px;font-size:14px;font-weight:800;background:#fff;box-shadow:0 0 0 1px var(--line)}
#dsim .dsw-chip.on{background:var(--sel);color:#fff;box-shadow:none}
#dsim .dsw-note{font-size:12.5px;color:var(--mut);margin:6px 4px 0}
#dsim .dsw-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#dsim .dsim-card{border-radius:14px;padding:8px 6px 6px;background:#fff;box-shadow:0 0 0 1px var(--line);display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;cursor:pointer;transition:box-shadow .2s,transform .15s}
#dsim .dsim-card:hover{box-shadow:0 0 0 1px #d2d2d7,0 4px 12px rgba(0,0,0,.06)}
#dsim .dsim-card.on{box-shadow:0 0 0 2px var(--sel),0 6px 16px rgba(0,113,227,.1)}
#dsim .dsim-card svg{width:100%;height:58px;overflow:visible}
#dsim .dsim-card span{font-size:12.5px;font-weight:800;color:var(--mut)}
#dsim .dsim-card.on span{color:var(--sel)}
#dsim .dsim-card .ph{height:58px;width:100%;border-radius:10px;background:linear-gradient(90deg,#f2f2f4,#fafafa,#f2f2f4);background-size:200% 100%;animation:dswSh 1.2s infinite linear}
#dsim .dsim-card .miss{height:58px;display:flex;align-items:center;font-size:12px;color:#d70015;text-align:center}
@keyframes dswSh{to{background-position:-200% 0}}
#dsim .dsim-fac{background:#f7f5ff;border-radius:16px;margin:10px 14px;padding:12px;box-shadow:0 0 0 1px #e4def7}
#dsim .dsim-fac h3{margin:0 0 6px;font-size:14px;font-weight:800}
#dsim .dsim-fac label{display:grid;grid-template-columns:104px 1fr 42px;gap:8px;align-items:center;font-size:13px;margin-top:6px}
#dsim .dsim-fac input[type=range]{width:100%}
#dsim .dsim-fac .dsim-none{font-size:12px;color:var(--mut);margin-top:8px}
#dsim .dsim-fac .alts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#dsim .dsim-fac .alts button{background:#fff;border-radius:8px;padding:2px;height:46px;min-width:40px;box-shadow:0 0 0 1px #ddd5f3}
#dsim .dsim-fac .alts button.on{box-shadow:0 0 0 2px #6b4fd0}
#dsim .dsim-fac .alts svg{height:40px;width:40px}
#dsim .dsim-fac .dsim-chip{margin-top:10px;border-radius:999px;padding:6px 12px;font-size:13px;background:#fff;box-shadow:0 0 0 1px #ddd5f3}
/* looks */
#dsim .dsw-looks{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px 2px 8px;mask-image:linear-gradient(to left,#000 88%,transparent);-webkit-mask-image:linear-gradient(to left,#000 88%,transparent)}
#dsim .dsw-looks::-webkit-scrollbar{display:none}
#dsim .dsw-lk{flex:none;width:100px;scroll-snap-align:start;background:#fff;border-radius:14px;padding:6px;text-align:center;font-weight:800;font-size:12.5px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s,transform .15s}
#dsim .dsw-lk:hover{box-shadow:0 0 0 1px #d2d2d7,0 4px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
#dsim .dsw-lk.on{box-shadow:0 0 0 2px var(--sel)}
#dsim .dsw-lk .pv{height:42px;display:grid;place-items:center;margin-bottom:4px}
#dsim .dsw-lk .pv svg{max-height:40px;max-width:100%;overflow:visible}
#dsim .dsw-surp{background:var(--goldS);color:#8a6a2a;font-weight:800;font-size:12px;border-radius:999px;padding:3px 10px}
#dsim .dsw-surp:hover{background:#f0e6cd}
#dsim .dsw-surp.spin{animation:dswPop .5s var(--ease)}
#dsim .lkst.own{color:var(--sel)}
/* parts + materials */
#dsim .dsw-parts{display:grid;grid-template-columns:repeat(var(--np,3),minmax(0,1fr));gap:6px;margin-bottom:10px}
#dsim .dsw-pt{position:relative;background:#fff;border-radius:14px;padding:6px 4px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 0 0 1px var(--line);min-width:0;transition:box-shadow .2s,transform .15s}
#dsim .dsw-pt:hover{box-shadow:0 0 0 1px #d2d2d7,0 4px 12px rgba(0,0,0,.06)}
#dsim .dsw-pt.hov{box-shadow:0 0 0 1.5px rgba(0,113,227,.45)}
#dsim .dsw-pt.on{box-shadow:0 0 0 2px var(--sel),0 6px 16px rgba(0,113,227,.12)}
#dsim .dsw-pt .th{width:100%;height:34px;display:grid;place-items:center;background:var(--fill);border-radius:8px;padding:3px}
#dsim .dsw-pt .th.lt{background:#d9d6cf}
#dsim .dsw-pt .th svg{max-width:100%;max-height:28px;overflow:visible}
#dsim .dsw-pt b{font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#dsim .dsw-pt small{display:none}
#dsim .dsw-pt .n{position:absolute;top:4px;right:6px;font-size:10px;font-weight:800;color:var(--mut2)}
#dsim .dsw-pt.on .n{color:var(--sel)}
#dsim .dsw-mcard{background:#fff;border-radius:16px;box-shadow:0 0 0 1px var(--line),0 8px 24px rgba(0,0,0,.05);padding:10px 10px 4px}
#dsim .dsw-mcard.in{animation:dswFade .3s ease}
#dsim .dsw-mh{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 4px 4px}
#dsim .dsw-mh b{font-size:15px;font-weight:800;white-space:nowrap}
#dsim .dsw-mh small{font-size:12.5px;font-weight:800;color:var(--mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dsim .dsw-mh small.pvd{color:var(--sel)}
#dsim .dsw-lowc{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:2px 2px 8px;padding:7px 10px;border-radius:10px;background:#fff6e5;color:#8a5a00;font-size:12.5px;font-weight:800;animation:dswFade .3s ease}
#dsim .dsw-lowc button{background:#8a5a00;color:#fff;font-weight:800;font-size:12px;border-radius:999px;padding:4px 10px;white-space:nowrap}
#dsim .dsw-fam{display:flex;align-items:flex-start;gap:6px;padding:7px 0 5px;border-top:1px solid var(--line)}
#dsim .dsw-fam:first-of-type{border-top:0}
#dsim .dsw-fam .fl{width:32px;flex:none;font-size:12px;font-weight:800;color:var(--mut2);padding-top:11px}
#dsim .dsw-famsw{flex:1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
#dsim .dsw-mat{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:800;color:#5c5c61;line-height:1.15;text-align:center}
#dsim .dsw-mat .o{width:40px;height:40px;border-radius:50%;position:relative;display:block;transition:transform .18s var(--ease),box-shadow .18s}
#dsim .dsw-mat .o svg,#dsim .dsw-cur svg,#dsim .dsw-sl .o svg,#dsim .dsw-qm .o svg{width:100%;height:100%;display:block;overflow:visible}
#dsim .dsw-mat:hover .o{transform:scale(1.08)}
#dsim .dsw-mat.on{color:var(--ink)}
#dsim .dsw-mat.on .o{box-shadow:0 0 0 2.5px #fff,0 0 0 4.5px var(--sel)}
#dsim .dsw-mat:focus-visible{box-shadow:none}
#dsim .dsw-mat:focus-visible .o{box-shadow:0 0 0 2.5px #fff,0 0 0 5px rgba(0,113,227,.55)}
#dsim .dsw-mat.rec .o::after{content:'מומלץ';position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--sel);color:#fff;font-size:9px;font-weight:800;padding:1px 6px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.2)}
#dsim .dsw-mat.in{animation:dswMatIn .35s var(--ease) both}
@keyframes dswMatIn{from{opacity:0;transform:translateY(6px)}}
#dsim .dsw-empty{font-size:13.5px;color:var(--mut);text-align:center;padding:24px 10px}
/* guide */
#dsim .dsw-gd{padding:14px 16px 0}
#dsim .dsw-gd .top{display:flex;align-items:center;justify-content:space-between}
#dsim .dsw-gd .step{font-size:13px;font-weight:800;color:var(--mut)}
#dsim .dsw-dots{display:flex;gap:5px;margin:10px 0 14px}
#dsim .dsw-dots .dsw-dot{flex:1;display:flex;padding:4px 0}
#dsim .dsw-dots i{flex:1;height:6px;border-radius:3px;background:var(--line);transition:background .3s}
#dsim .dsw-dots i.on{background:#3a3a3c}
#dsim .dsw-dots i.cur{background:var(--sel)}
#dsim .dsw-gd h3{margin:0;font-size:22px;font-weight:800;animation:dswFade .35s ease}
#dsim .dsw-gd p{margin:4px 0 12px;color:var(--mut);font-size:14.5px}
#dsim .dsw-gnav{display:flex;gap:8px;padding:10px 14px 12px;border-top:1px solid var(--line);flex:none}
#dsim .dsw-gnav .dsw-btn{flex:1;padding:9px 10px}
/* canvas */
#dsim .dsw-canvas{flex:1;position:relative;overflow:hidden;container-type:size;background:radial-gradient(60% 55% at var(--mx,50%) var(--my,40%),#fff 0%,rgba(255,255,255,0) 60%),radial-gradient(120% 90% at 50% 45%,#fbf9f4 0%,#ece8df 70%,#e2ddd1 100%);--dw:min(56cqw,420px)}
#dsim .dsw-floor{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(transparent,rgba(255,255,255,.55));pointer-events:none}
#dsim .dsw-s3{position:absolute;inset:0 0 64px;display:grid;place-items:center;perspective:1700px}
#dsim .dsw-rf{position:relative;width:calc(min(600px,80%) * var(--z,1));max-width:calc((100cqh - 150px) * var(--ar,2.5) * var(--z,1));-webkit-box-reflect:below 6px linear-gradient(transparent 62%,rgba(0,0,0,.14));transition:width .8s var(--ease),margin .8s var(--ease)}
#dsim .dsw-stack{position:relative;width:100%;transform-style:preserve-3d;transition:transform 1s var(--ease)}
#dsim .dsw-stack:not(.open){animation:dswBob 5s ease-in-out infinite}
@keyframes dswBob{50%{translate:0 -6px}}
#dsim .dsw-pane{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s var(--ease),opacity .35s;pointer-events:none}
#dsim .dsw-pane:first-child{position:relative}
#dsim .dsw-pane svg{width:100%;height:100%;display:block;overflow:visible}
#dsim .dsw-pane path[data-layer]{pointer-events:visiblePainted;cursor:pointer}
#dsim .dsw-stack:not(.open) .dsw-pane:first-child svg{filter:drop-shadow(0 14px 18px rgba(40,30,10,.14))}
#dsim .dsw-stack.open .dsw-pane svg{filter:drop-shadow(0 10px 16px rgba(40,30,10,.12))}
#dsim .dsw-pane.dim{opacity:.3}
#dsim .dsw-pane.pick svg{filter:drop-shadow(0 0 1.5px var(--sel)) drop-shadow(0 0 1.5px var(--sel)) drop-shadow(0 8px 14px rgba(40,30,10,.18))!important}
#dsim .dsw-pane.flash svg{animation:dswPop .55s var(--ease)}
#dsim .dsw-pane.ping svg{animation:dswPing .7s var(--ease)}
#dsim .dsw-pane .ex{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s}
#dsim .dsw-pane .ex svg{filter:none!important}
#dsim .dsw-stack.open .dsw-pane .ex{opacity:1}
@keyframes dswPop{0%{transform:none}35%{transform:translateY(-8px) scale(1.02);filter:brightness(1.08) drop-shadow(0 14px 14px rgba(40,30,10,.2))}100%{transform:none}}
@keyframes dswPing{35%{filter:drop-shadow(0 0 6px rgba(0,113,227,.7)) drop-shadow(0 0 2px rgba(0,113,227,.9))}}
@keyframes dswFade{from{opacity:0}}
#dsim .dsw-glint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.75) 50%,transparent 65%);transform:translateX(-120%);mix-blend-mode:soft-light}
#dsim .dsw-glint.run{animation:dswGlint 1.1s var(--ease)}
@keyframes dswGlint{to{transform:translateX(120%)}}
#dsim .dsw-hint{position:absolute;top:14px;left:50%;transform:translateX(-50%);font-size:13px;font-weight:800;color:var(--mut);background:rgba(255,255,255,.75);backdrop-filter:blur(12px);padding:6px 14px;border-radius:999px;white-space:nowrap;transition:opacity .3s;pointer-events:none;max-width:92%;overflow:hidden;text-overflow:ellipsis;z-index:3}
#dsim .dsw-hint.gone{opacity:0}
#dsim .dsw-hint.pvm{background:var(--sel);color:#fff;opacity:1}
#dsim .dsw-hint.err{background:#fff0ef;color:#d70015;opacity:1}
#dsim .dsw-cap{position:absolute;bottom:72px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,.88);border-radius:999px;padding:6px 14px;font-size:13px;font-weight:800;color:var(--mut);white-space:nowrap;box-shadow:0 2px 10px rgba(0,0,0,.06)}
#dsim .dsw-canvas.busy::before{content:'';position:absolute;inset:0 0 auto 0;height:3px;z-index:4;background:linear-gradient(90deg,transparent,var(--sel),transparent);background-size:200% 100%;animation:dswSh 1s infinite linear}
#dsim .dsw-canvas.stale .dsw-s3{opacity:.4;filter:grayscale(.5)}
#dsim .dsw-canvas.sample .dsw-s3{opacity:.6}
#dsim .dsw-vbar{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;z-index:3}
#dsim .dsw-vbar .dsw-seg{background:rgba(255,255,255,.82);backdrop-filter:blur(16px);box-shadow:0 4px 18px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.06)}
#dsim .dsw-vbar .dsw-seg button.on{background:var(--ink);color:#fff;box-shadow:none}
#dsim .dsw-doors{display:none;gap:6px;background:rgba(255,255,255,.82);backdrop-filter:blur(16px);padding:5px;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.08)}
#dsim .dsw-canvas.ondoor .dsw-doors{display:flex}
#dsim .dsw-dsw{width:26px;height:26px;border-radius:7px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
#dsim .dsw-dsw.white{background:#f4f2ec}
#dsim .dsw-dsw.oak{background:repeating-linear-gradient(90deg,#8b5d38 0 2px,#a0714a 2px 5px)}
#dsim .dsw-dsw.grey{background:#74787d}
#dsim .dsw-dsw.night{display:grid;place-items:center;font-size:15px;background:#2b2f3a;color:#f4d27a}
#dsim .dsw-dsw.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sel)}
#dsim .dsw-labs{position:absolute;inset:0;pointer-events:none;transition:opacity .2s}
#dsim .dsw-canvas.turning .dsw-labs{opacity:0}
#dsim .dsw-lab{position:absolute;pointer-events:auto;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.88);backdrop-filter:blur(14px);border-radius:999px;padding:5px 6px 5px 14px;font-size:13.5px;font-weight:800;box-shadow:0 4px 14px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.06);opacity:0;transform:translateX(10px);transition:opacity .35s,transform .35s var(--ease)}
#dsim .dsw-lab.in{opacity:1;transform:none}
#dsim .dsw-lab .n{width:22px;height:22px;border-radius:50%;background:var(--fill);font-size:12px;display:grid;place-items:center;flex:none}
#dsim .dsw-lab .o{width:22px;height:22px;flex:none;display:block}
#dsim .dsw-lab .o svg{width:100%;height:100%;display:block}
#dsim .dsw-lab.sel{box-shadow:0 0 0 2px var(--sel),0 4px 14px rgba(0,0,0,.1)}
#dsim .dsw-lab.sel .n{background:var(--sel);color:#fff}
#dsim .dsw-lab::after{content:'';position:absolute;left:100%;top:50%;width:var(--lead,0px);border-top:1.5px dashed rgba(0,0,0,.18)}
#dsim .dsw-zbar{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.85);border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:800;box-shadow:0 2px 10px rgba(0,0,0,.08);opacity:0;pointer-events:none;transition:opacity .2s;z-index:3}
#dsim .dsw-zbar:not(.on){visibility:hidden}
#dsim .dsw-zbar.on{opacity:1;pointer-events:auto}
#dsim .dsw-zbar span{color:var(--sel)}
#dsim .dsw-canvas.open:not(.ondoor),#dsim .dsw-canvas.zoomed{cursor:grab;touch-action:none}
#dsim .dsw-canvas.turning{cursor:grabbing}
#dsim .dsw-canvas.turning .dsw-stack{transition:none!important}
#dsim .dsw-canvas.zoomed .dsw-rf{-webkit-box-reflect:unset}
#dsim .dsw-canvas.zoomed .dsw-stack{animation:none}
/* door */
/* Original photographic scene; .dsw-door is the calibrated 85 × 210 cm leaf. */
#dsim .dsw-door{position:absolute;top:4cqh;left:50%;width:var(--dw);height:calc(var(--dw) * 2.4706);transform:translateX(-50%);opacity:0;pointer-events:none;transition:opacity .6s,transform .7s var(--ease)}
#dsim .dsw-canvas.ondoor .dsw-door{opacity:1}
#dsim .dsw-door-photo{position:absolute;left:-39.6%;top:-6.1%;width:177%;height:116.2%;max-width:none;display:block;object-fit:fill}
#dsim .dsw-canvas.ondoor::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7%;background:linear-gradient(#f7f5f0,#e9e5dd);box-shadow:0 -1px 0 rgba(0,0,0,.06),inset 0 1px 0 #fff;pointer-events:none}
#dsim .dsw-canvas.ondoor .dsw-s3{align-items:start}
#dsim .dsw-canvas.ondoor .dsw-rf{width:calc(var(--dw) * var(--sf,.22));max-width:none;margin-top:calc(100cqh * .27);-webkit-box-reflect:unset}
#dsim .dsw-canvas.ondoor .dsw-stack{animation:none}
#dsim .dsw-canvas.ondoor .dsw-floor,#dsim .dsw-canvas.ondoor .dsw-labs,#dsim .dsw-canvas.ondoor .dsw-hint{opacity:0}
#dsim .dsw-canvas.ondoor .dsw-door,#dsim .dsw-canvas.ondoor .dsw-s3{transition:transform .7s var(--ease),opacity .6s}
#dsim .dsw-canvas.ondoor.dclose .dsw-door{transform:translateX(-50%) scale(1.7);transform-origin:50% 22%}
#dsim .dsw-canvas.ondoor.dclose .dsw-s3{transform:scale(1.7);transform-origin:50% 22%}
#dsim .dsw-ruler{position:absolute;left:0;right:0;top:calc(100% + 10px);text-align:center;font-size:11.5px;font-weight:800;color:rgba(0,0,0,.45);opacity:0;transition:opacity .4s;pointer-events:none;border-top:1px solid rgba(0,0,0,.25);padding-top:3px;white-space:nowrap}
#dsim .dsw-ruler::before,#dsim .dsw-ruler::after{content:'';position:absolute;top:-5px;width:1px;height:9px;background:currentColor}
#dsim .dsw-ruler::before{left:0}#dsim .dsw-ruler::after{right:0}
#dsim .dsw-canvas.ondoor .dsw-ruler{opacity:1}
#dsim .dsw-canvas.ondoor[data-door="oak"] .dsw-ruler,#dsim .dsw-canvas.ondoor[data-door="grey"] .dsw-ruler,#dsim .dsw-canvas.ondoor.night .dsw-ruler{color:rgba(255,255,255,.88);border-color:rgba(255,255,255,.6);text-shadow:0 1px 2px rgba(0,0,0,.4)}
#dsim .dsw-canvas.ondoor.night{background:radial-gradient(55% 45% at 50% 16%,rgba(255,205,130,.38),transparent 72%),linear-gradient(#7d7062,#5c5246)}
#dsim .dsw-canvas.ondoor.night .dsw-door{filter:brightness(.82) sepia(.22)}
#dsim .dsw-canvas.ondoor.night .dsw-rf{filter:drop-shadow(0 0 22px rgba(255,190,100,.35)) sepia(.08)}
#dsim .dsw-canvas.ondoor.night::after{background:linear-gradient(#5a5248,#3d3731)}
/* quick materials on the sign */
#dsim .dsw-qpop{position:absolute;z-index:35;background:rgba(255,255,255,.92);backdrop-filter:blur(20px);border-radius:16px;padding:8px 10px 10px;box-shadow:0 16px 40px rgba(0,0,0,.16),0 0 0 .5px rgba(0,0,0,.08);opacity:0;transform:translateY(6px) scale(.97);transition:opacity .18s,transform .25s var(--ease)}
#dsim .dsw-qpop.on{opacity:1;transform:none}
#dsim .dsw-qpop::before{content:'';position:absolute;top:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:rgba(255,255,255,.92)}
#dsim .dsw-qpop b{display:block;font-size:12.5px;font-weight:800;color:var(--mut);margin:0 4px 6px}
#dsim .dsw-qrow{display:flex;gap:5px}
#dsim .dsw-qm{width:30px;height:30px;border-radius:50%;transition:transform .15s}
#dsim .dsw-qm:hover{transform:scale(1.15)}
#dsim .dsw-qm .o{display:block;width:30px;height:30px}
#dsim .dsw-qm.on{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--sel)}
/* sheets */
#dsim .dsw-sheet{position:absolute;inset:0;z-index:40;background:rgba(245,245,247,.55);backdrop-filter:blur(14px);display:grid;place-items:center;opacity:0;transition:opacity .3s}
#dsim .dsw-sheet.on{opacity:1}
#dsim .dsw-card{max-height:calc(100% - 24px);overflow:auto;overscroll-behavior:contain;width:min(400px,calc(100% - 32px));background:#fff;border-radius:22px;padding:22px 22px 18px;box-shadow:0 30px 80px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);transform:translateY(14px) scale(.98);transition:transform .45s var(--ease)}
#dsim .dsw-card .dsw-btns{position:sticky;bottom:-18px;padding-block:10px 4px;background:#fff;z-index:1}
#dsim .dsw-sheet.on .dsw-card{transform:none}
#dsim .dsw-card.small{width:min(340px,calc(100% - 32px));text-align:center}
#dsim .dsw-card h3{margin:0;font-size:21px;font-weight:900}
#dsim .dsw-card>p{margin:2px 0 12px;color:var(--mut);font-size:14px}
#dsim .dsw-card.small>p{margin:6px 0 18px}
#dsim .dsw-pvbox{height:120px;display:grid;place-items:center;background:radial-gradient(closest-side,#fdfcf9,#f1eee8);border-radius:16px;margin-bottom:14px}
#dsim .dsw-pvbox svg{max-height:96px;max-width:86%;overflow:visible}
#dsim .dsw-list{list-style:none;margin:0 0 16px;padding:0;border-top:1px solid var(--line);max-height:30vh;overflow:auto}
#dsim .dsw-list li{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);font-size:14.5px}
#dsim .dsw-list li b{flex:1;font-weight:800}
#dsim .dsw-list li span:last-child{color:var(--mut);font-weight:800}
#dsim .dsw-list .sn{width:18px;height:18px;border-radius:50%;background:var(--fill);font-size:10.5px;font-weight:800;display:grid;place-items:center;color:var(--mut);flex:none}
#dsim .dsw-list .o{width:22px;height:22px;flex:none;display:block}
#dsim .dsw-list kbd{font-family:inherit;font-size:13px;font-weight:800;background:var(--fill);border-radius:7px;padding:3px 9px;box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);direction:ltr}
#dsim .dsw-dl{min-height:44px;display:block;margin:-6px auto 14px;color:var(--sel);font-weight:800;font-size:14px;padding:4px 8px}
#dsim .dsw-dl:hover{text-decoration:underline}
#dsim .dsw-btns{display:flex;gap:8px}
#dsim .dsw-btns .dsw-btn{flex:1}
#dsim .dsw-toast{position:absolute;top:72px;left:50%;transform:translate(-50%,-8px);background:rgba(29,29,31,.86);color:#fff;font-size:15px;font-weight:800;padding:9px 20px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .3s,transform .4s var(--ease);z-index:50;white-space:nowrap}
#dsim .dsw-toast.on{opacity:1;transform:translate(-50%,0)}
#dsim .dsw-coach{position:absolute;z-index:30;transform:translate(-50%,6px);background:var(--ink);color:#fff;font-size:13px;font-weight:800;padding:8px 14px;border-radius:12px;white-space:nowrap;opacity:0;transition:opacity .3s,transform .4s var(--ease);pointer-events:none;box-shadow:0 8px 24px rgba(0,0,0,.18)}
#dsim .dsw-coach::before{content:'';position:absolute;top:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:var(--ink)}
#dsim .dsw-coach.on{opacity:1;transform:translate(-50%,0)}
#dsim .dsw-coach.up{transform:translate(-50%,calc(-100% - 6px))}
#dsim .dsw-coach.up.on{transform:translate(-50%,-100%)}
#dsim .dsw-coach.up::before{top:auto;bottom:-6px;border-bottom:0;border-top:6px solid var(--ink)}
#dsim .dsw-tip{position:fixed;z-index:9700;pointer-events:none;background:var(--ink);color:#fff;font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:8px;transform:translate(-50%,calc(-100% - 14px));opacity:0;transition:opacity .15s;white-space:nowrap}
#dsim .dsw-tip.on{opacity:1}
#dsim .dsw-ghost{position:fixed;z-index:9700;width:44px;height:44px;pointer-events:none;transform:translate(-50%,-50%) scale(1.1)}
#dsim .dsw-grab{display:none}
/* light devices (touch): no reflection, no bob, no thickness */
#dsim.lite .dsw-rf{-webkit-box-reflect:unset}
#dsim.lite .dsw-stack{animation:none!important}
#dsim.lite .dsw-pane .ex{display:none}
#dsim.lite .dsw-canvas{background:radial-gradient(120% 90% at 50% 45%,#fbf9f4 0%,#ece8df 70%,#e2ddd1 100%)}
/* phone + tablet */
@media (max-width:860px){
  #dsim{padding:0}
  #dsim .dsw-win{border-radius:0;height:100%;width:100%}
  #dsim .dsw-ttl,#dsim .dsw-sep,#dsim .dsw-ib.cmp,#dsim .dsw-ib.kb{display:none}
  #dsim .dsw-tb{padding:0 8px;gap:4px}
  #dsim .dsw-tb .dsw-btn.pri{padding:8px 16px}
  #dsim .dsw-tb .dsw-btn.txt{padding:8px 8px}
  #dsim .dsw-body{flex-direction:column-reverse}
  #dsim .dsw-insp{width:auto;height:54%;border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0}
  #dsim .dsw-s3{inset:0 0 60px}
  #dsim .dsw-vbar{bottom:10px;flex-direction:column-reverse;gap:6px}
  #dsim .dsw-seg button{padding:6px 11px;font-size:13px}
  #dsim .dsw-hint{top:10px;font-size:12px}
  #dsim .dsw-lab{padding:4px;gap:0;font-size:0}
  #dsim .dsw-lab .o,#dsim .dsw-lab::after{display:none}
  #dsim .dsw-cap{bottom:96px}
  #dsim .dsw-grab{display:block;position:absolute;left:0;right:0;height:22px;z-index:6;cursor:ns-resize;touch-action:none}
  #dsim .dsw-grab::before{content:'';position:absolute;left:50%;top:8px;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:#c7c7cc}
  #dsim .dsw-sheet{place-items:end stretch}
  #dsim .dsw-card{max-height:calc(100% - 12px);width:100%!important;border-radius:22px 22px 0 0;transform:translateY(100%)}
  #dsim .dsw-card::before{content:'';display:block;width:38px;height:5px;border-radius:3px;background:#d1d1d6;margin:-10px auto 12px}
  #dsim .dsw-mat{min-height:64px}
  #dsim .dsw-surp{min-height:44px}
  #dsim .dsw-dsw{width:44px;height:44px}
  #dsim .dsw-qm{min-width:44px;min-height:44px;display:grid;place-items:center}
  #dsim .dsw-coach{white-space:normal;width:220px;text-align:center}
}
@media (max-width:380px){
  #dsim .dsw-card .dsw-btns{flex-direction:column-reverse;gap:6px}
  #dsim .dsw-card .dsw-btns .dsw-btn{flex:none;width:100%}
}
@media (min-width:600px) and (max-width:860px){#dsim .dsw-famsw{grid-template-columns:repeat(6,1fr)}#dsim .dsw-fam .fl{display:none}}
/* A short landscape screen keeps the preview beside the controls. */
@media (min-width:600px) and (max-width:860px) and (max-height:500px){
  #dsim .dsw-body{flex-direction:row}
  #dsim .dsw-insp{height:auto;width:340px;max-width:44%;border-top:0;border-left:1px solid var(--line)}
  #dsim .dsw-canvas{min-height:0}
  #dsim .dsw-grab{display:none}
  #dsim .dsw-famsw{grid-template-columns:repeat(3,1fr)}
  #dsim .dsw-sheet{place-items:center}
  #dsim .dsw-card{width:min(440px,calc(100% - 24px))!important;border-radius:22px}
  #dsim .dsw-pvbox{height:80px}
}
@media (min-width:861px) and (max-height:780px){
  #dsim .dsw-mat .o{width:34px;height:34px}#dsim .dsw-sec{padding:10px 14px 2px}#dsim .dsw-lk .pv{height:34px}
  #dsim .dsw-mcard .dsw-mats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 2px;padding-top:4px}
  #dsim .dsw-mcard .dsw-fam,#dsim .dsw-mcard .dsw-famsw{display:contents}#dsim .dsw-mcard .fl{display:none}
}
@media (prefers-reduced-motion:reduce){#dsim *{animation:none!important;transition:none!important}}

/* Desktop: every ready look is visible; toolbar actions name their purpose. */
#dsim .dsw-tool-label{display:none}
@media(min-width:861px){
  #dsim .dsw-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));overflow:visible;mask-image:none;-webkit-mask-image:none}
  #dsim .dsw-lk{width:auto;min-width:0}
  #dsim .dsw-tb .dsw-ib:not(.dsw-close):not(.kb){width:auto;display:flex;gap:6px;padding:0 10px;border-radius:10px}
  #dsim .dsw-tool-label{display:inline;font-size:13px;font-weight:800;white-space:nowrap}
}

/* Both photographs share the same leaf crop and physical placement. */
#dsim .dsw-canvas{--dw:min(52cqw,35cqh,420px)}
#dsim .dsw-canvas.ondoor .dsw-rf{margin-top:calc(4cqh + var(--dw) * .706);filter:drop-shadow(1px 2px 1px #0005)}
#dsim .dsw-canvas.ondoor.dclose .dsw-door{transform-origin:50% calc(var(--dw) * .706)}
#dsim .dsw-canvas.ondoor.dclose .dsw-s3{transform-origin:50% calc(4cqh + var(--dw) * .706)}
#dsim .dsw-canvas.ondoor .dsw-rf,#dsim .dsw-canvas.ondoor .dsw-measures{transform:translateY(-50%)}
#dsim .dsw-canvas.ondoor .dsw-vbar{flex-direction:column-reverse}
#dsim .dsw-door-label{display:none}
#dsim .dsw-dsw{width:52px;height:48px}
#dsim .dsw-canvas.ondoor .dsw-dsw.white{background:#e4dfd3 url('sign-doors/ivory-v1.webp') center 35%/cover}
#dsim .dsw-canvas.ondoor .dsw-dsw.grey{background:#454747 url('sign-doors/graphite-v1.webp') center 35%/cover}
#dsim .dsw-door-zoom{display:none;position:absolute;top:12px;left:12px;z-index:4;background:#fffffff0;box-shadow:0 2px 12px #0001}
#dsim .dsw-canvas.ondoor .dsw-door-zoom{display:block}
@media(min-width:861px){
  #dsim .dsw-dsw{width:112px;height:70px;display:flex;align-items:end;justify-content:center;padding-bottom:4px}
  #dsim .dsw-door-label{display:block;font-size:12px;background:#fffffff2;color:var(--ink);padding:1px 5px;border-radius:4px;white-space:nowrap}
  #dsim .dsw-dsw.night{font-size:0;width:76px}
}

#dsim .dsim-fac summary{min-height:44px;align-content:center;cursor:pointer;font-weight:900;font-size:14px;border-radius:8px}
#dsim .dsim-fac summary:focus-visible{outline:2px solid var(--sel);outline-offset:3px}
#dsim .dsim-fac details[open] summary{margin-bottom:10px}

@media(min-width:861px){
  #dsim .dsw-parts{grid-template-columns:repeat(var(--nc,4),minmax(0,1fr))}
  #dsim .dsw-pt b{white-space:normal;overflow:visible;text-overflow:clip;text-align:center;line-height:1.2}
}

#dsim .dsw-coach{max-width:min(300px,calc(100% - 24px));white-space:normal;text-align:center}
#dsim .dsw-door-note{display:none;position:absolute;top:14px;right:14px;z-index:3;background:#ffffffe8;padding:6px 10px;border-radius:8px;font-size:12px;color:var(--mut)}
@media(min-width:861px){#dsim .dsw-canvas.ondoor .dsw-door-note{display:block}}

/* Overall physical envelope, separate from the reflected artwork. */
#dsim .dsw-measures{position:absolute;width:calc(min(600px,80%) * var(--z,1));max-width:calc((100cqh - 150px) * var(--ar,2.5) * var(--z,1));aspect-ratio:var(--ar,2.5);pointer-events:none;transition:width .8s var(--ease),margin .8s var(--ease);color:#76653d}
#dsim .dsw-measures .dsw-ruler{opacity:1;color:inherit;border-color:currentColor;top:calc(100% + 14px);bottom:auto;border-top:1px solid;border-bottom:0;padding:5px 0 0;font-size:13px;line-height:1.2;text-shadow:none}
#dsim .dsw-measures .dsw-ruler::before,#dsim .dsw-measures .dsw-ruler::after{top:-5px;bottom:auto}
#dsim .dsw-height-ruler{position:absolute;right:calc(100% + 14px);top:0;height:100%;border-left:1px solid;font-size:13px;font-weight:800;line-height:1.2;white-space:nowrap}
#dsim .dsw-height-ruler::before,#dsim .dsw-height-ruler::after{content:'';position:absolute;left:-5px;top:0;width:9px;border-top:1px solid}
#dsim .dsw-height-ruler::after{top:auto;bottom:0}
#dsim .dsw-height-ruler>span{position:absolute;right:10px;top:50%;transform:translateY(-50%)}
#dsim .dsw-size-note{display:none;position:absolute;bottom:80px;left:50%;transform:translateX(-50%);background:#fffaf0ed;color:#54472a;border:1px solid #d8ceb8;border-radius:9px;padding:5px 10px;font-size:13px;font-weight:800;white-space:nowrap;pointer-events:none}
#dsim .dsw-canvas:not(.measured) .dsw-measures,#dsim .dsw-canvas.open .dsw-measures{display:none}
#dsim .dsw-canvas.measured.open .dsw-size-note{display:block}
#dsim .dsw-canvas.ondoor .dsw-measures{width:calc(var(--dw) * var(--sf));max-width:none;margin-top:calc(4cqh + var(--dw) * .706);color:#fff;filter:drop-shadow(0 1px 1px #000)}
#dsim .dsw-canvas.ondoor .dsw-measures .dsw-ruler{top:calc(100% + 12px);bottom:auto;padding:4px 0 0;border-top:1px solid;border-bottom:0;font-size:12px}
#dsim .dsw-canvas.ondoor .dsw-measures .dsw-ruler::before,#dsim .dsw-canvas.ondoor .dsw-measures .dsw-ruler::after{top:-5px;bottom:auto}
#dsim .dsw-canvas.ondoor .dsw-height-ruler{font-size:12px}
@media(max-width:859px){#dsim .dsw-canvas:not(.ondoor) .dsw-rf,#dsim .dsw-canvas:not(.ondoor) .dsw-measures{width:calc(min(600px,calc(100% - 160px)) * var(--z,1))}}

#dsim .dsw-canvas.ondoor .dsw-measures .dsw-ruler>span,#dsim .dsw-canvas.ondoor .dsw-height-ruler>span{background:#fffaf0ed;color:#54472a;border-radius:4px;padding:2px 5px;text-shadow:none}

#dsim .dsw-canvas.ondoor.dclose .dsw-measures .dsw-ruler,#dsim .dsw-canvas.ondoor.dclose .dsw-height-ruler{font-size:7.1px}

#dsim .dsw-doors{max-width:calc(100cqw - 24px);overflow-x:auto}
#dsim .dsw-dsw{flex-shrink:0}
#dsim .dsw-canvas.ondoor .dsw-dsw.oak{background:#b88b53 url('sign-doors/oak-v1.webp') center 35%/cover}
#dsim .dsw-canvas.ondoor .dsw-dsw.brown{background:#523b2d url('sign-doors/brown-v1.webp') center 35%/cover}