:root{--ink:#243d3c;--paper:#fffaf0;--cork:#c88f57;--jade:#287e69;--coral:#db6652;--ochre:#e5ad3c;--blue:#346d9b}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-width:1080px;min-height:100vh;overflow:hidden;background:#ebe9df;color:var(--ink);font-family:ui-rounded,"Avenir Next",system-ui,sans-serif}
button,input{font:inherit}
button:focus-visible,input:focus-visible,[draggable]:focus-visible{outline:4px solid #163f5c;outline-offset:4px}
.shell{width:min(1280px,calc(100vw - 54px));height:min(826px,calc(100vh - 34px));margin:17px auto;display:grid;grid-template-rows:50px minmax(0,1fr) 145px;gap:12px}
.topline{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 10px}
.topline>div:first-child{display:flex;flex-direction:column}
.topline span,.decision span{font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:#397267}
.topline strong{font-size:16px}
.topline button{justify-self:end;min-height:44px;padding:0 16px;border:0;border-radius:14px;background:#dae5df;color:var(--ink);font-weight:850;cursor:pointer}
.pips{display:flex;gap:8px}
.pips i{width:38px;height:7px;border-radius:99px;background:#cad4ce}
.pips i.on{background:var(--ochre)}
.pips i.done{background:var(--jade)}
.desk{position:relative;overflow:hidden;display:grid;grid-template-columns:43% 1fr;grid-template-rows:1fr 96px;gap:16px;padding:20px;border-radius:34px;background:linear-gradient(145deg,#f4dfba,#d5ad77);box-shadow:0 20px 55px rgba(47,49,35,.18)}
.scene{position:relative;overflow:hidden;border:10px solid #fff;border-radius:25px;background:linear-gradient(#8cc9d0 0 45%,#8ab66b 46% 64%,#d1b47d 65%);box-shadow:0 12px 24px rgba(62,45,26,.18)}
.sun{position:absolute;right:10%;top:9%;width:62px;height:62px;border-radius:50%;background:#ffe28a}
.shed{position:absolute;left:9%;bottom:23%;width:210px;height:180px;background:#3c796c;border:8px solid #27534c}
.shed::before{content:"";position:absolute;left:-18px;top:-65px;border-left:115px solid transparent;border-right:115px solid transparent;border-bottom:68px solid #b85643}
.shed i{position:absolute;right:22px;bottom:0;width:70px;height:125px;background:#285a55}
.path{position:absolute;left:0;right:0;bottom:0;height:34%;background:#b69365;clip-path:polygon(0 30%,100% 0,100% 100%,0 100%)}
.print{position:absolute;width:22px;height:32px;border-radius:50% 50% 45% 45%;background:#694c36;transform:rotate(32deg)}
.p1{left:45%;top:35%}
.p2{left:58%;top:56%}
.p3{left:72%;top:29%}
.bucket{position:absolute;left:48%;bottom:25%;width:70px;height:55px;border-radius:0 0 22px 22px;background:#3b78a4;transform:rotate(20deg)}
.dog{position:absolute;right:12%;bottom:17%;width:95px;height:82px;display:grid;place-items:center;border-radius:50% 50% 40% 40%;background:#d3a154;color:#593c2c;font-weight:1000}
.bird{position:absolute;right:26%;top:20%;color:#184d6d;font-size:36px}
.shoe{position:absolute;left:65%;bottom:18%;width:75px;height:32px;border-radius:60% 35% 35% 30%;background:#496f9c;box-shadow:inset 0 -8px 0 #294c70}
.focus{position:absolute;width:150px;height:150px;border:7px solid #f7d476;border-radius:50%;box-shadow:0 0 0 999px rgba(25,49,52,.32);left:42%;top:34%;opacity:0;pointer-events:none}
.scene.inspecting .focus{opacity:1;animation:scan 1.1s ease-out}
.tool-result{position:absolute;left:18px;right:18px;bottom:13px;z-index:4;padding:10px 14px;border-radius:15px;background:rgba(255,255,255,.94);font-size:13px;font-weight:850;box-shadow:0 8px 18px rgba(0,0,0,.12)}
.board{min-width:0;padding:18px;border:7px solid #8b5b36;border-radius:24px;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.08) 0 2px,transparent 3px),var(--cork);background-size:22px 22px;box-shadow:inset 0 0 0 3px #dcb17d,0 12px 24px rgba(62,45,26,.2)}
.board-title{display:flex;align-items:center;justify-content:space-between;gap:20px}
.board-title>strong{padding:8px 12px;border-radius:10px;background:var(--paper);font-size:14px;transform:rotate(-1deg)}
.balance{display:grid;grid-template-columns:auto 130px auto;align-items:center;gap:8px;padding:8px 10px;border-radius:13px;background:rgba(255,250,240,.9)}
.balance small{font-size:9px;font-weight:950}
.balance input{width:130px;accent-color:var(--jade)}
.balance b{font-size:12px}
.samples{display:flex;gap:9px;margin:14px 0}
.sample{position:relative;flex:1;min-height:94px;border:5px solid #fff;border-radius:8px;background:linear-gradient(145deg,#7c9d6b,#d1c49c);box-shadow:0 6px 12px rgba(77,46,24,.16);cursor:pointer}
.sample.blurry{filter:blur(.6px);background:repeating-linear-gradient(25deg,#776550 0 7px,#9c8768 8px 14px)}
.sample.selected{border-color:#ffe07a;transform:translateY(-4px)}
.sample::after{content:attr(data-mark);position:absolute;right:4px;bottom:2px;color:#fff;font-weight:1000}
.bins{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-height:175px}
.bin{padding:10px;border:3px dashed rgba(69,45,28,.35);border-radius:17px;background:rgba(255,250,240,.32)}
.bin>span{display:block;margin-bottom:8px;font-size:10px;font-weight:1000;letter-spacing:.1em}
.bin.observation{border-radius:18px}
.bin.inference{clip-path:polygon(8% 0,100% 0,100% 100%,8% 100%,0 50%);padding-left:28px}
.card{min-height:52px;margin:7px 0;padding:9px 11px;border:0;border-radius:13px;background:var(--paper);color:var(--ink);box-shadow:0 4px 0 rgba(82,47,22,.17);font-size:12px;font-weight:850;cursor:grab}
.bin.inference .card{border-radius:4px 13px 13px 4px}
.cards{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.cards .card{flex:1;min-width:42%;margin:0}
.tools{grid-column:1/-1;display:flex;gap:12px;justify-content:center}
.tools button{min-width:220px;min-height:78px;display:grid;grid-template-columns:45px 1fr;grid-template-rows:1fr 1fr;padding:10px 14px;border:0;border-radius:18px;background:#fff8e9;color:var(--ink);text-align:left;cursor:pointer;box-shadow:0 6px 0 #b98752}
.tools button:hover{transform:translateY(-2px)}
.tools b{grid-row:1/3;display:grid;place-items:center;font-size:28px;color:var(--blue)}
.tools strong{align-self:end}
.tools small{color:#6c7773;font-size:11px}
.decision{display:grid;grid-template-columns:1fr 1.4fr;align-items:center;gap:30px;padding:20px 28px;border-radius:27px;background:var(--paper);box-shadow:0 12px 32px rgba(23,58,48,.11)}
.decision h1{margin:4px 0 3px;font-size:27px;line-height:1.08;letter-spacing:-.03em}
.decision p{margin:0;color:#65716e;font-size:14px;font-weight:650}
.actions{display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap}
.actions button,.finale button{min-height:54px;padding:11px 17px;border:0;border-radius:16px;background:#e1eae4;color:var(--ink);font-weight:900;cursor:pointer}
.actions .primary,.finale button{background:var(--jade);color:#fff;box-shadow:0 6px 0 #185d4d}
.finale{position:absolute;inset:17px 27px;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:34px;background:rgba(31,62,61,.97);color:#fff}
.finale span{text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:#f3c76e}
.finale strong{margin:12px 0 25px;font-size:42px}
.is-pointed{animation:point .7s ease-out 2}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}
@keyframes scan{from{transform:translate(-150px,-80px)}
to{transform:translate(120px,50px)}
}
@keyframes point{50%{filter:brightness(1.25);box-shadow:0 0 0 6px #ffe07a}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}
}

/* Raster-first production scene with a real direct-manipulation inspection tool. */
.scene{isolation:isolate;background:#183b3d!important;touch-action:none}
.scene-art{position:absolute;z-index:0;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center;pointer-events:none;user-select:none}
.scene>.sun,.scene>.shed,.scene>.path,.scene>.bucket,.scene>.dog,.scene>.bird,.scene>.shoe{display:none}
.scene::after{position:absolute;z-index:1;inset:0;content:"";pointer-events:none;background:linear-gradient(180deg,rgba(10,28,28,.02),rgba(10,28,28,.24));box-shadow:inset 0 0 45px rgba(11,28,25,.22)}
.clue-hotspot{position:absolute;z-index:3;display:block;border:3px dashed rgba(255,232,136,.42);border-radius:50%;pointer-events:none;transition:opacity .15s,box-shadow .15s;opacity:.38}
.mud-hotspot{left:57%;top:48%;width:22%;height:21%}
.bucket-hotspot{left:43%;top:55%;width:20%;height:20%}
.cat-hotspot{left:59%;top:40%;width:18%;height:22%}
.scene[data-tool="magnifier"] .mud-hotspot,.scene[data-tool="audio"] .bucket-hotspot,.scene[data-tool="time"] .cat-hotspot{opacity:.85;box-shadow:0 0 0 7px rgba(255,220,92,.13)}
.focus{z-index:6!important;display:block!important;left:50%;top:50%;width:112px;height:112px;transform:translate(-50%,-50%);box-shadow:0 0 0 999px rgba(15,33,34,.42),0 0 0 7px rgba(247,212,118,.25)!important;animation:none!important}
.scene.inspecting .focus{opacity:1;animation:clue-pop .65s ease-out!important}
.inspection-lens{position:absolute;z-index:8;left:26%;top:42%;width:108px;height:108px;padding:0;border:8px solid #f2c449;border-radius:50%;color:#163e40;background:rgba(255,250,226,.22);box-shadow:0 12px 24px rgba(17,30,29,.35),inset 0 0 0 3px rgba(255,255,255,.82);backdrop-filter:brightness(1.28) saturate(1.18);touch-action:none;cursor:grab;transform:translate(-50%,-50%);transition:scale .13s ease}
.inspection-lens{background-image:url("assets/scene-plate.webp");background-repeat:no-repeat;background-color:rgba(255,250,226,.22)}
.inspection-lens::after{position:absolute;left:77px;top:80px;width:24px;height:74px;border:6px solid #173d3e;border-radius:16px;content:"";background:#e2a73c;transform:rotate(-42deg);transform-origin:top}
.inspection-lens span{display:block;font-size:40px;font-weight:950}
.inspection-lens small{position:absolute;left:50%;bottom:-40px;min-width:86px;padding:7px 10px;border-radius:999px;color:#fff;background:#173d3e;font-size:10px;font-weight:950;letter-spacing:.08em;transform:translateX(-50%)}
.inspection-lens.is-dragging{cursor:grabbing;scale:1.08;transition:none}
.tool-result{z-index:9!important;max-width:85%;border:1px solid rgba(255,255,255,.42)!important;background:rgba(24,52,50,.9)!important;color:#fff!important;backdrop-filter:blur(9px)}
.tools button[aria-pressed="true"]{background:#f8d46a!important;box-shadow:0 0 0 4px rgba(242,196,73,.26),0 7px 0 #9a6d20!important;transform:translateY(-2px)}
@keyframes clue-pop{0%{scale:.72;opacity:0}55%{scale:1.08;opacity:1}100%{scale:1;opacity:0}}