*{box-sizing:border-box}body{margin:0;background:#101827;color:#edf3ff;font:16px/1.7 system-ui,sans-serif}main{max-width:960px;margin:auto;padding:32px 20px}h1{font-size:clamp(32px,6vw,56px);line-height:1.1}small{color:#aebcd2;letter-spacing:1px}.courier-demo{background:#152238;color:#edf3ff;padding:26px;border:1px solid #637590}.courier-demo button{font:inherit;cursor:pointer;color:#edf3ff;background:#293d57;border:1px solid #637590;border-radius:5px;padding:10px 16px;min-height:44px}.courier-demo button:hover{background:#3a5273}.courier-demo button:focus-visible,.courier-grid:focus-visible{outline:3px solid #ffb09f;outline-offset:4px}.courier-bar{display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px;margin-bottom:22px}.courier-grid{position:relative;display:grid;grid-template-columns:repeat(12,1fr);aspect-ratio:12/8;background:#1b2c43;max-width:840px;margin:auto;touch-action:manipulation}.courier-tile{border:1px solid #30435c;position:relative;min-width:0}.courier-tile.crate:after{content:'';position:absolute;inset:12%;background:repeating-linear-gradient(45deg,#7184a2 0 4px,#546c8e 4px 7px);border:3px solid #99a9bd;border-radius:3px}.courier-tile.parcel:after{content:'';position:absolute;inset:22%;background:linear-gradient(90deg,#ff927e 42%,#ffded4 42% 58%,#ff927e 58%);border:2px solid #ffc1b3;transform:rotate(-7deg)}.courier-tile.parcel.collected:after{opacity:.12}.courier-tile.bench:after{content:'DROP';position:absolute;inset:8%;background:#314663;border:3px solid #9bbcff;color:#dce8ff;display:grid;place-items:center;font-size:10px;font-weight:700;letter-spacing:1px;border-radius:4px}.courier-tile.bench.complete:after{content:'✓';background:#37605b;border-color:#a1e1cd;color:#d6fff2;font-size:23px}.courier-player{position:absolute;width:5%;height:8%;transform:translate(-50%,-50%);border-radius:45% 45% 30% 30%;background:#c5b4f1;border:3px solid #eee5ff;box-shadow:0 5px 0 #0b1320;pointer-events:none}.courier-player:before{content:'';position:absolute;left:20%;right:20%;top:25%;height:17%;background:#25334e;border-radius:3px}.courier-player.carrying:after{content:'';position:absolute;width:60%;height:60%;right:-30%;bottom:-5%;background:#ff927e;border:2px solid #ffd5c9}.courier-help{color:#b9cbe3;font-size:12px;line-height:1.8;margin:22px 0 15px}.courier-controls{display:flex;gap:9px;flex-wrap:wrap}.courier-controls button:last-child{background:#ff927e;color:#171f30;border-color:#ff927e;margin-left:auto}.courier-controls button span{font-size:10px;border:1px solid #785c60;padding:2px 5px;margin-left:12px;border-radius:3px}.courier-status{color:#edf3ff;font-size:14px;margin:20px 0;min-height:3.2em;line-height:1.7}.courier-state{border-top:1px solid #34445f;padding-top:16px;font-size:12px}.courier-state summary{cursor:pointer}.courier-state pre{overflow:auto;color:#c4d8f7}.courier-legend{display:flex;gap:24px;flex-wrap:wrap;margin:25px 0;color:var(--muted);font-size:12px}.courier-legend span{display:flex;align-items:center;gap:8px}.courier-legend i{height:12px;width:12px;display:inline-block;border-radius:2px;background:#c5b4f1}.courier-legend span:nth-child(2) i{background:#ff927e}.courier-legend span:nth-child(3) i{background:#9bbcff}@media(max-width:640px){.courier-demo{padding:16px 11px}.courier-grid{margin-inline:0}.courier-bar{font-size:10px;gap:8px}.courier-bar button{padding:8px 10px;font-size:10px}.courier-tile.crate:after{border-width:1px;inset:10%}.courier-tile.bench:after{font-size:5px;letter-spacing:0;border-width:1px}.courier-player{border-width:1px}.courier-controls{gap:6px}.courier-controls button{padding:9px 12px}.courier-controls button:last-child{margin-left:0}.courier-controls button span{display:none}.courier-status{font-size:12px}.courier-help{font-size:11px}}

body{background:#101827;color:#edf3ff;font-family:'DM Sans',Arial,sans-serif}main.demo-page{max-width:960px;margin:auto;padding:35px 24px 65px}h1{font-family:'DM Serif',Georgia,serif;font-weight:400;font-size:clamp(39px,7vw,60px);line-height:1.1;margin:12px 0 20px}.demo-page>p{color:#b8c7dc;line-height:1.8;margin:18px 0}.demo-page .bar{margin-top:24px}.demo-page button{min-height:44px}.scene{border-color:#34445f;border-radius:5px}.bar button{background:#293d57;color:#edf3ff;border-color:#637590}.scene .light{min-height:44px}.demo-page .status{background:transparent;color:#edf3ff;padding:0;font-size:15px;letter-spacing:0}.demo-page details{margin-top:20px;color:#d6e1f2;font-size:13px}.demo-page summary{cursor:pointer;min-height:44px;display:flex;align-items:center}.demo-page details p{margin-top:8px}.demo-page .eyebrow{color:#9bbcff}.demo-page .courier-demo{margin-top:25px}.demo-page .courier-state pre{white-space:pre-wrap}.footer .brand,.header .brand{font-family:'DM Sans',Arial,sans-serif}.footer .brand small{letter-spacing:0}.demo-page .scene button:focus-visible{outline:3px solid #fff3a7;outline-offset:3px}@media(max-width:500px){main.demo-page{padding:25px 16px 45px}.scene .light{width:44px;height:44px;font-size:20px}.bar{font-size:12px}.bar button{font-size:12px;padding:9px 12px}.demo-page .scene{border-width:4px;margin-inline:0}.demo-page .gate{font-size:8px;min-width:33px}.demo-page .courier-help{font-size:12px}.demo-page .courier-status{font-size:13px}.demo-page .courier-controls button{min-width:44px}}
.demo-page>.back-link{display:flex;width:max-content}.demo-page .status{text-transform:none;font-weight:400}