.panel-case{
  --brass:#efd39f;--shell:#263b35;--metal:#a8b2a1;
  container-type:inline-size;min-width:0;position:relative;
  color:#faf6e7;background:var(--shell);padding:0 clamp(8px,1vw,13px) 13px;
  border:1px solid #1b3028;border-radius:9px;
  box-shadow:inset 0 2px 0 #647366,0 4px 0 #192d24,0 10px 0 -6px #c2c7b6,0 18px 23px -18px #445546;
}
.case-rail,.case-caption,.booking-slip{display:flex;align-items:center;justify-content:space-between;gap:12px}
.case-rail{min-height:46px;padding:2px 5px}
.case-tag,.fastener,.part-label,.slip-label,.window-lettering>span,.stamp,.test-button,.edit-book,#reset-demo{font-family:var(--mono)}
.case-tag,.part-label,.slip-label,.window-lettering>span,.stamp{text-transform:uppercase;letter-spacing:.1em;font-weight:700}
.case-tag{color:#e0e4d5;font-size:clamp(9px,2.2cqw,11px)}
.case-tag span{color:#8a9f90;margin:0 2px}
.fastener{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 2px;color:var(--brass);background:transparent;font-size:clamp(10px,2.25cqw,12px);font-weight:bold}
.fastener:hover span{text-decoration:underline;text-underline-offset:4px}
.screw-head{position:relative;width:22px;height:22px;display:inline-block;border-radius:50%;border:1px solid #665a43;background:linear-gradient(135deg,#fff1c3 2%,#c9b988 46%,#a69467 78%,#e2d7ac);box-shadow:inset 0 0 0 2px #ac9c75,0 1px 2px #17271e;transition:transform .54s ease}
.screw-head:after{content:"";position:absolute;left:14%;top:43%;width:72%;height:18%;background:#514b3e;box-shadow:0 1px 0 #f1e1ba;transform:rotate(-35deg)}
.fastener[aria-expanded="true"] .screw-head{transform:rotate(-240deg);background:linear-gradient(145deg,#eed9aa,#b6a17b)}
.housing{position:relative;isolation:isolate;display:grid;overflow:hidden;border:2px solid #1c2e28;border-radius:4px;background:#263c39;perspective:950px}
.housing>div{grid-area:1/1;min-width:0}
.faceplate{position:relative;z-index:2;display:flex;flex-direction:column;background:#f5ecd9;box-shadow:4px 5px 13px #13241dc9;transform-origin:0 15%;transition:transform .75s cubic-bezier(.25,.02,.25,1),visibility 0s linear 0s;will-change:transform}
.housing.open .faceplate{transform:translate(-109%,-5%) rotate(-6deg) rotateY(-18deg);visibility:hidden;transition-delay:.12s,.88s}
.shop-window{position:relative;flex:1;min-height:120px;background:#304e46;overflow:hidden}
.shop-window>img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:61% center;image-rendering:pixelated}
.window-lettering{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;padding:18px 0 17px 5.5%;color:#ffedc5;text-shadow:0 2px #233d34}
.window-lettering>span{font-size:clamp(8px,1.65cqw,11px);letter-spacing:.18em;color:#e0c992;margin:0 0 6px 2px}
.window-lettering strong{display:block;font:normal clamp(32px,7.8cqw,58px)/.89 var(--serif);letter-spacing:-.065em}
.window-lettering em{font-weight:normal;color:#f8d59a}
.booking-slip{background:#f5ecd9;color:#293c33;padding:clamp(13px,3.3cqw,24px) clamp(12px,3.8cqw,27px);border-top:3px double #b2a98b}
.slip-label{font-size:clamp(8px,1.9cqw,11px);color:#466452;letter-spacing:.08em}
.booking-slip h3{font-size:clamp(25px,5.1cqw,37px);letter-spacing:-.045em;line-height:1.14;margin:2px 0 3px}
.booking-slip p{font-size:clamp(11px,2.45cqw,15px);color:#4d5b4e;line-height:1.4}
.book-now{padding:10px clamp(9px,2.7cqw,18px);white-space:nowrap;background:#315b48;color:#fff8e6;border-radius:3px;box-shadow:0 2px #163f2b;font-weight:700;font-size:clamp(12px,2.6cqw,15px);min-height:42px}
.book-now:hover{background:#244b3b}.book-now span{margin-left:4px}
.stamp{border:2px double #4b7358;border-radius:3px;padding:4px 7px;color:#456c51;transform:rotate(-5deg);font-size:clamp(10px,2.3cqw,13px);white-space:nowrap}
.plate-edge{height:5px;background:linear-gradient(#d0c6ad,#f2e7cc 55%,#9f9d87)}
.inside{display:grid;align-content:center;min-height:clamp(245px,52cqw,340px);padding:clamp(10px,3cqw,18px);background-color:#243b3b;background-image:radial-gradient(#51625a 1px,transparent 1px);background-size:9px 9px;box-shadow:inset 0 0 15px #162b29}
.components{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) clamp(14px,4.3cqw,29px) minmax(0,1.18fr);align-items:stretch}
.parts{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:9px 0}
.socket{position:relative;background:#1e3232;box-shadow:inset 0 0 0 1px #66786d,1px 2px 0 #142c2b;padding:clamp(7px,2.2cqw,14px);border-radius:3px}
.part-label{display:block;color:#d4dfce;font-size:clamp(8px,1.8cqw,11px);line-height:1.3;letter-spacing:.075em}
.socket>i{position:absolute;top:50%;right:-3px;width:6px;height:6px;background:#e2b77a;border:1px solid #4a5045;border-radius:50%}
.test-button{margin-top:8px;color:#263b32;border-radius:2px;background:#efd39f;border:1px solid #f6dfb4;box-shadow:0 2px #957e58;padding:4px 7px;font-weight:bold;font-size:clamp(10px,2.2cqw,13px)}
.test-button:disabled{background:#a1b1a2;color:#243b31;box-shadow:none;border-color:#93a699;cursor:default}
.output strong{display:block;font:600 clamp(13px,2.9cqw,20px)/1.2 var(--mono);letter-spacing:-.045em;color:#bde4ac;margin-top:6px}
.wiring{position:relative}
.wire{position:absolute;width:100%;left:0;border-top:2px solid #c6a268;height:4px;box-shadow:0 1px #8c7654}
.wire.send{top:22%;transform:skewY(-9deg)}.wire.return{bottom:20%;border-color:#8ec58f;box-shadow:0 1px #5d8b6e;transform:skewY(8deg)}
.ledger{position:relative;align-self:center;padding:clamp(13px,3.6cqw,25px) clamp(8px,2.7cqw,17px) clamp(8px,2.2cqw,14px);background:#f1dfb9;color:#334638;border:1px solid #d1ba92;border-radius:1px;box-shadow:2px 3px #bfae8f,3px 5px #776f5f,4px 7px 7px #17292588;transform:rotate(-1deg)}
.clip{position:absolute;top:-5px;left:32%;width:35%;height:8px;border-radius:2px;background:linear-gradient(#384b43,#bdc4ad 43%,#889584);box-shadow:0 2px #716a56}
.ledger h3{font:italic clamp(19px,4.1cqw,30px)/1.16 var(--serif);letter-spacing:-.04em;margin:0 0 6px}
.appointments{margin:0 0 7px}
.appointments>div{display:grid;grid-template-columns:minmax(32px,.7fr) minmax(0,1fr);align-items:baseline;gap:4px;border-bottom:1px solid #aeb39a;padding:5px 0}
.appointments dt{font:clamp(10px,2.15cqw,13px)/1.3 var(--mono);color:#555e4d}
.appointments dd,.lunch{margin:0;color:#354a3a;font:italic clamp(12px,2.9cqw,18px)/1.15 var(--serif)}
#last-row{background:#e7bd785c}
.lunch{display:inline-block;padding:2px 0;border:0;background:none;text-decoration:underline dotted #8a8270;text-underline-offset:2px}
.edit-book{padding:4px 0;text-align:left;text-decoration:underline;text-underline-offset:3px;color:#355b41;background:transparent;font-size:clamp(10px,2.1cqw,13px);font-weight:600}
.case-caption{padding:14px 5px 0;align-items:flex-start}
.case-caption h2{font:650 1.02rem/1.35 var(--sans)}
.case-caption p{font-size:.85rem;line-height:1.45;color:#d1dacb;max-width:52ch;margin:4px 0 0}
#reset-demo{font-size:10px;line-height:1.4;flex:none;font-weight:600;background:transparent;color:#d6ddcd;min-height:36px;padding:3px 0}
#reset-demo:hover{text-decoration:underline}
@container(max-width:365px){.case-rail{gap:6px}.case-caption{display:block}.case-caption:has(#reset-demo:not([hidden])){padding-bottom:0}#reset-demo{display:block;margin-left:auto}.booking-slip{gap:8px}.part-label{letter-spacing:.03em}.case-tag{letter-spacing:.045em}}
@media(prefers-reduced-motion:reduce){.faceplate,.housing.open .faceplate,.screw-head{transition:none}}