@font-face{font-family:ArcadeConsole;src:url('./media/console.ttf') format('truetype');font-display:swap}@font-face{font-family:ArcadeConsole;src:url('./media/console-bold.ttf') format('truetype');font-weight:700;font-display:swap}

dawcade-arcade{display:block;width:min(1280px,calc(100% - 80px));margin:auto;position:relative;isolation:isolate;font-family:ArcadeConsole,Arial,sans-serif;color:#ecedf6;--arc-accent:#c6b68a;--arc-line:#ffffff16}
dawcade-arcade *{box-sizing:border-box}dawcade-arcade button{font:inherit;color:inherit;border:0;cursor:pointer;touch-action:manipulation}dawcade-arcade button:focus-visible{outline:2px solid #f6d657;outline-offset:5px}
dawcade-arcade .arc-intro{text-align:center;color:#a5a5ad;font-size:17px;margin:-12px 0 32px;line-height:1.6}
dawcade-arcade .arc-scene{display:grid;grid-template-columns:minmax(0,2fr) minmax(240px,1fr);align-items:center;gap:50px;padding:35px 12px 24px}
dawcade-arcade .arc-machine{position:relative;min-width:0;container-type:inline-size;padding-top:24px}
/* Upright CRT: a tapered top casing behind the face and a recessed curved glass. */
dawcade-arcade .arc-housing{position:relative;z-index:2;width:88%;margin:auto;padding:4.3% 4% 0;border:1px solid #62635d;border-radius:17px 17px 25px 25px;background:linear-gradient(115deg,#555650,#343632 24%,#282a27 75%,#41433e);box-shadow:inset 2px 2px 2px #bfc1ad44,inset -5px -3px 6px #10120d,0 10px 0 #171a17,0 12px 0 #4b4c44,0 25px 25px #0009}
dawcade-arcade .arc-tube-top{position:absolute;left:1%;right:1%;top:-30px;height:40px;background:repeating-linear-gradient(90deg,transparent 0 5px,#11151099 6px 8px,transparent 9px 12px),linear-gradient(#292c27,#555850);clip-path:polygon(9% 0,91% 0,100% 100%,0 100%);border-radius:15px 15px 0 0;z-index:-1}
dawcade-arcade .arc-bezel{padding:3.7%;border-radius:9% / 8%;background:linear-gradient(145deg,#111410,#22251f 40%,#4b4e42);box-shadow:inset 6px 7px 10px #000a,inset -2px -2px 1px #74786966,0 1px 1px #a3a69644}
dawcade-arcade .arc-screen{position:relative;aspect-ratio:16/9;background:radial-gradient(ellipse,#152021,#020607 80%);border-radius:8% / 7%;overflow:hidden;box-shadow:inset 0 0 22px #000,0 0 2px #000}
dawcade-arcade .arc-screen:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:4;border-radius:inherit;box-shadow:inset 0 0 20px 4px #000a;background:radial-gradient(ellipse at 15% 5%,#f5ffed20,transparent 42%),linear-gradient(125deg,#fff1,transparent 28%),repeating-linear-gradient(0deg,#0001 0 1px,transparent 1px 3px)}
dawcade-arcade .arc-media{position:absolute;inset:0;display:flex;align-items:center;transition:opacity .18s,transform .25s;transform-origin:center}
dawcade-arcade .arc-media img,dawcade-arcade .arc-media video{display:block;width:100%;height:100%;object-fit:contain}
dawcade-arcade .arc-screen.off .arc-media{opacity:0;transform:scaleY(.015)}dawcade-arcade .arc-screen.off:before{content:'';position:absolute;left:13%;right:13%;height:1px;top:50%;background:#c5dcbb;box-shadow:0 0 12px #d1ffb966}
dawcade-arcade .arc-hardware-bottom{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 3%;gap:18px}
dawcade-arcade .arc-speaker{width:30%;height:15px;background:repeating-linear-gradient(0deg,#10120e 0 2px,#71756833 2px 3px,transparent 3px 5px)}
dawcade-arcade .arc-power i{display:block;width:5px;height:5px;border-radius:50%;background:#bbdf85;box-shadow:0 0 5px #a7e074}
dawcade-arcade .arc-screw{position:absolute;width:5px;height:5px;border-radius:50%;background:linear-gradient(135deg,#8e9283,#181b16);box-shadow:0 0 0 1px #20231c}
dawcade-arcade .arc-screw:after{content:'';position:absolute;top:2px;left:1px;width:3px;height:1px;background:#141710;transform:rotate(-30deg)}
dawcade-arcade .arc-screw.tl{left:10px;top:12px}dawcade-arcade .arc-screw.tr{right:10px;top:12px}dawcade-arcade .arc-screw.bl{left:14px;bottom:15px}dawcade-arcade .arc-screw.br{right:14px;bottom:15px}
/* Desk plane. Devices are independent solids, each with the same elevated view. */

dawcade-arcade .arc-front-bay{position:absolute;left:36%;top:9%;width:28%;height:32%;z-index:3}
dawcade-arcade .arc-dock-base{position:absolute;inset:0;background:linear-gradient(145deg,#62645b,#3d4037 55%,#2a2e25);border:1px solid #77796c;border-radius:6px;transform:perspective(700px) rotateX(38deg);box-shadow:inset 1px 1px 1px #d2d4be44,0 9px 0 #22261e,0 10px 0 #4e5244,0 18px 12px #0008}
dawcade-arcade .arc-socket{position:absolute;width:64%;height:100%;left:18%;bottom:0;isolation:isolate;overflow:visible;clip-path:none}
dawcade-arcade .arc-socket:before{content:'';position:absolute;left:-5%;width:110%;height:18%;bottom:17%;border:2px solid #797c6b;background:#050704;border-radius:50% / 25%;transform:perspective(500px) rotateX(38deg);box-shadow:0 2px 0 #a4a58c44;z-index:0}
dawcade-arcade .arc-docked{position:absolute;display:block;width:90%;height:auto;left:5%;bottom:24%;transform:none;filter:drop-shadow(3px 3px 2px #0008);z-index:1}dawcade-arcade .arc-docked[hidden]{display:none}
dawcade-arcade .arc-slot-mouth{position:absolute;left:-3%;right:-3%;bottom:16%;height:7%;border-top:2px solid #868974;background:linear-gradient(#44483b,#24291e);box-shadow:0 4px 3px #1118;z-index:2}

dawcade-arcade .arc-story{padding-top:86px;min-width:0;text-align:center}dawcade-arcade .arc-category{font-size:11px;color:var(--arc-accent);letter-spacing:2px;text-transform:uppercase;display:flex;justify-content:center;align-items:center;gap:10px;margin-bottom:14px}dawcade-arcade .arc-category:before{content:'';width:18px;height:2px;background:var(--arc-accent)}dawcade-arcade .arc-story h3{font-size:clamp(30px,3.2vw,47px);font-weight:700;line-height:1;letter-spacing:-1px;margin:0 0 15px}dawcade-arcade .arc-tagline{font-size:19px;line-height:1.4;color:#dbdce9;margin:0 0 15px}dawcade-arcade .arc-description{font-size:15px;color:#989eb5;line-height:1.75;margin:0 0 22px}dawcade-arcade .arc-features{display:flex;flex-wrap:wrap;gap:7px;list-style:none;margin:0;padding:0}dawcade-arcade .arc-features li{font-size:11px;line-height:1.5;padding:6px 10px;background:#8992ba0a;border:1px solid #888eb927;border-radius:3px;color:#bac2d6}dawcade-arcade .arc-status{margin-top:22px;color:#737c96;font-size:10px;letter-spacing:1px;text-transform:uppercase}dawcade-arcade .arc-status:before{content:'●';color:#93d5b0;margin-right:8px;font-size:8px}dawcade-arcade .arc-library{position:relative;margin-top:16px;border-top:1px solid var(--arc-line);padding-top:22px}dawcade-arcade .arc-library-top{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 12px}dawcade-arcade .arc-library-title{font-size:11px;letter-spacing:2px;text-transform:uppercase;display:flex;gap:14px;align-items:center}dawcade-arcade .arc-library-title small{font-size:10px;color:#65708d;letter-spacing:1px}dawcade-arcade .arc-library-actions{display:flex;gap:8px;align-items:center}dawcade-arcade .arc-library-actions button{background:#161b2a;border:1px solid #41465f;border-radius:5px;min-width:32px;height:30px;color:#aab3ca;font-size:14px}dawcade-arcade .arc-library-actions .arc-auto{font-size:10px;letter-spacing:1px;padding:0 10px;margin-right:7px}dawcade-arcade .arc-library-actions .arc-auto[aria-pressed=true]{color:#d9e9a5;border-color:#738362}dawcade-arcade .arc-shelf{display:flex;gap:23px;overflow-x:auto;overflow-y:hidden;padding:31px 20px 24px;scrollbar-width:thin;scrollbar-color:#555066 #0c0c15;overscroll-behavior-x:contain;touch-action:pan-x pan-y;cursor:grab;scroll-behavior:auto}dawcade-arcade .arc-shelf.dragging{cursor:grabbing}dawcade-arcade .arc-cart{position:relative;flex:0 0 143px;background:none;padding:0 0 8px;color:#9ba2b9;display:flex;flex-direction:column;align-items:center;gap:11px;user-select:none;-webkit-user-select:none;transition:color .2s}dawcade-arcade .arc-cart img{width:100%;height:165px;object-fit:contain;pointer-events:none;transform:perspective(600px) rotateY(-10deg) rotateZ(-3deg);transition:transform .25s,filter .25s,opacity .25s;filter:drop-shadow(5px 10px 7px #0007)}dawcade-arcade .arc-cart:nth-child(2n) img{transform:perspective(600px) rotateY(10deg) rotateZ(3deg)}dawcade-arcade .arc-cart:hover img,dawcade-arcade .arc-cart:focus-visible img{transform:translateY(-9px) rotateZ(0);filter:drop-shadow(0 10px 15px #9689e94d)}dawcade-arcade .arc-cart[aria-pressed=true] img{opacity:.35;transform:translateY(-4px) rotateZ(0)}dawcade-arcade .arc-cart[aria-pressed=true]{color:#ede5ff}dawcade-arcade .arc-cart[aria-pressed=true]:after{content:'';position:absolute;height:2px;width:29px;bottom:0;background:#bdabeb;box-shadow:0 0 10px #a08fcd}dawcade-arcade .arc-cart span{font-size:12px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}dawcade-arcade .arc-hint{text-align:center;color:#69718b;font-size:11px;margin:14px 0 0;letter-spacing:.5px}dawcade-arcade .arc-error{color:#ffbb97;text-align:center;padding:20px}.arc-flight{position:fixed;z-index:9999;pointer-events:none;object-fit:contain;filter:drop-shadow(0 14px 12px #0008);transform-origin:top left}.arc-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#features:has(dawcade-arcade){padding-bottom:76px;border-top:0}#features:has(dawcade-arcade) .features-transition{margin-bottom:30px}

dawcade-arcade .arc-story{padding-top:0;transition:opacity .16s}#features:has(dawcade-arcade){gap:0}
@media(max-width:1000px){dawcade-arcade .arc-scene{gap:28px;grid-template-columns:minmax(0,1.7fr) minmax(220px,1fr)}dawcade-arcade .arc-description{font-size:14px}dawcade-arcade .arc-tagline{font-size:17px}}
@media(max-width:720px){dawcade-arcade{width:100%}dawcade-arcade .arc-scene{grid-template-columns:1fr;gap:28px;padding:26px 0 30px}dawcade-arcade .arc-intro{font-size:14px;margin:0 auto 10px;max-width:280px}dawcade-arcade .arc-story{padding:0 6px}dawcade-arcade .arc-story h3{font-size:34px}dawcade-arcade .arc-description{line-height:1.65}dawcade-arcade .arc-hardware-bottom{height:30px}dawcade-arcade .arc-tube-top{top:-24px;height:32px}dawcade-arcade .arc-library-title{font-size:10px;letter-spacing:1px}dawcade-arcade .arc-library-title small{display:none}dawcade-arcade .arc-library-top{padding:0 6px}dawcade-arcade .arc-shelf{gap:18px;padding:25px 10px 18px}dawcade-arcade .arc-cart{flex-basis:113px}dawcade-arcade .arc-cart img{height:130px}dawcade-arcade .arc-cart span{font-size:11px}#features:has(dawcade-arcade){padding-left:16px;padding-right:16px;padding-bottom:48px}}
@media(prefers-reduced-motion:reduce){dawcade-arcade *,dawcade-arcade *:before,dawcade-arcade *:after{transition:none!important;animation:none!important}.arc-flight{display:none}}

#features:has(dawcade-arcade) > .feature-block{margin-top:110px}dawcade-arcade .arc-slot-mouth{height:4%;bottom:16%}

dawcade-arcade .arc-cart[hidden]{display:none}
dawcade-arcade .arc-media{overflow:hidden}
dawcade-arcade .arc-media img.arc-display-overlay{position:absolute;object-fit:fill}

/* One stable display; cartridge changes never resize the scene. */
dawcade-arcade .arc-scene{grid-template-columns:minmax(0,3fr) minmax(220px,1fr);align-items:start;gap:40px;padding:25px 0 12px}
dawcade-arcade .arc-housing{width:96%;z-index:4;margin-bottom:calc(10cqw + 24px);padding:3% 3% 0;border-radius:16px 16px 22px 22px}
dawcade-arcade .arc-bezel{padding:2%;border-radius:18px}
dawcade-arcade .arc-screen{aspect-ratio:16/9;border-radius:12px}
dawcade-arcade .arc-screen:after{box-shadow:inset 0 0 9px #0006;background:linear-gradient(130deg,#ffffff09,transparent 35%)}
dawcade-arcade .arc-media{justify-content:center}
dawcade-arcade .arc-panel-frame{position:relative;flex:none;overflow:hidden;max-height:100%}
dawcade-arcade .arc-story{padding-top:65px;min-height:330px}
dawcade-arcade .arc-story h3{font-size:36px}
dawcade-arcade .arc-description{font-size:15px;line-height:1.65}

dawcade-arcade .arc-front-bay{left:50%;top:auto;bottom:-10cqw;width:23%;height:9cqw;transform:translateX(-50%);z-index:5}
dawcade-arcade .arc-dock-base{transform:perspective(700px) rotateX(25deg);border-radius:8px}
dawcade-arcade .arc-socket{left:13%;width:74%;bottom:0}
dawcade-arcade .arc-socket:before{bottom:24%;height:15%;border-radius:4px;transform:none}
dawcade-arcade .arc-cartridge-well{position:absolute;left:-75%;right:-75%;bottom:25%;height:260%;overflow:hidden;z-index:1}
dawcade-arcade .arc-docked{width:36%;left:32%;bottom:-13%;filter:drop-shadow(2px 3px 2px #0009)}
dawcade-arcade .arc-slot-mouth{left:-6%;right:-6%;bottom:12%;height:15%;border-top:3px solid #90917f;border-radius:2px;background:linear-gradient(#53574a,#292d25);box-shadow:0 3px 3px #0007;z-index:2}

dawcade-arcade .arc-library{margin-top:22px;padding-top:16px}
dawcade-arcade .arc-library-top{padding:0;gap:12px}
dawcade-arcade .arc-hint{margin:0;font-size:13px;color:#a5aab6;letter-spacing:0}
dawcade-arcade .arc-lane{min-width:0;margin-top:24px}
dawcade-arcade .arc-lane-heading{display:flex;align-items:baseline;gap:14px;padding-bottom:4px}
dawcade-arcade .arc-lane-heading h3{font:700 20px ArcadeConsole,Arial,sans-serif;margin:0;color:#ecedf6}
dawcade-arcade .arc-lane-heading span{font-size:12px;color:#858d9c}
dawcade-arcade .arc-shelf{position:relative;gap:20px;padding:14px 6px 12px;scrollbar-color:#6b6c61 #141613}
dawcade-arcade .arc-cart{flex-basis:104px;gap:8px;padding-bottom:10px}
dawcade-arcade .arc-cart img,dawcade-arcade .arc-cart:nth-child(2n) img{height:120px;transform:none;filter:drop-shadow(0 5px 3px #0006)}
dawcade-arcade .arc-cart:hover img,dawcade-arcade .arc-cart:focus-visible img{transform:translateY(-5px)}
dawcade-arcade .arc-cart[aria-pressed=true] img{opacity:1;transform:translateY(-3px);filter:drop-shadow(0 0 6px #d5c18455)}
dawcade-arcade .arc-cart[aria-pressed=true]:after{background:#d5c184;box-shadow:none}
@media(max-width:1000px){dawcade-arcade .arc-scene{grid-template-columns:minmax(0,2.5fr) minmax(200px,1fr);gap:24px}dawcade-arcade .arc-story{padding-top:35px}dawcade-arcade .arc-story h3{font-size:30px}dawcade-arcade .arc-description{font-size:14px}}
@media(max-width:720px){dawcade-arcade .arc-scene{grid-template-columns:1fr;gap:18px;padding:20px 0 0}dawcade-arcade .arc-story{padding:0 4px;min-height:235px}dawcade-arcade .arc-story h3{font-size:30px;margin-bottom:10px}dawcade-arcade .arc-category{margin-bottom:8px}dawcade-arcade .arc-tagline{font-size:16px;margin-bottom:10px}dawcade-arcade .arc-description{margin-bottom:0}dawcade-arcade .arc-hardware-bottom{height:24px}dawcade-arcade .arc-cartridge-well{height:290%}dawcade-arcade .arc-docked{bottom:-12%}dawcade-arcade .arc-shelf{gap:16px}dawcade-arcade .arc-cart{flex-basis:88px}dawcade-arcade .arc-cart img,dawcade-arcade .arc-cart:nth-child(2n) img{height:102px}dawcade-arcade .arc-library{margin-top:18px}dawcade-arcade .arc-lane{margin-top:20px}}

/* Instruments above the console; FX below the TV and description. */
dawcade-arcade .arc-library{margin-top:0;padding-top:0;border-top:0;border-bottom:1px solid var(--arc-line);padding-bottom:24px;margin-bottom:30px}
@media(max-width:720px){dawcade-arcade .arc-library{margin-top:0;padding-bottom:18px;margin-bottom:24px}}

/* The title follows the complete TV scene. */
#features:has(dawcade-arcade) .features-transition{width:100%;margin:38px 0 24px}
dawcade-arcade .arc-library > .arc-lane:first-child{margin-top:0}
@media(max-width:720px){#features:has(dawcade-arcade) .features-transition{margin:28px 0 22px}}

/* Keep the scrollbar gutter stable; reveal only during manual scrolling. */
dawcade-arcade .arc-shelf{scrollbar-color:transparent transparent}
dawcade-arcade .arc-shelf.scrolling{scrollbar-color:#6b6c61 transparent}
dawcade-arcade .arc-shelf::-webkit-scrollbar{height:6px;background:transparent}
dawcade-arcade .arc-shelf::-webkit-scrollbar-track{background:transparent}
dawcade-arcade .arc-shelf::-webkit-scrollbar-thumb{background:transparent;border-radius:3px}
dawcade-arcade .arc-shelf.scrolling::-webkit-scrollbar-thumb{background:#6b6c61}

/* Leave both shelves interactive while a cartridge travels to the socket. */
dawcade-arcade > .arc-fx-lane{margin-top:28px}
dawcade-arcade .arc-cart.in-flight img{opacity:.2}
@media(max-width:720px){dawcade-arcade > .arc-fx-lane{margin-top:24px}}