@import url('/slot-assets/style.css?v=16');
*{box-sizing:border-box}body{background:#102521;color:#f3e8cd;font-family:system-ui,sans-serif;margin:0;line-height:1.6}header{max-width:1100px;margin:auto;display:flex;justify-content:space-between;padding:28px 24px;border-bottom:1px solid #d6b77940;gap:20px}a{color:#e4c58e}header a{text-decoration:none}header span{font-size:11px;letter-spacing:2px;margin-left:10px}main{max-width:1000px;margin:auto;padding:48px 24px}h1{font:clamp(44px,7vw,84px)/1.03 Georgia;margin:12px 0 24px}h1 em{color:#d6b779;font-weight:normal}h2{font:clamp(28px,4vw,40px)/1.2 Georgia;margin:10px 0 18px}.eyebrow{letter-spacing:2px;color:#d6b779;font-size:12px}.intro{font-size:19px}.scope,footer{font-size:13px;color:#b7c6bb}.cast{display:flex;align-items:center;gap:16px;margin:30px 0}.cast img{width:64px;height:86px;object-fit:cover;border-radius:32px 32px 6px 6px;border:1px solid #b89a60}.cast p{font-size:13px;max-width:210px}#progress{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0}#progress span{padding:6px 13px;border-bottom:2px solid #496155;color:#b7c6bb}#progress .active{color:#ffe2a7;border-color:#d6b779}#chapter{background:#19352d;border:1px solid #c9ab6f60;border-radius:16px;padding:clamp(18px,4vw,38px);box-shadow:0 18px 60px #0002;min-height:360px}button,.choice{font:inherit;min-height:48px;padding:12px 18px;border:1px solid #d6b77980;background:#d6b779;color:#142a22;border-radius:7px;cursor:pointer;white-space:normal;text-align:left}button:disabled{opacity:.5;cursor:default}button[aria-pressed=true]{background:#f3ddaa;outline:2px solid #fff;outline-offset:2px}button:focus-visible,a:focus-visible{outline:3px solid #80dfd6;outline-offset:4px}.choices{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0}.quiet{background:transparent;color:#e4c58e}.scene{position:relative;background:linear-gradient(#1c3c36,#355249);border-radius:10px;overflow:hidden;margin:20px 0;min-height:200px;padding:24px;display:flex;align-items:center;justify-content:center}.satchel{width:200px;height:150px;border:8px solid #9b7043;background:#67472d;border-radius:15px 15px 45px 45px;position:relative;box-shadow:0 10px 18px #0005}.pattern{position:absolute;left:34px;top:18px;width:115px;height:90px;background:#d1ab6e;border-radius:10px 35px 10px 10px;border:4px solid #e3c48d;color:#3e2a17;display:grid;place-items:center;font:bold 30px Georgia}.seam{position:absolute;left:-12px;bottom:15px;color:#fff1c1;font-size:25px;writing-mode:vertical-rl;letter-spacing:2px}.soft .pattern{box-shadow:0 0 0 10px #b9bea4}.wrapped .pattern{background:#b9bea4;color:transparent}.bench{position:relative;width:240px;height:160px}.leg{position:absolute;top:50px;width:16px;height:110px;background:#9c7748}.leg.left{left:25px}.leg.right{right:25px}.brace{position:absolute;left:35px;top:85px;width:170px;height:12px;background:#bd965c;transform:rotate(-18deg)}.top{position:absolute;top:40px;left:0;width:240px;height:22px;background:#c49b60;border-radius:4px}.jig{position:absolute;top:10px;left:85px;width:70px;height:30px;border:6px solid #e1be80;border-top:0}.green .top{background:#769780}.scene small{position:absolute;bottom:8px;left:16px;color:#dce1ce}.note{border-left:3px solid #c9ab6f;padding-left:15px}.tag{font-size:12px;color:#b7c6bb}#feedback{padding:12px 0;min-height:48px;color:#ffe0a0}footer{border-top:1px solid #b89a6040;margin-top:40px;padding-top:20px}ul{padding-left:22px}#confirm-reset{margin-top:12px}#confirm-reset button{margin:5px}@media(max-width:550px){main{padding:28px 16px}header{padding:20px 16px;font-size:13px}.cast{gap:10px;flex-wrap:wrap}.cast p{width:calc(50% - 85px);font-size:12px}.cast img{width:55px;height:75px}.choices button{flex:1 1 130px}#progress{font-size:12px;gap:5px}#progress span{padding:5px}button{font-size:15px}.scene{padding:18px}}
/* A single illustrated quay, carried through each encounter. */
main{max-width:1140px;padding-top:32px}h1{font-size:clamp(42px,6vw,72px);margin-bottom:18px}.cast{margin:20px 0}.harbor-scene{position:relative;margin:26px -12px 24px;border-radius:12px;overflow:hidden;border:1px solid #d9b77b65;background:#284348;box-shadow:0 18px 40px #081c2660}.harbor-scene>svg{display:block;width:100%;height:auto;max-height:400px}.scene-label{position:absolute;inset:auto 0 0;padding:35px 24px 14px;background:linear-gradient(transparent,#102923e6);pointer-events:none}.scene-label span{display:block;font-size:10px;letter-spacing:2.2px;color:#e9ce9b}.scene-label b{display:block;font:18px/1.5 Georgia;color:#fff0cf}.work-object{filter:drop-shadow(0 10px 8px #17232355)}.motion-part .piece{animation:fit-piece .55s ease-out both;transform-box:fill-box;transform-origin:center}.motion-stitch .sewn{stroke-dasharray:35;animation:sew .6s ease-out both}.pattern-object{transform:translateY(-14px);transition:transform .6s}.pattern-object.fitted{transform:translateY(36px)}.sways{transform:rotate(-12deg);transform-origin:526px 252px;animation:sway 2.8s ease-in-out 2}.steady{transform-origin:526px 252px;transform:rotate(0)}.motion-build .arrival{animation:arrive 1.3s ease-out both}.lamp-pool{opacity:.35;transition:opacity 1s}.light-restored .lamp-pool{opacity:1}.light-restored svg{filter:saturate(1.1)}.dialogue{display:flex;gap:20px;align-items:center;padding:18px 22px;background:#101f2260;border-left:3px solid #d7b26e;border-radius:8px}.dialogue img{width:70px;height:90px;object-fit:cover;border-radius:36px 36px 6px 6px}.dialogue p{margin:0;font:19px/1.5 Georgia}.dialogue small{font:13px/1.5 system-ui;color:#c6ccb9}#progress{margin:24px 0}#chapter{padding-top:25px}#chapter>p:not(.eyebrow){max-width:76ch}.choices button{transition:background .2s,box-shadow .2s}.choices button:hover:not(:disabled){background:#eed8a8;box-shadow:0 4px 14px #071c2840}@keyframes fit-piece{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:translateY(0)}}@keyframes sew{from{stroke-dashoffset:35}to{stroke-dashoffset:0}}@keyframes sway{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(6deg)}}@keyframes arrive{from{opacity:0;transform:translateX(65px)}to{opacity:1;transform:translateX(0)}}@media(max-width:550px){.harbor-scene{margin:20px -8px}.harbor-scene>svg{width:100%;height:auto;max-height:none;margin-left:0}.scene-label{padding:25px 12px 10px}.scene-label b{font-size:14px}.scene-label span{font-size:9px}.dialogue{padding:12px;gap:12px}.dialogue p{font-size:16px}.dialogue img{width:52px;height:72px}.cast{margin-bottom:10px}#progress span{font-size:11px}#chapter{padding:18px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

@media(max-width:550px){.scene-label{position:relative;padding:10px 12px;background:#112824}.scene-label b{line-height:1.4}}
.motion-fit .pattern-object.fitted{animation:settle .7s ease-out both}@keyframes settle{from{transform:translateY(-14px)}to{transform:translateY(36px)}}

/* Reference-led Harbor character art; interactive objects remain separate. */
.harbor-scene{max-width:900px;margin-left:auto;margin-right:auto;background:#173129}.harbor-scene>svg{max-height:none}.harbor-character{filter:drop-shadow(0 5px 3px #15140e50)}.vm-quay-art{filter:saturate(.88)}.work-object{filter:drop-shadow(0 8px 5px #251d1555)}@media(max-width:550px){.harbor-scene{margin-left:-8px;margin-right:-8px}}

.lantern.sways,.lantern.steady{transform-origin:560px 285px}.lantern.sways{transform:rotate(-5deg)}@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(3deg)}}
/* One-shot feedback follows a confirmed transition; restored art is settled. */
.motion-stitch .sewn,.motion-part .piece{animation:none}
.motion-stitch .newest-stitch{stroke-dasharray:35;animation:sew .65s ease-out both}
.motion-stitch .needle{animation:needle-pull .65s ease-out both}
.motion-part .newest-piece{animation:fit-piece .65s ease-out both;transform-box:fill-box;transform-origin:center}
.motion-lining .pattern-object{animation:insert-place .6s ease-out both}
.motion-test .bench-object{animation:load-test .65s ease-in-out both;transform-origin:460px 445px}
.motion-lamp-support .jig-clamp,.motion-lamp-support .clamp-screw{animation:clamp-seat .55s ease-out both}
.motion-lamp-tighten .repair-fastener{animation:fastener-turn .7s ease-out both;transform-origin:528px 252px}
.motion-lamp-test .lamp-pool{animation:light-spread 1.2s ease-out both}
.lantern.sways{animation:none}.motion-lamp-inspect .lantern.sways{animation:sway 1.3s ease-in-out 2}
.action-cue{animation:repair-cue 2.2s ease-out both}
@keyframes needle-pull{from{transform:translateX(35px)}to{transform:translateX(0)}}
@keyframes insert-place{from{opacity:.3;transform:translateY(-32px)}to{opacity:1;transform:translateY(-14px)}}
@keyframes load-test{0%,100%{transform:translateY(0)}40%{transform:translateY(3px)}70%{transform:translateY(1px)}}
@keyframes clamp-seat{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:translateX(0)}}
@keyframes fastener-turn{from{transform:rotate(-100deg)}to{transform:rotate(0)}}
@keyframes light-spread{from{opacity:.35}to{opacity:1}}
@keyframes repair-cue{0%{opacity:0}12%,70%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.action-cue{animation:none}.motion-stitch .newest-stitch{stroke-dasharray:none}.motion-fit .pattern-object.fitted{transform:translateY(36px)}}
.motion-ask .maker-bag.on-table{animation:bag-to-table .85s ease-in-out both}
@keyframes bag-to-table{0%{transform:translate(103px,13px)}45%{transform:translate(52px,-20px)}100%{transform:translate(0,0)}}
.motion-lamp-inspect .lamp-assembly{animation:lamp-to-bench .9s ease-in-out both}
@keyframes lamp-to-bench{from{transform:translate(210px,100px)}to{transform:translate(0,0)}}
.story-coda{margin:32px 0;padding:24px;border:1px solid #bba06c;border-radius:12px;background:#152e29}.story-coda h3{font:28px Georgia;color:#f0d1a0}.story-coda p{max-width:70ch}.motion-lamp-test .found-washer{animation:washer-slide 1s ease-out both;animation-delay:.6s}.first-repair-mark{opacity:.8}@keyframes washer-slide{from{transform:translateX(-35px);opacity:0}to{transform:translateX(0);opacity:1}}@media(prefers-reduced-motion:reduce){.story-coda{scroll-behavior:auto}}