:root{font-family:Arial,Helvetica,sans-serif;color:#151515;background:#fff}*{box-sizing:border-box}body{margin:0;overflow:hidden}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #4a8df0;outline-offset:3px}.viewport{position:fixed;inset:0;overflow:hidden;touch-action:none;cursor:grab;background:#fff}.viewport.dragging{cursor:grabbing}.canvas{position:absolute;width:1600px;height:1150px;transform-origin:0 0;background-color:#fff;background-image:radial-gradient(#ddd 1px,transparent 1px);background-size:20px 20px;box-shadow:0 0 0 1px #efefef}.canvas-header{position:absolute;top:28px;left:45px;right:45px;display:flex;justify-content:space-between;align-items:center}.mark{font-weight:800;letter-spacing:-.06em;font-size:23px}.canvas-dot{width:28px;height:28px;border-radius:50%;background:#d9d9d9}.tool-dock{position:absolute;left:55px;top:440px;display:grid;gap:10px;z-index:2}.tool-dock span{display:grid;place-items:center;width:38px;height:38px;background:#fff;border:1px solid #e7e7e7;border-radius:8px;box-shadow:0 2px 10px #0001;font-size:17px;font-weight:bold}.tool-dock span:last-child{background:#092653;color:#8bc4ff}.hero{position:absolute;top:490px;left:345px;text-align:center;width:900px}.hero h1{font-size:65px;letter-spacing:-.08em;line-height:1;margin:0 0 16px;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:900;text-shadow:3px 3px 0 #b4b4b4;white-space:nowrap}.role-tags,.chips{display:flex;justify-content:center;gap:5px}.role-tags span,.chips span{border-radius:10px;font-size:12px;line-height:1;padding:4px 9px;background:#ffe6a4}.role-tags span:nth-child(2),.chips span:nth-child(2){background:#b8f5c3}.role-tags span:nth-child(3),.chips span:nth-child(3){background:#b4dbf9}.project-card{position:absolute;width:220px;background:#fff;padding:12px;border:1px solid transparent;border-radius:10px;transition:transform .18s ease,box-shadow .18s ease}.project-card:hover,.project-card:focus-visible{transform:translateY(-5px) rotate(0deg)!important;box-shadow:0 12px 32px #0002}.project-card img{display:block;width:100%;height:160px;object-fit:cover;border-radius:5px;background:#e9e9e9}.project-card small{display:block;margin:9px 0 4px;font-size:10px;color:#777}.project-card strong{display:block;font-size:14px;white-space:nowrap}.project-card .chips{justify-content:flex-start;margin-top:8px}.project-card .chips span{font-size:8px;padding:3px 5px}.project-card .chips span:first-child{background:#f9f39a}.project-card .chips span:last-child{background:#d3a7fa}.ux-card{left:260px;top:125px;transform:rotate(-2deg)}.branding-card{left:1290px;top:510px;transform:rotate(2deg)}.floating{position:absolute;filter:drop-shadow(3px 8px 5px #0002);transition:transform .2s;user-select:none}.floating:hover{transform:translateY(-10px) rotate(12deg)}.controller{top:290px;left:1000px;font-size:82px;transform:rotate(-18deg)}.racket{top:290px;left:1270px;font-size:70px;transform:rotate(16deg)}.shoes{top:320px;left:1440px;font-size:60px}.backpack{top:665px;left:555px;font-size:85px}.laptop{top:670px;left:745px;font-size:84px;transform:rotate(-20deg)}.about-character{position:absolute;left:300px;top:640px;width:170px;display:grid;text-align:center;transform:rotate(-8deg);transition:transform .18s}.about-character:hover{transform:rotate(0deg) translateY(-5px)}.about-character img{width:145px;height:145px;object-fit:cover;border-radius:50%;filter:grayscale(1)}.about-character span{font-family:cursive;font-size:24px;transform:rotate(-10deg)}.social-dock{position:absolute;left:715px;top:925px;display:flex;gap:10px;background:#fff;padding:9px;border-radius:10px;box-shadow:0 1px 10px #0002}.social-dock a{font-size:21px;font-weight:800;color:#1679c7}.social-dock a:last-child{color:#dd5044}.about-panel{position:absolute;top:1950px;left:390px;width:700px;padding:50px;background:#fff;border:1px solid #ddd;box-shadow:8px 8px 0 #222}.about-panel h2{font-size:36px;margin:0 0 25px}.about-panel p{font-size:20px;line-height:1.6}.about-panel a{display:inline-block;margin-top:12px;border-bottom:2px solid #111}.canvas-controls{position:fixed;right:22px;bottom:22px;z-index:4;display:flex;align-items:center;background:#fff;box-shadow:0 3px 20px #0002;border:1px solid #e9e9e9;border-radius:9px;overflow:hidden}.canvas-controls button{border:0;background:#fff;width:40px;height:40px}.canvas-controls button:hover{background:#eee}.canvas-controls output{font-size:12px;min-width:49px;text-align:center}.hint{position:fixed;left:20px;bottom:15px;color:#555;background:#fffd;padding:8px;font-size:12px}.viewport.loaded .canvas{transition:transform .12s linear}#loader{position:fixed;inset:0;background:#fff;z-index:10;display:grid;place-items:center;transition:opacity .4s}.loader-inner{width:min(320px,75vw);text-align:center}.runner{position:relative;text-align:left;animation:run 1.65s ease-in-out forwards;font-size:29px;width:30px}.track{height:7px;background:#e7e7e7;border-radius:10px}.fill{width:0;height:100%;background:#111;animation:fill 1.65s ease-in-out forwards;border-radius:10px}.loader-inner span{display:block;margin-top:16px;color:#666;font-size:12px}@keyframes fill{to{width:100%}}@keyframes run{to{transform:translateX(calc(min(320px,75vw) - 30px))}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media(max-width:600px){.hint{left:12px;bottom:12px;max-width:170px;line-height:1.35}.canvas-controls{right:12px;bottom:12px}.canvas-controls button{width:44px;height:44px}}

/* Temporary artwork traced from Aaron's phone screenshot, pending clean exports. */
.art{position:absolute;object-fit:contain;filter:drop-shadow(1px 3px 2px #0001);transition:translate .2s}.art:hover{translate:0 -9px}.console{left:660px;top:335px;width:138px}.sports{left:1015px;top:370px;width:188px}.backpack{left:637px;top:685px;width:161px}.tablet{left:795px;top:751px;width:170px}.about-character{left:275px;top:618px;width:252px}.about-character img{width:100%;height:auto;border-radius:0;filter:none}.tool-dock{left:32px;top:462px}.tool-dock img{width:87px;height:auto}.social-dock{left:700px;top:1005px;background:none;box-shadow:none;padding:0;width:200px;height:80px}.social-dock img{width:100%;height:100%;object-fit:contain}.social-dock a{position:absolute;top:14px;width:30%;height:58%;font-size:0}.social-dock a:nth-of-type(1){left:2%}.social-dock a:nth-of-type(2){left:35%}.social-dock a:nth-of-type(3){left:68%}

.runner{height:58px;width:43px;animation:run 1.65s ease-in-out forwards}.runner img{height:60px;width:43px;object-fit:contain;image-rendering:pixelated}

.viewport{background-color:#fff;background-image:radial-gradient(#ddd 1px,transparent 1px);background-size:20px 20px}.canvas{background:transparent;box-shadow:none}

/* Export-backed geometry and canvas details. */
.canvas{height:1137px;background-image:radial-gradient(#e4e4e4 .9px,transparent 1px);background-size:12px 12px}.viewport{background-size:12px 12px}.canvas-header{top:17px;left:52px;right:51px}.mark{font-family:monospace;letter-spacing:-.09em;font-size:25px}.canvas-dot{width:54px;height:54px}.ux-card{left:281px;top:107px;transform:rotate(-2deg)}.branding-card{left:1168px;top:594px;transform:rotate(1.5deg)}.project-card{width:245px;padding:10px;border-radius:12px}.project-card img{height:228px}.project-card strong{font-size:20px;font-weight:400;font-family:monospace}.project-card small{font-size:11px}.project-card .chips span{font-size:11px}.hero{top:532px;left:432px;width:735px}.hero h1{font-family:monospace;font-size:74px;letter-spacing:-.095em;text-shadow:2px 2px 0 #aaa;margin-bottom:19px}.role-tags span{font-size:13px;font-family:monospace;padding:3px 9px}.console{left:666px;top:339px;width:165px}.sports{left:1010px;top:377px;width:88px}.about-character{left:305px;top:635px;width:224px}.backpack{left:661px;top:697px;width:128px}.tablet{left:805px;top:748px;width:135px}.tool-dock{left:36px;top:472px}.social-dock{left:715px;top:1017px}.about-panel{top:1540px}.runner{height:62px;width:45px}.runner img{height:61px;width:45px}.track{height:10px}.loader-inner span{display:none}

/* Real controls, reconstructed where exports have not arrived. */
.tool-dock{left:36px;top:472px;background:#fff;display:grid;gap:5px;width:67px;padding:8px 7px;border:1px solid #eee;border-radius:9px;box-shadow:0 2px 10px #0001}.tool-dock span{border:0;box-shadow:none;border-radius:5px;width:50px;height:47px}.figma-icon{display:grid!important;grid-template-columns:repeat(2,12px);grid-template-rows:repeat(3,12px);align-content:center;justify-content:center;background:#0e0e0e!important;gap:0}.tool-dock .figma-icon i:first-child{background:#f24e1e;border-radius:7px 0 0 7px}.tool-dock .figma-icon i:nth-child(2){background:#ff7262;border-radius:0 7px 7px 0}.tool-dock .figma-icon i:nth-child(3){background:#a259ff;border-radius:7px 0 0 7px}.tool-dock .figma-icon i:nth-child(4){background:#1abcfe;border-radius:50%}.tool-dock .figma-icon i:nth-child(5){background:#0acf83;border-radius:7px 0 7px 7px}.design-icon{font-size:32px!important;color:#d5764b;background:#fff!important;font-weight:400!important}.ps-icon{background:#002b52!important;color:#4fbcff!important;font:700 27px Arial!important}.social-dock{left:702px;top:1032px;width:auto;height:auto;display:flex;gap:12px;padding:9px;background:#fff;box-shadow:0 2px 9px #0002;border:1px solid #eee}.social-dock a{position:static;width:38px;height:38px;display:grid;place-items:center;color:#fff;font-size:25px;line-height:1;font-weight:bold;border-radius:5px}.social-dock .be{background:#096bd8}.social-dock .in{background:#087fb2}.social-dock .mail{background:#fff;border:1px solid #ddd;color:#dc4b3e;font-size:29px}.project-card img{object-fit:contain}.ux-card img{background:#111}.branding-card img{background:#fff}.about-panel{top:2200px}.loader-mark{position:absolute;top:26px;left:4%;font:800 25px monospace;letter-spacing:-.08em}.loader-dot{position:absolute;top:17px;right:4%;width:54px;height:54px;border-radius:50%;background:#ddd}#loader{background-color:#fff;background-image:radial-gradient(#e4e4e4 .9px,transparent 1px);background-size:12px 12px}.loader-inner{width:475px;max-width:75vw;display:grid;gap:52px}.loader-row{position:relative;height:95px}.loader-row .runner{height:62px;width:50px}.loader-row .runner img{height:61px;width:50px}.loader-row .track{height:12px}.loader-row .fill{height:12px}.loader-row:nth-child(2) .runner,.loader-row:nth-child(2) .fill{animation-delay:.08s}@keyframes run{to{transform:translateX(calc(min(475px,75vw) - 50px))}}

.tool-dock .figma-icon i{display:block;width:12px;height:12px;min-width:0;min-height:0;padding:0;border:0;box-shadow:none}
@media(max-width:600px){.canvas-header{top:14px;left:35px;right:35px}.hint{max-width:185px}}
.tool-dock{background:#fff;border-radius:13px;box-shadow:0 4px 16px #0002;width:72px;height:164px}.tool-dock img{width:100%;height:100%}.social-dock{background:#fff;border-radius:15px;box-shadow:0 3px 16px #0002;width:196px;height:68px}.social-dock img{width:100%;height:100%}

/* Aaron's HUD: docks are viewport-locked, separate from the transformed canvas. */
.viewport>.tool-dock{position:fixed;left:24px;top:50%;transform:translateY(-50%);z-index:5;width:72px;height:164px;pointer-events:none}
.viewport>.social-dock{position:fixed;left:50%;top:auto;bottom:22px;transform:translateX(-50%);z-index:5;width:196px;height:68px;pointer-events:none}
.viewport>.social-dock a{pointer-events:auto}
@media(max-width:600px){.viewport>.tool-dock{left:8px;width:49px;height:112px}.viewport>.social-dock{bottom:14px;width:150px;height:53px}.canvas-controls{bottom:76px}.hint{bottom:74px;max-width:145px}}

/* Small viewport-locked docks, full art inside the tool card. */
.viewport>.tool-dock{left:15px;width:49px;height:139px;background:none;border:0;border-radius:0;box-shadow:none}.viewport>.tool-dock img{width:100%;height:100%;object-fit:fill}.viewport>.social-dock{bottom:19px;width:143px;height:50px;background:none;border:0;border-radius:0;box-shadow:none}.viewport>.social-dock img{width:100%;height:100%;object-fit:fill}
@media(max-width:600px){.viewport>.tool-dock{left:7px;width:40px;height:113px}.viewport>.social-dock{bottom:14px;width:128px;height:45px}.canvas-controls{bottom:67px}.hint{bottom:67px}}

.viewport>.tool-dock{background:#fff;border-radius:9px;box-shadow:0 2px 10px #0002;overflow:hidden}.viewport>.social-dock{background:#fff;border-radius:10px;box-shadow:0 2px 10px #0002;overflow:hidden}

/* Reserve a real bottom safe region for browser chrome and OS bars. */
.viewport>.social-dock{bottom:max(48px, env(safe-area-inset-bottom, 0px) + 28px)}
@media(max-width:600px){.viewport>.social-dock{bottom:max(42px, env(safe-area-inset-bottom, 0px) + 24px)}.canvas-controls{bottom:max(100px, env(safe-area-inset-bottom, 0px) + 82px)}.hint{bottom:max(100px, env(safe-area-inset-bottom, 0px) + 82px)}}

/* Fixed, export-matched top navigation. */
.viewport>.canvas-header{position:fixed;top:0;left:0;right:0;height:76px;padding:0 max(28px, 4vw);z-index:6;background:#f7f7f7;display:flex;align-items:center;justify-content:space-between;box-shadow:0 1px 0 #ececec}
.viewport>.canvas-header .mark{font-family:monospace;font-size:25px;font-weight:900;letter-spacing:-.1em;image-rendering:pixelated}
.viewport>.canvas-header .canvas-dot{width:54px;height:54px;background:#dcdcdc;flex:none}
.viewport>.social-dock{bottom:max(105px, env(safe-area-inset-bottom, 0px) + 85px)}
@media(max-width:600px){.viewport>.canvas-header{height:58px;padding:0 18px}.viewport>.canvas-header .mark{font-size:19px}.viewport>.canvas-header .canvas-dot{width:38px;height:38px}.viewport>.social-dock{bottom:max(72px, env(safe-area-inset-bottom, 0px) + 54px)}.canvas-controls{bottom:max(132px, env(safe-area-inset-bottom, 0px) + 112px)}.hint{bottom:max(132px, env(safe-area-inset-bottom, 0px) + 112px)}}

/* Locally hosted typefaces: no runtime dependency on Google Fonts. */
@font-face{font-family:"Jersey 10";src:url("./assets/jersey-10.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("./assets/jetbrains-mono-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("./assets/jetbrains-mono-700.ttf") format("truetype");font-weight:700;font-display:swap}
:root{font-family:"JetBrains Mono",monospace}
.viewport>.canvas-header .mark,.loader-mark,.hero h1,.about-panel h2{font-family:"Jersey 10",monospace;font-weight:400;letter-spacing:0}
.hero h1{font-size:94px;letter-spacing:0;text-shadow:2px 2px 0 #aaa}
.viewport>.canvas-header .mark,.loader-mark{font-size:37px;letter-spacing:0}
.project-card strong,.role-tags span,.chips span,.about-panel,.canvas-controls,.hint{font-family:"JetBrains Mono",monospace}
@media(max-width:600px){.viewport>.canvas-header .mark{font-size:29px}}

@font-face{font-family:"JetBrains Mono";src:url("./assets/jetbrains-mono-500.ttf") format("truetype");font-weight:500;font-display:swap}

/* Lift movable canvas objects without shifting the fixed HUD. */
.canvas .project-card,.canvas .art,.canvas .about-character,.canvas .hero,.canvas .about-panel{cursor:grab;touch-action:none;user-select:none}
.canvas .picked-up,.canvas .project-card.picked-up,.canvas .about-character.picked-up,.canvas .art.picked-up{cursor:grabbing;transform:rotate(-2deg) scale(1.08)!important;filter:drop-shadow(10px 18px 15px #0005)!important;transition:none!important;will-change:left,top,transform}
.viewport.item-dragging{cursor:grabbing}

/* Three full-size transparent hit targets directly over the exported dock artwork. */
.viewport>.social-dock{isolation:isolate}
.viewport>.social-dock img{pointer-events:none}
.viewport>.social-dock a,.viewport>.social-dock .be,.viewport>.social-dock .in,.viewport>.social-dock .mail{position:absolute!important;top:4%!important;width:31%!important;height:92%!important;display:block!important;z-index:2;background:transparent!important;border:0!important;color:transparent!important;cursor:pointer;pointer-events:auto}
.viewport>.social-dock .be{left:1%!important}.viewport>.social-dock .in{left:34%!important}.viewport>.social-dock .mail{left:67%!important}
/* A lighter fixed top bar with matched horizontal rhythm. */
.viewport>.canvas-header{height:64px;padding:0 max(24px, 4vw);background:#f7f7f7;box-shadow:none}
.viewport>.canvas-header .canvas-dot{width:44px;height:44px}
@media(max-width:600px){.viewport>.canvas-header{height:56px;padding:0 18px}.viewport>.canvas-header .canvas-dot{width:36px;height:36px}}

/* Stable viewport dots are not resampled with the transformed canvas. */
.viewport{background-color:#fff;background-image:radial-gradient(circle,#d7d7d7 .8px,transparent 1.2px);background-size:13px 13px}
.canvas{background-image:none!important;background-color:transparent!important}
/* Exact-size navigation, designed as HTML rather than a stretched screenshot. */
.viewport>.canvas-header{height:clamp(58px,5.375vw,86px);padding-inline:3.25vw}
.viewport>.canvas-header .mark{font-size:clamp(29px,2.5vw,40px)}
.viewport>.canvas-header .canvas-dot{width:clamp(38px,3.5vw,56px);height:clamp(38px,3.5vw,56px)}
/* Compact single-runner loading animation. */
.loader-inner{width:min(330px,67vw);max-width:67vw;gap:0}.loader-row{height:70px}.loader-row .runner{height:45px;width:33px}.loader-row .runner img{height:45px;width:33px}.loader-row .track,.loader-row .fill{height:7px}@keyframes run{to{transform:translateX(calc(min(330px,67vw) - 33px))}}
/* Crisp semantic docks, not scaled bitmap assets. */
.viewport>.tool-dock{width:52px;height:140px;left:15px;padding:8px 7px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;border:1px solid #ebebeb;overflow:visible;background:#fff;border-radius:13px;box-shadow:0 3px 14px #0002;pointer-events:none}
.viewport>.tool-dock>span{display:grid;place-items:center;width:36px;height:36px;flex:none;border-radius:6px;padding:0;box-shadow:none;border:0}
.viewport>.tool-dock .figma-icon{grid-template-columns:repeat(2,7px);grid-template-rows:repeat(3,7px);align-content:center;justify-content:center;background:#111!important;gap:0}
.viewport>.tool-dock .figma-icon i{width:7px;height:7px;border:0;padding:0;box-shadow:none}
.viewport>.tool-dock .figma-icon i:nth-child(1){background:#f24e1e;border-radius:5px 0 0 5px}.viewport>.tool-dock .figma-icon i:nth-child(2){background:#ff7262;border-radius:0 5px 5px 0}.viewport>.tool-dock .figma-icon i:nth-child(3){background:#a259ff;border-radius:5px 0 0 5px}.viewport>.tool-dock .figma-icon i:nth-child(4){background:#1abcfe;border-radius:50%}.viewport>.tool-dock .figma-icon i:nth-child(5){background:#0acf83;border-radius:5px 0 5px 5px}
.viewport>.tool-dock .claude-icon{background:#fff}.viewport>.tool-dock .claude-icon svg{width:28px;height:28px}.viewport>.tool-dock .ps-icon{background:#002b52!important;color:#51bcff!important;font:700 20px Arial!important}
.viewport>.social-dock{width:150px;height:48px;padding:4px 5px;display:flex;gap:6px;align-items:center;justify-content:space-between;overflow:visible;background:#fff;border:1px solid #ececec;border-radius:12px;box-shadow:0 3px 14px #0002;pointer-events:auto}
.viewport>.social-dock>a,.viewport>.social-dock .be,.viewport>.social-dock .in,.viewport>.social-dock .mail{position:static!important;display:grid!important;place-items:center;width:40px!important;height:40px!important;flex:none;top:auto!important;left:auto!important;padding:0;border-radius:5px;z-index:2;cursor:pointer;color:white!important;font:700 23px Arial!important;line-height:1;background:#1879df!important;pointer-events:auto}
.viewport>.social-dock .in{background:#0877a7!important;font-size:24px!important}.viewport>.social-dock .mail{background:white!important}.viewport>.social-dock .mail svg{width:25px;height:19px}.viewport>.social-dock img{display:none}
/* Playful removable-by-drag stickers. */
.canvas .sticker{position:absolute;z-index:3;display:grid;place-items:center;cursor:grab;touch-action:none;user-select:none;font-family:"Jersey 10",monospace;filter:drop-shadow(2px 4px 2px #0002)}
.sticker-star{left:535px;top:438px;width:45px;height:45px;color:#f1aa28;font-size:55px;transform:rotate(-17deg)}
.sticker-smile{left:1075px;top:706px;width:55px;height:55px;border:3px solid #262626;background:#ffcf5b;border-radius:50%;font-size:46px;transform:rotate(13deg)}
.sticker-arrow{left:1225px;top:355px;width:48px;height:48px;color:#d36c9a;font-size:58px;transform:rotate(-8deg)}
.canvas .sticker.picked-up{transform:scale(1.15) rotate(-8deg)!important;filter:drop-shadow(8px 13px 6px #0004)}
.project-card{background:#fff;border:1px solid #e7e7e7;box-shadow:0 4px 15px #0001;padding:8px 8px 12px;border-radius:8px}.project-card img{object-fit:cover;border-radius:5px;height:200px}
.ux-card img,.branding-card img{background:#eee}
@media(max-width:600px){.viewport>.canvas-header{padding-inline:18px}.viewport>.tool-dock{left:6px;width:43px;height:120px;padding:6px 4px}.viewport>.tool-dock>span{width:33px;height:33px}.viewport>.social-dock{width:139px;height:45px;padding:3px 4px;gap:4px}.viewport>.social-dock>a,.viewport>.social-dock .be,.viewport>.social-dock .in,.viewport>.social-dock .mail{width:38px!important;height:38px!important}}

/* Aaron's chosen camera, headset and coffee cup as movable pixel stickers. */
.canvas .pixel-sticker{width:67px;height:67px;background:#fff;border:4px solid #fff;border-radius:13px;box-shadow:0 3px 1px #262626,0 6px 15px #0002;font-family:"Noto Color Emoji",sans-serif;image-rendering:pixelated;line-height:1}
.canvas .pixel-sticker span{font-size:43px;filter:drop-shadow(2px 2px 0 #222);image-rendering:pixelated}
.sticker-camera{left:520px;top:428px;transform:rotate(-12deg)}
.sticker-headset{left:1070px;top:860px;transform:rotate(12deg)}
.sticker-coffee{left:1250px;top:345px;transform:rotate(-9deg)}

.canvas .pixel-sticker img{display:block;width:49px;height:49px;object-fit:contain;image-rendering:pixelated;pointer-events:none}

/* Prototype: grid lives in viewport coordinates but follows the canvas transform.
   Each dot is redrawn at the new zoom instead of scaling a bitmap. */
.viewport{background-image:radial-gradient(circle,#d7d7d7 var(--dot-radius,.9px),transparent calc(var(--dot-radius,.9px) + .35px));background-repeat:repeat}
.canvas .project-card,.canvas .art,.canvas .about-character,.canvas .hero,.canvas .sticker{transition-property:box-shadow,filter,transform,translate!important;transition-duration:.2s!important}
.canvas .picked-up{transition:none!important}
@media(prefers-reduced-motion:reduce){.canvas .project-card,.canvas .art,.canvas .about-character,.canvas .hero,.canvas .sticker{transition:none!important}}

/* Original tiny platformer, launched from the console artwork. */
.canvas .console{cursor:pointer}.game-shell[hidden]{display:none}.game-shell{position:fixed;inset:0;z-index:30;display:grid;place-items:center;background:#151b2dbb;padding:16px;font-family:"JetBrains Mono",monospace}.game-panel{width:min(940px,100%);background:#fff;border:3px solid #171923;border-radius:16px;box-shadow:12px 12px 0 #14161b;overflow:hidden}.game-top{display:flex;align-items:center;gap:16px;padding:10px 16px;background:#f5f4ef}.game-top strong{font-family:"Jersey 10";font-size:30px;font-weight:400}.game-top span{margin-left:auto;font-size:13px}.game-top button{border:0;background:#1a1a23;color:white;width:36px;height:36px;border-radius:6px;font-size:26px}.game-panel canvas{display:block;width:100%;aspect-ratio:900 / 440;image-rendering:pixelated;background:#e4f3ff}.game-help{text-align:center;padding:8px;font-size:12px}.game-touch{display:flex;justify-content:center;gap:24px;padding:0 12px 12px}.game-touch button{width:52px;height:48px;border:2px solid #222;background:#fff;border-radius:8px;font-size:22px;touch-action:none}.game-touch button:last-child{margin-left:20px;background:#ffcf5b}@media(max-width:600px){.game-top strong{font-size:24px}.game-top span{font-size:10px}.game-help{font-size:10px;line-height:1.4}}

/* Spaced planetary composition: preserve the central title and dock positions. */
.ux-card{left:155px;top:56px}.branding-card{left:1370px;top:760px}.console{left:660px;top:215px}.sports{left:1260px;top:265px}.about-character{left:178px;top:690px}.backpack{left:585px;top:790px}.tablet{left:955px;top:865px}.sticker-camera{left:540px;top:290px}.sticker-coffee{left:1470px;top:245px}.sticker-headset{left:1200px;top:950px}
.game-panel{position:relative}.game-menu[hidden]{display:none}.game-menu{position:absolute;z-index:3;inset:60px 0 70px;display:grid;place-items:center;background:#17152bd9;color:white}.game-menu-card{width:min(460px,90%);padding:28px;text-align:center;border:3px solid #ffd966;background:#27243d;box-shadow:8px 8px 0 #131120}.game-menu h2{font:400 52px "Jersey 10",monospace;margin:8px 0}.game-menu p{font-size:14px;line-height:1.5}.game-kicker{font-size:12px;color:#ffd966;letter-spacing:.12em}.game-menu button{display:block;margin:18px auto;padding:10px 25px;border:2px solid #191721;background:#ffcd58;color:#1b1824;border-radius:6px;font:400 28px "Jersey 10";cursor:pointer}.game-menu small{font-size:10px;line-height:1.5}.game-touch[hidden]{display:none}@media(max-width:600px){.game-menu{inset:54px 0 60px}.game-menu-card{padding:12px}.game-menu h2{font-size:35px}.game-menu p{font-size:11px;margin:5px}.game-menu button{margin:5px auto;padding:6px 18px}.game-menu small{font-size:9px}}
/* Keep the first project fully visible and the character clear of the mobile dock. */
.ux-card{left:190px;top:175px}
@media(max-width:600px){.ux-card{left:330px;top:205px}.about-character{left:410px;top:725px}.sports{left:1090px;top:300px}.sticker-coffee{left:1125px;top:325px}.branding-card{left:1100px;top:825px}}
@media(max-width:600px){.about-character{left:370px;top:835px}.backpack{left:785px;top:760px}.sticker-camera{left:570px;top:320px}.sticker-coffee{left:1320px;top:300px}}

/* Match the 1600 × 86 export's vertical breathing room in the fixed top bar. */
.viewport>.canvas-header{height:86px;padding-inline:clamp(24px,3.25vw,52px)}
.viewport>.canvas-header .mark{line-height:1}
@media(max-width:600px){.viewport>.canvas-header{height:58px;padding-inline:18px}}
/* In-site case studies preserve the portfolio's pixel type and game panel language. */
.project-shell[hidden]{display:none}.project-shell{position:fixed;inset:0;z-index:28;background:#151b2dd6;display:grid;place-items:center;padding:24px;font-family:'JetBrains Mono',monospace}
.project-panel{width:min(1000px,100%);height:min(90vh,920px);min-height:300px;border:3px solid #171923;border-radius:15px;box-shadow:12px 12px 0 #14161b;background:#f8f8f5;display:flex;flex-direction:column;overflow:hidden}
.project-top{height:62px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:#f7f7f7;border-bottom:3px solid #171923}.project-brand{font:400 29px 'Jersey 10',monospace}.project-top button{width:38px;height:38px;border:0;border-radius:6px;background:#1a1a23;color:white;font-size:27px;line-height:1}
.project-scroll{overflow:auto;overscroll-behavior:contain;scroll-behavior:smooth;flex:1}.project-heading{padding:clamp(25px,6vw,64px);background-color:#fafaf8;background-image:radial-gradient(#ddd .8px,transparent 1px);background-size:15px 15px}.project-heading>span{font-size:12px;color:#694bb9;text-transform:uppercase}.project-heading h2{font:400 clamp(52px,8vw,100px)/.88 'Jersey 10',monospace;max-width:850px;margin:18px 0}.project-heading p{max-width:680px;font-size:15px;line-height:1.7}.project-heading a{display:inline-block;margin-top:13px;color:#26234b;font-size:12px;text-decoration:underline;text-underline-offset:5px}
.project-gallery{max-width:880px;margin:0 auto;padding:28px 24px 50px;display:grid;gap:16px}.project-gallery img{display:block;width:100%;height:auto;background:#1c1c1c;border:2px solid #272632;box-shadow:6px 6px 0 #171923}.project-footer{padding:0 24px 35px;text-align:center}.project-footer button{font:400 28px 'Jersey 10';padding:10px 22px;border:2px solid #171923;background:#ffcd58;cursor:pointer}
@media(max-width:600px){.project-shell{padding:10px}.project-panel{height:calc(100vh - 30px);box-shadow:5px 5px 0 #14161b}.project-top{height:53px;padding:0 12px}.project-brand{font-size:23px}.project-heading{padding:28px 20px}.project-heading h2{font-size:53px}.project-heading p{font-size:12px}.project-gallery{padding:20px 10px 35px;gap:10px}.project-gallery img{box-shadow:3px 3px 0 #171923}}
/* Original handheld-RPG-inspired framing, with no licensed game assets. */
:root{--quest-ink:#25334c;--quest-dark:#17243a;--quest-paper:#f9f4dd;--quest-blue:#b9d8e5;--quest-gold:#efbb59}
.viewport{background-color:#fcf9ec;background-image:radial-gradient(circle,#c8cfca var(--dot-radius,.9px),transparent calc(var(--dot-radius,.9px) + .35px))}
.viewport>.canvas-header{background:var(--quest-paper);border-bottom:4px solid var(--quest-ink);box-shadow:0 4px 0 #90a6a9}.viewport>.canvas-header .canvas-dot{border:4px solid var(--quest-ink);background:var(--quest-blue);box-shadow:inset -5px -5px 0 #8baebd;border-radius:50%}
.viewport>.tool-dock,.viewport>.social-dock{border:3px solid var(--quest-ink);border-radius:3px;background:var(--quest-paper);box-shadow:4px 4px 0 #728b9b}.viewport>.tool-dock{width:55px;height:143px}.viewport>.social-dock{width:153px;height:51px}
.project-card{border:3px solid var(--quest-ink);border-radius:4px;box-shadow:5px 5px 0 #7894a1;background:var(--quest-paper)}.project-card:hover,.project-card:focus-visible{box-shadow:7px 8px 0 #7894a1}.project-card strong:before{content:'▸ ';color:#b4544e}.project-card .chips span,.role-tags span{border-radius:3px;border:1px solid #657785}
.canvas-controls{border:3px solid var(--quest-ink);border-radius:4px;box-shadow:4px 4px 0 #7894a1;background:var(--quest-paper)}.canvas-controls button{background:var(--quest-paper)}.canvas-controls button:hover{background:#e9e1c3}.hint{border:2px solid var(--quest-ink);background:var(--quest-paper);padding:6px 8px;color:var(--quest-ink)}
.project-shell{background:#17243acb}.project-panel,.game-panel{border:4px solid var(--quest-ink);border-radius:5px;box-shadow:10px 10px 0 #101727;background:var(--quest-paper)}.project-top,.game-top{background:var(--quest-blue);border-bottom:4px solid var(--quest-ink)}.project-top button,.game-top button{background:var(--quest-ink);border-radius:2px}.project-heading{background-color:var(--quest-paper);background-image:radial-gradient(#d7d0ac .8px,transparent 1px)}.project-heading>span,.game-kicker{color:#985751}.project-heading h2{color:var(--quest-ink)}.project-heading a{display:inline-block;padding:10px 14px;background:#fff;border:3px solid var(--quest-ink);box-shadow:3px 3px 0 #7894a1;text-decoration:none;color:var(--quest-ink)}.project-heading a:before{content:'▸ ';color:#b4544e}.project-gallery img{border:4px solid var(--quest-ink);box-shadow:5px 5px 0 #7894a1}.project-footer button,.game-menu button{border:3px solid var(--quest-ink);border-radius:2px;box-shadow:4px 4px 0 #7894a1;background:var(--quest-gold);color:var(--quest-ink)}
.game-menu{background:#17243ae5}.game-menu-card{border:5px double var(--quest-ink);background:var(--quest-paper);color:var(--quest-ink);box-shadow:8px 8px 0 #101727}.game-touch button{border:3px solid var(--quest-ink);border-radius:3px;background:var(--quest-paper);box-shadow:3px 3px 0 #7894a1}.game-touch button:last-child{background:var(--quest-gold)}.game-help{background:var(--quest-paper);color:var(--quest-ink)}
@media(max-width:600px){.viewport>.tool-dock{width:44px;height:122px}.viewport>.social-dock{width:141px;height:47px}.hint{max-width:152px;font-size:9px}.project-panel{box-shadow:5px 5px 0 #101727}}
/* Work index: compact category controls and clear return path. */
.project-index[hidden],#project-detail[hidden]{display:none}.header-links{display:flex;gap:22px;font:500 14px 'JetBrains Mono',monospace;margin-left:auto;margin-right:38px}.header-links a{padding:8px 10px;border:2px solid transparent}.header-links a:hover,.header-links a:focus-visible{border-color:var(--quest-ink);background:white}
.index-hero{padding:38px clamp(22px,5vw,64px) 28px;background:var(--quest-paper);background-image:radial-gradient(#d7d0ac .8px,transparent 1px);background-size:15px 15px}.index-hero>span{color:#985751;font-size:11px;letter-spacing:.08em}.index-hero h2{font:400 clamp(56px,8vw,88px)/.9 'Jersey 10';margin:10px 0}.index-hero p{font:400 13px/1.6 'JetBrains Mono';max-width:640px}.index-filters{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.index-filters button{border:3px solid var(--quest-ink);border-radius:2px;background:#fff;color:var(--quest-ink);padding:9px 14px;font:500 12px 'JetBrains Mono';cursor:pointer}.index-filters button[aria-pressed=true]{background:var(--quest-ink);color:#fff;box-shadow:3px 3px 0 #7894a1}.index-filters span{opacity:.68;margin-left:5px}
.index-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:30px clamp(22px,5vw,64px) 65px}.index-card{display:block;border:3px solid var(--quest-ink);background:#fff;box-shadow:5px 5px 0 #7894a1;transition:transform .18s,box-shadow .18s}.index-card:hover,.index-card:focus-visible{transform:translateY(-3px);box-shadow:7px 8px 0 #7894a1}.index-card img{display:block;width:100%;aspect-ratio:1.55;object-fit:cover;background:#1c1c1c}.index-card>div{padding:13px 15px 16px;border-top:3px solid var(--quest-ink);position:relative}.index-card small{display:block;font:400 10px 'JetBrains Mono';color:#985751;text-transform:uppercase}.index-card strong{font:400 31px/.95 'Jersey 10';display:block;margin-top:5px;padding-right:20px}.index-card span{position:absolute;right:14px;bottom:17px;font-size:20px}
@media(max-width:600px){.header-links{gap:4px;margin-right:10px;font-size:10px}.header-links a{padding:5px}.index-hero{padding:27px 18px 19px}.index-hero p{font-size:11px}.index-filters{gap:6px}.index-filters button{font-size:10px;padding:7px 8px}.index-grid{grid-template-columns:1fr;gap:17px;padding:20px 18px 40px}.index-card strong{font-size:29px}}
.game-menu{overflow:auto;padding:14px 0}.game-menu-card{max-height:100%;overflow:auto}.game-leaderboard[hidden]{display:none}.game-leaderboard{border-top:3px solid var(--quest-ink);margin-top:14px;padding-top:8px;text-align:left}.game-leaderboard h3{font:400 31px 'Jersey 10';margin:3px 0}.game-leaderboard p{font:400 10px/1.4 'JetBrains Mono';margin:3px 0}.game-leaderboard strong{font-size:12px}.game-leaderboard ol{font:400 10px/1.5 'JetBrains Mono';columns:2;padding-left:22px}.game-menu .game-leaderboard button{font-size:19px;margin:6px auto}
@media(max-width:600px){.game-menu-card{max-height:100%;overflow:auto}.game-leaderboard ol{columns:1}.game-leaderboard li:nth-child(n+5){display:none}}

/* Mobile interaction pass: readable HUD, obvious game entry, and comfortable touch controls. */
.play-link{background:var(--quest-gold);border:2px solid var(--quest-ink);color:var(--quest-ink);border-radius:2px;padding:7px 12px;font:500 13px 'JetBrains Mono';box-shadow:2px 2px 0 #7894a1}
@media(max-width:600px){
 .viewport>.canvas-header{height:62px;padding:0 12px;gap:7px}.viewport>.canvas-header .mark{font-size:27px;flex:none}
 .header-links{gap:2px;margin:0 0 0 auto;font-size:11px;align-items:center}.header-links a{padding:9px 5px}.play-link{font-size:11px;padding:8px 7px;white-space:nowrap}
 .viewport>.canvas-header .canvas-dot{width:28px;height:28px;flex:none;border-width:3px}
 .viewport>.tool-dock{top:calc(50% - 55px);left:8px}
 .canvas-controls{bottom:max(98px, env(safe-area-inset-bottom,0px) + 82px);right:12px}.hint{bottom:max(98px, env(safe-area-inset-bottom,0px) + 82px);left:12px;max-width:152px}
 .viewport>.social-dock{bottom:max(30px, env(safe-area-inset-bottom,0px) + 16px)}
 .project-shell{padding:8px}.project-panel{height:calc(100dvh - 16px)}.project-top button,.game-top button{min-width:44px;min-height:44px}.project-top{height:57px}
 .index-filters button{min-height:44px;padding:8px 9px}.project-heading a{font-size:11px;line-height:1.5}.project-footer button{min-height:48px}
 .game-shell{padding:8px}.game-panel{width:100%;box-shadow:4px 4px 0 #101727}.game-top{display:grid;grid-template-columns:1fr 44px;gap:0 8px;padding:8px 10px}.game-top strong{font-size:26px;line-height:1}.game-top span{grid-row:2;grid-column:1;margin:0;font-size:11px;line-height:1.5}.game-top button{grid-row:1 / span 2;grid-column:2}
 .game-panel canvas{width:100%;height:auto}.game-help{font-size:10px;line-height:1.35;padding:8px 10px}.game-touch{justify-content:space-between;gap:12px;padding:6px 16px 15px;touch-action:none}.game-touch button{min-width:64px;min-height:62px;font-size:29px;user-select:none;-webkit-user-select:none}.game-touch button:last-child{margin-left:auto}
 .game-menu{inset:72px 0 117px;padding:8px}.game-menu-card{width:100%;max-height:100%;padding:13px;overflow:auto}.game-menu h2{font-size:35px}.game-menu p{font-size:12px}.game-menu button{min-height:46px;padding:6px 18px}.game-menu small{font-size:10px}.game-leaderboard li:nth-child(n+5){display:list-item}
}
@media(max-width:350px){.viewport>.canvas-header .mark{font-size:23px}.header-links{font-size:10px}.header-links a{padding:8px 3px}.play-link{font-size:10px;padding:7px 5px}.viewport>.canvas-header .canvas-dot{width:24px;height:24px}}

/* Full-height mobile game panel leaves real room for the menu above touch controls. */
@media(max-width:600px){.game-shell{align-items:center}.game-panel{height:min(630px,calc(100dvh - 20px));display:flex;flex-direction:column}.game-top{flex:none}.game-panel canvas{flex:none;max-height:34vh;object-fit:contain}.game-help{flex:none}.game-touch{margin-top:auto;flex:none}.game-menu{inset:72px 0 105px;align-items:center}.game-menu-card{max-height:100%;overflow:auto}.game-menu button{margin:12px auto}}
@media(max-width:600px) and (max-height:650px){.game-panel{height:calc(100dvh - 12px)}.game-menu{inset:72px 0 96px}.game-touch button{min-height:50px}}

@media(max-width:600px){.ux-card{left:455px;top:205px}.branding-card{left:835px;top:825px}.hint{bottom:max(164px,env(safe-area-inset-bottom,0px) + 148px);left:12px;max-width:190px}.game-panel{height:min(540px,calc(100dvh - 20px))}.game-menu{inset:70px 0 102px}}

/* Portrait game camera: square viewport follows Aaron instead of shrinking the 900px level. */
@media(max-width:600px){.game-panel{height:min(620px,calc(100dvh - 16px))}.game-panel canvas{aspect-ratio:1/1;width:100%;height:auto;max-height:min(440px,calc(100dvh - 190px));object-fit:fill}.game-menu{inset:70px 0 98px}.game-help{padding:5px 8px}.game-touch{padding-bottom:10px}}
@media(max-width:600px) and (max-height:650px){.game-panel{height:calc(100dvh - 12px)}.game-panel canvas{max-height:calc(100dvh - 180px)}}

/* Mobile canvas uses open space as a design tool. The second project and About
   sit below the opening composition and remain reachable by dragging. */
@media(max-width:600px){
 .canvas .ux-card{left:445px;top:170px}
 .canvas .hero{top:670px}
 .canvas .branding-card{left:800px;top:1080px}
 .canvas .about-character{left:380px;top:1370px}
 .canvas .console{left:930px;top:265px}
 .canvas .sports{left:1290px;top:790px}
 .canvas .backpack{left:1140px;top:1450px}
 .canvas .tablet{left:750px;top:1540px}
 .canvas .sticker-camera{left:1190px;top:340px}
 .canvas .sticker-headset{left:1360px;top:1270px}
 .canvas .sticker-coffee{left:1430px;top:560px}
 .viewport>.tool-dock{top:calc(50% - 30px)}
}
/* The owner preview places this page inside an iframe below a tall viewer
   header. Keep the site's own controls in its first visible phone screen. */
@media(max-width:600px){
 .embedded-view .viewport,.embedded-view .game-shell,.embedded-view .project-shell{height:min(100dvh,560px);bottom:auto}
 .embedded-view .viewport>.tool-dock{top:300px}
 .embedded-view .viewport>.social-dock{bottom:18px}
 .embedded-view .canvas-controls{bottom:78px}
 .embedded-view .hint{bottom:78px}
 .embedded-view .project-panel{height:calc(min(100dvh,560px) - 16px)}
 .embedded-view .game-panel{height:calc(min(100dvh,560px) - 16px)}
 .embedded-view .game-panel canvas{max-height:min(350px,calc(100dvh - 190px))}
 .embedded-view .game-menu{inset:68px 0 100px}
}

/* Fixed descendants are positioned against the iframe viewport, not .viewport's
   shortened box. Anchor the embedded HUD from top instead of a stale bottom. */
@media(max-width:600px){
 .embedded-view .viewport>.social-dock{top:min(508px,calc(100dvh - 52px));bottom:auto}
 .embedded-view .canvas-controls{top:min(435px,calc(100dvh - 118px));bottom:auto}
 .embedded-view .hint{display:none}
}

@media(max-width:600px){.canvas .branding-card{top:1700px}.canvas .about-character{top:1920px}.canvas .console{left:1050px;top:1080px}.canvas .sports{left:1310px;top:1430px}.canvas .sticker-coffee{left:1380px;top:1610px}}

@media(max-width:600px){
 .canvas .branding-card{left:1450px;top:820px}
 .canvas .about-character{left:1420px;top:1430px}
 .embedded-view .viewport,.embedded-view .game-shell,.embedded-view .project-shell{height:100dvh}
 .embedded-view .project-panel{height:calc(100dvh - 16px)}
 .embedded-view .game-panel{height:min(620px,calc(100dvh - 16px))}
}

/* Keep every original illustration on mobile; give each its own station along
   the draggable canvas instead of hiding it or piling it into the first view. */
@media(max-width:600px){
 .canvas .ux-card{left:350px;top:185px}
 .canvas .hero{top:740px}
 .canvas .console{left:1010px;top:240px}
 .canvas .sports{left:1310px;top:500px}
 .canvas .sticker-camera{left:1350px;top:225px}
 .canvas .sticker-coffee{left:1450px;top:1020px}
 .canvas .sticker-headset{left:400px;top:1650px}
 .canvas .branding-card{left:1130px;top:1180px}
 .canvas .backpack{left:470px;top:1350px}
 .canvas .tablet{left:1250px;top:1600px}
 .canvas .about-character{left:360px;top:1930px}
}

@media(max-width:600px){.canvas{height:2900px}.canvas .about-panel{top:2330px}}

@media(max-width:600px){.canvas .backpack{left:755px;top:1410px}.canvas .sticker-headset{left:860px;top:850px}.canvas .sticker-camera{left:1220px;top:320px}.canvas .console{left:1000px;top:360px}.hint{font-size:9px}}

@media(max-width:600px){
 .canvas .sticker-headset{left:1080px;top:1130px}
 .canvas .backpack{left:1180px;top:1490px}
 .canvas .tablet{left:420px;top:1720px}
}

/* Review iframe now fills its own viewport. Bottom bars belong at the bottom,
   not hard-coded 435px/508px from its top. */
@media(max-width:600px){
 .embedded-view .viewport>.social-dock{top:auto;bottom:max(16px, env(safe-area-inset-bottom,0px) + 8px)}
 .embedded-view .canvas-controls{top:auto;bottom:max(82px, env(safe-area-inset-bottom,0px) + 68px)}
 .embedded-view .viewport>.tool-dock{top:calc(50% - 61px)}
 .canvas .console{left:895px;top:345px}
 .canvas .branding-card{left:1090px;top:1580px}
 .canvas .backpack{left:1200px;top:1550px}
 .canvas .about-character{left:400px;top:1920px}
}

@media(max-width:600px){
 .canvas .hero{left:375px;width:590px;top:740px}
 .canvas .hero h1{font-size:77px}
 .viewport>.tool-dock,.embedded-view .viewport>.tool-dock{top:calc(100dvh - 260px)}
 .canvas .ux-card{left:395px;top:170px}
}

@media(max-width:600px){
 .canvas .hero{left:445px;width:520px}
 .canvas .console{left:825px}
 .viewport>.tool-dock,.embedded-view .viewport>.tool-dock{top:50%}
}
/* Phone composition: a compact ring of portfolio objects around the sun.
   Keep every illustration in the first canvas neighborhood without collisions. */
@media(max-width:600px){
 .canvas .project-card{width:200px;padding:8px}
 .canvas .project-card img{height:165px}
 .canvas .project-card strong{font-size:17px}
 .canvas .project-card small{font-size:9px;margin:5px 0 3px}
 .canvas .project-card .chips{margin-top:5px}
 .canvas .project-card .chips span{font-size:8px;padding:2px 3px}
 .canvas .ux-card{left:400px;top:150px}
 .canvas .branding-card{left:755px;top:150px}
 .canvas .hero{left:445px;top:620px;width:520px}
 .canvas .console{left:480px;top:450px;width:145px}
 .canvas .sports{left:895px;top:440px;width:82px}
 .canvas .sticker-camera{left:630px;top:325px}
 .canvas .sticker-coffee{left:875px;top:325px}
 .canvas .sticker-headset{left:735px;top:465px}
 .canvas .about-character{left:370px;top:825px;width:195px}
 .canvas .backpack{left:665px;top:855px;width:128px}
 .canvas .tablet{left:855px;top:850px;width:135px}
 .canvas .about-panel{left:420px;top:1150px;width:600px}
}
@media(max-width:600px){
 .canvas .project-card strong{white-space:normal;line-height:1.05;min-height:36px}
 .canvas .sticker-coffee{left:585px;top:970px}
 .canvas .about-panel{top:1500px}
}
@media(max-width:600px){.canvas .sticker-coffee{left:890px;top:1000px}}
@media(max-width:600px){.canvas .about-panel{top:1760px}}
/* The File viewer can show less than the iframe's full height on real phones.
   Reserve a generous visible footer instead of anchoring at the hidden edge. */
@media(max-width:600px){
 .embedded-view .viewport>.social-dock{top:auto;bottom:max(150px,env(safe-area-inset-bottom,0px) + 140px)}
 .embedded-view .canvas-controls{top:auto;bottom:max(218px,env(safe-area-inset-bottom,0px) + 208px)}
}
@media(max-width:600px){
 .embedded-view .viewport>.social-dock{bottom:max(126px,env(safe-area-inset-bottom,0px) + 116px)}
 .embedded-view .canvas-controls{bottom:max(190px,env(safe-area-inset-bottom,0px) + 180px);right:6px;min-width:0}
 .embedded-view .canvas-controls button{width:32px;height:42px}
 .embedded-view .canvas-controls output{min-width:40px}
 .embedded-view .canvas .backpack{left:625px}
 .embedded-view .canvas .tablet{top:815px}
}
/* 8pt polish: align the phone composition, controls and modal gutters. */
@media (max-width:600px){
 .viewport>.canvas-header{height:64px;padding-inline:16px;gap:8px}
 .viewport>.canvas-header .mark{font-size:28px}
 .header-links{gap:4px;font-size:11px}
 .header-links a{padding:8px 4px}
 .play-link{padding:8px;font-size:11px}
 .viewport>.canvas-header .canvas-dot{width:24px;height:24px}
 .canvas .project-card{width:224px;padding:8px}
 .canvas .project-card img{height:168px}
 .canvas .project-card strong{font-size:20px;line-height:1;min-height:40px}
 .canvas .project-card small{font-size:12px;margin:4px 0}
 .canvas .project-card .chips{margin-top:8px;gap:4px}
 .canvas .project-card .chips span{font-size:10px;padding:4px}
 .canvas .ux-card{left:376px;top:144px}
 .canvas .branding-card{left:744px;top:144px}
 .canvas .sticker-coffee{left:760px;top:744px}
 .canvas .hero{left:440px;top:624px;width:520px}
 .canvas .about-character{left:368px;top:824px}
 .canvas .backpack{left:624px;top:816px}
 .canvas .tablet{left:864px;top:816px}
 .viewport>.tool-dock{left:8px}
 .viewport>.social-dock{width:144px;height:48px;padding:4px;gap:4px}
 .viewport>.social-dock>a,.viewport>.social-dock .be,.viewport>.social-dock .in,.viewport>.social-dock .mail{width:40px!important;height:40px!important}
 .canvas-controls{right:8px;min-width:0}
 .canvas-controls button{width:40px;height:48px}
 .canvas-controls output{min-width:40px}
 .embedded-view .viewport>.social-dock{bottom:max(128px,env(safe-area-inset-bottom,0px) + 120px)}
 .embedded-view .canvas-controls{bottom:max(192px,env(safe-area-inset-bottom,0px) + 184px);right:8px}
 .project-shell,.game-shell{padding:8px}
 .project-panel{height:calc(100dvh - 16px);border-radius:8px}
 .project-top{height:64px;padding:0 16px}
 .project-brand{font-size:28px}
 .project-top button,.game-top button{width:48px;height:48px}
 .index-hero,.project-heading{padding:24px 16px}
 .index-hero h2{font-size:56px;margin:8px 0}
 .index-hero p,.project-heading p{font-size:13px;line-height:1.5}
 .index-filters{gap:8px;margin-top:16px}
 .index-filters button{min-height:48px;font-size:11px;padding:8px}
 .index-grid{grid-template-columns:1fr;gap:16px;padding:16px 16px 48px}
 .index-card>div{padding:16px}
 .index-card strong{font-size:32px;margin-top:8px}
 .project-heading h2{font-size:56px;margin:16px 0}
 .project-heading a{display:inline-block;font-size:12px;line-height:1.5;min-height:44px}
 .project-gallery{padding:16px 16px 48px;gap:16px}
 .project-footer{padding:0 16px 32px}
 .project-footer button{min-height:48px;padding:8px 16px}
 .game-panel{height:min(624px,calc(100dvh - 16px));border-radius:8px}
 .game-top{padding:8px 16px;gap:8px}
 .game-top strong{font-size:28px}
 .game-top span{font-size:12px}
 .game-panel canvas{max-height:min(432px,calc(100dvh - 208px))}
 .game-help{font-size:11px;line-height:1.4;padding:8px 16px}
 .game-touch{padding:8px 16px 16px;gap:16px}
 .game-touch button{min-width:64px;min-height:64px}
 .game-menu{inset:72px 0 112px;padding:8px}
 .game-menu-card{padding:16px}
 .game-menu h2{font-size:40px}
 .game-menu p{font-size:13px;line-height:1.5}
 .game-menu button{min-height:48px;padding:8px 16px}
}
@media(max-width:360px){.viewport>.canvas-header{padding-inline:8px;gap:4px}.viewport>.canvas-header .mark{font-size:24px}.header-links{gap:0}.header-links a{padding:8px 4px}.play-link{padding:8px 4px}}
/* Phone footer: compact 8pt separation, with room for the host viewer edge. */
@media(max-width:600px){
 .embedded-view .viewport>.social-dock{bottom:max(80px,env(safe-area-inset-bottom,0px) + 72px)}
 .embedded-view .canvas-controls{bottom:max(144px,env(safe-area-inset-bottom,0px) + 136px)}
}
/* Requested mobile HUD: no percentage/zoom/reset box; pinch remains available. */
@media(max-width:600px){.canvas-controls{display:none!important}}
/* In-site About page, aligned to the project overlay's 8pt rhythm. */
.canvas .about-panel{display:none!important}
.canvas .sticker-coffee{left:1440px;top:320px}
@media(max-width:600px){.canvas .sticker-coffee{left:760px;top:744px}}
.about-shell[hidden]{display:none}
.about-shell{position:fixed;inset:0;z-index:29;background:#151b2dd6;display:grid;place-items:center;padding:24px;font-family:'JetBrains Mono',monospace}
.about-page{width:min(960px,100%);height:min(90vh,880px);border:3px solid #25334c;border-radius:8px;box-shadow:8px 8px 0 #101727;background:#f9f4dd;display:flex;flex-direction:column;overflow:hidden}
.about-top{height:64px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:3px solid #25334c;background:#b9d8e5}
.about-top span{font:400 32px 'Jersey 10'}
.about-top button{width:48px;height:48px;border:0;border-radius:4px;background:#25334c;color:white;font-size:28px}
.about-scroll{flex:1;overflow:auto;overscroll-behavior:contain}
.about-intro{padding:48px 64px 40px;background-image:radial-gradient(#d7d0ac .8px,transparent 1px);background-size:16px 16px}
.about-kicker{font-size:12px;letter-spacing:.06em;color:#985751}
.about-intro h2{font:400 clamp(64px,10vw,112px)/.86 'Jersey 10';margin:16px 0 24px}
.about-intro p{font-size:17px;line-height:1.6;max-width:620px}
.about-contact,.about-body a{display:inline-block;padding:12px 16px;border:2px solid #25334c;background:#efbb59;box-shadow:4px 4px 0 #7894a1;font-size:13px;min-height:48px}
.about-body{display:grid;grid-template-columns:minmax(0,320px) 1fr;gap:48px;padding:40px 64px 64px;align-items:center;background:#fff}
.about-body img{width:100%;max-width:320px;height:auto}
.about-body h3{font:400 48px/.95 'Jersey 10';margin:16px 0}
.about-body p{font-size:14px;line-height:1.7;margin:0 0 16px}
.about-body a{margin-top:8px;background:#fff}
@media(max-width:600px){
 .about-shell{padding:8px}
 .about-page{height:calc(100dvh - 16px);box-shadow:4px 4px 0 #101727}
 .about-top{height:64px;padding:0 16px}
 .about-top span{font-size:28px}
 .about-intro{padding:32px 16px}
 .about-intro h2{font-size:64px;margin:16px 0}
 .about-intro p{font-size:14px;line-height:1.6}
 .about-body{grid-template-columns:1fr;gap:24px;padding:24px 16px 48px}
 .about-body img{width:min(100%,256px);margin:auto}
 .about-body h3{font-size:44px}
 .about-body p{font-size:13px;line-height:1.6}
}
/* Give the cup its own station, away from the mobile role tags. */
@media(max-width:600px){.canvas .sticker-coffee{left:352px;top:496px}}
.canvas .about-character{cursor:pointer;filter:drop-shadow(0 4px 0 #25334c3b)}
.canvas .about-character:hover,.canvas .about-character:focus-visible{filter:drop-shadow(0 6px 0 #25334c6b) drop-shadow(0 8px 12px #0003);transform:translateY(-4px) scale(1.03)}
.canvas .about-character:after{content:'Tap to meet Aaron ↗';position:absolute;left:40px;bottom:-16px;padding:5px 8px;border:2px solid #25334c;background:#f9f4dd;color:#25334c;font:500 12px 'JetBrains Mono';white-space:nowrap;box-shadow:3px 3px 0 #7894a1}
@media(max-width:600px){.canvas .about-character:after{font-size:18px;left:15px;bottom:-36px;padding:8px 12px}}
@media(max-width:600px){.hint{display:none}}