/* A browser illustration of four projection mechanics, with native controls. */
body.lab .projection-demo{--demo-paint:#ff9b7d}
body.lab .projection-demo button{font:inherit;cursor:pointer;min-height:46px;color:#fff9ee;border:1px solid #81999d;background:#1b3942;border-radius:12px;padding:12px 18px;line-height:1.3}
body.lab .projection-demo button:focus-visible{outline:3px solid #ffcf65;outline-offset:4px}
body.lab .projection-demo button:hover{border-color:#ffcf65}
.demo-modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:28px 0}
body.lab .demo-modes button[aria-pressed=true]{background:#ffcf65;color:#142b32;border-color:#ffcf65}
.demo-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:18px}
.projection-demo h3{margin:0 0 8px;font-size:clamp(22px,3vw,32px);color:#fff9ee}
.projection-demo .demo-heading p{margin:0;font-size:16px;opacity:1;color:#d7e5e4}
.demo-progress{flex-shrink:0;padding:10px 14px;border-radius:10px;background:#24444b;color:#ffdc8b;font-size:15px;font-weight:700;white-space:nowrap}
.projection-room{position:relative;height:430px;overflow:hidden;border:1px solid #78908b;border-radius:22px;background:linear-gradient(160deg,#1d3b4a,#091d2b);isolation:isolate}
.projection-room::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,#a5d7dd12 50%,transparent 50.2%),linear-gradient(#a5d7dd0d 1px,transparent 1px);background-size:auto,100% 52px}
.demo-projector{position:absolute;top:2px;left:50%;width:126px;height:72.8px;transform:translateX(-50%);z-index:3;pointer-events:none}
.ex-scene .demo-projector img{display:block;width:100%;height:100%;max-width:none;filter:drop-shadow(0 4px 6px #0003)}
.demo-beam{position:absolute;inset:48.2px 9% 4%;background:linear-gradient(#fff5c936,#ffcf6505);clip-path:polygon(49.5% 0,50.5% 0,100% 100%,0 100%);pointer-events:none}
.demo-drawing{position:absolute;inset:70px 5% 28px;display:grid;grid-template-columns:1fr 1.6fr;gap:4%;align-items:center}
.demo-paper{padding:14px;background:#fff9ee;border-radius:10px;box-shadow:0 6px 0 #d9c9ac;color:#203c42;text-align:center;font-size:14px;font-weight:700;min-width:0;width:100%;max-width:290px;justify-self:center}
.demo-paper .demo-sketch{display:block;width:100%;height:auto;aspect-ratio:4/3;touch-action:none;cursor:crosshair;background:#fffdf8;border-radius:6px;margin:8px 0}
.demo-sketch path,.demo-live-art path{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.demo-sketch-tools{display:flex;gap:6px;flex-wrap:wrap}
body.lab .projection-demo .demo-sketch-tools button{flex:1;padding:8px 5px;font-size:12px;min-height:40px;border-color:#bbc9c3;background:#e9eee5;color:#203c42;border-radius:6px}
.demo-artworks{position:absolute;inset:48px 12px 12px;pointer-events:none}
.demo-live-art{position:absolute;left:0;top:0;width:30%;aspect-ratio:1;filter:drop-shadow(0 3px 4px #05253f66)}
.demo-live-art svg{display:block;position:absolute;left:10%;top:20%;width:80%;height:60%;overflow:visible;transform-origin:center}
.demo-empty{position:absolute;inset:45% 10% auto;text-align:center;font-size:16px;color:#c3e9f4}
.demo-aquarium{position:relative;height:100%;max-height:295px;border:3px solid #a3e5ed;border-radius:12px;background:#15517a;overflow:hidden;box-shadow:0 0 40px #79d9ef30}
.demo-aquarium>svg{position:absolute;inset:0;width:100%;height:100%}
.demo-screen-label{position:absolute;left:16px;top:14px;color:#e2faff;font-size:14px;z-index:1}
.demo-range,.demo-wall{position:absolute;inset:75px 9% 28px;border:3px solid #b9e4df;border-radius:12px;background:linear-gradient(#365a72 0 55%,#284e45 55%);box-shadow:0 0 30px #8ce7e522}
.demo-range::before{content:"";position:absolute;inset:20% 0 0;background:linear-gradient(150deg,transparent 30%,#477b6b 30% 50%,transparent 50%),linear-gradient(215deg,transparent 25%,#385f54 25% 50%,transparent 50%);opacity:.8;pointer-events:none}
.demo-range::after{content:"";position:absolute;left:0;right:0;bottom:15%;height:8px;background:#b8b399;pointer-events:none}
.demo-wall{background:linear-gradient(135deg,#293957,#2a426b);border-color:#b8bde6}
.demo-wall::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 55%,#6780ad55,transparent 65%);pointer-events:none}
body.lab .projection-demo .demo-target{position:absolute;transform:translate(-50%,-50%);padding:0;width:82px;height:82px;border:0;border-radius:50%;background:transparent;z-index:2;min-height:0;touch-action:pan-y}
.demo-target svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 5px #0005)}
.demo-target.is-hit{opacity:.28}
body.lab .projection-demo .demo-wall .demo-target{width:78px;height:78px;border-radius:18px;background:var(--target-color);border:4px solid #e5e5ff;box-shadow:0 0 20px color-mix(in srgb,var(--target-color) 50%,transparent)}
.demo-wall .demo-target::after{content:"";position:absolute;inset:22%;border:3px solid #152f45;border-radius:50%}
.demo-wall .demo-target.is-hit{opacity:.22;background:transparent;box-shadow:none}
.demo-ball{position:absolute;left:50%;top:115%;width:30px;height:30px;margin:-15px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff,#efb86f 65%,#b6753d);box-shadow:0 3px 10px #0005;pointer-events:none;z-index:4}
.demo-floor-room{position:absolute;inset:60px 8% 18px;display:grid;place-items:center;perspective:700px}
.demo-floor{width:min(94%,540px);height:290px;padding:14px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;background:#1d283b;border:3px solid #8cacc0;border-radius:16px;transform:rotateX(23deg) rotateZ(-4deg);box-shadow:0 20px 30px #0006}
body.lab .projection-demo .demo-floor button{padding:0;min-height:50px;border:1px solid #749ca2;background:#315564;border-radius:8px;color:#eef9f7;font-size:20px;font-weight:700;position:relative}
body.lab .projection-demo .demo-floor .is-next{background:#ffcf65;color:#142b32;border:3px solid #fff3c9;box-shadow:0 0 22px #ffcf6580}
body.lab .projection-demo .demo-floor .is-done{background:#5bc7b6;color:#112e34;border-color:#bcf4dc}
.demo-footprint{display:inline-block;width:12px;height:24px;background:currentColor;border-radius:55% 50% 40% 40%;transform:rotate(-20deg);box-shadow:14px 7px 0 -1px currentColor;vertical-align:middle;margin-right:12px}
.demo-toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px}
.demo-palette{display:flex;gap:9px;margin-right:4px}
body.lab .projection-demo .demo-palette button{padding:0;width:46px;height:46px;min-height:46px;border-radius:50%;background:var(--paint);border:3px solid #142b32;box-shadow:0 0 0 1px #81999d}
body.lab .projection-demo .demo-palette button[aria-pressed=true]{box-shadow:0 0 0 3px #fff9ee}
body.lab .projection-demo .demo-action{background:#ffcf65;border-color:#ffcf65;color:#142b32;font-weight:700}
.projection-demo [hidden]{display:none!important}
.projection-demo .demo-status{margin:18px 0 0;min-height:28px;color:#ffdc8b;opacity:1;font-size:16px}
.demo-footer{display:flex;align-items:center;gap:30px;justify-content:space-between;margin-top:30px;padding-top:24px;border-top:1px solid #78908b}
.projection-demo .demo-footer p{margin:0;max-width:680px;font-size:14px;opacity:1;color:#d7e5e4}
body.lab .projection-demo [data-demo-product]{display:flex;align-items:center;gap:12px;flex-shrink:0;background:#fff9ee;border-color:#fff9ee;color:#142b32}
@media(max-width:700px){.demo-modes{grid-template-columns:1fr 1fr;gap:8px}.demo-modes button{font-size:14px!important;padding:12px 8px!important}.demo-heading{display:block}.demo-progress{display:inline-block;margin-top:14px}.projection-room{height:345px;border-radius:16px}.demo-drawing{inset:68px 4% 25px;gap:5%;grid-template-columns:1fr 1.9fr}.demo-paper{padding:10px;font-size:12px}.demo-aquarium{max-height:235px}.demo-screen-label{font-size:12px;left:10px;top:10px}.demo-range,.demo-wall{inset:72px 5% 28px}body.lab .projection-demo .demo-target{width:64px;height:64px}body.lab .projection-demo .demo-wall .demo-target{width:58px;height:58px}.demo-floor-room{inset:58px 5% 20px}.demo-floor{height:240px;gap:6px;padding:9px}.demo-footer{display:block}.demo-footer [data-demo-product]{margin-top:18px}.demo-toolbar{gap:14px}.demo-palette{width:100%;margin-bottom:4px}.projection-demo .demo-status{font-size:15px}}

body.lab .projection-demo button:disabled{cursor:default;opacity:.5}
.demo-range{cursor:crosshair}
.demo-range:focus-visible{outline:3px solid #ffcf65;outline-offset:4px}
.demo-range.is-finished{cursor:default}
.demo-shot{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none;width:32px;height:32px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:23px;font-weight:800;background:#102b39dd;line-height:1}
.demo-shot.is-hit{color:#a6f2c0}
.demo-shot.is-miss{color:#ffac96}
body.lab .projection-demo .demo-floor .is-wrong{background:#ad3d39;border:3px solid #ffd0be;color:#fff;box-shadow:0 0 18px #f56a5266}
body.lab .projection-demo .demo-floor .is-wrong::after{content:"×";font-size:32px}
@media(max-width:700px){
 .projection-room.is-drawing{height:650px}
 .is-drawing .demo-drawing{inset:75px 5% 20px;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(180px,1fr);gap:20px}
 .is-drawing .demo-paper{width:min(100%,290px);justify-self:center}
 .is-drawing .demo-aquarium{width:100%;max-height:none}
 .demo-empty{font-size:14px}
}