/* Adeel Ahmed Khan — portfolio. Dark green-black, bone text, one dune-gold accent. */
:root{--bg:#0c1311;--s1:#121b18;--s2:#182420;--ink:#ece8dc;--mute:#9aa59f;--line:rgba(236,232,220,.13);--gold:#e8b04a;--on-gold:#1a1408;--ok:#66d1a8;--bad:#f0805f;--display:"Bricolage Grotesque","Arial Narrow",system-ui,sans-serif;--body:"Geist",system-ui,sans-serif;--pad:clamp(20px,5vw,72px);color-scheme:dark}
:root[data-theme=light]{--bg:#eeeadf;--s1:#e6e1d3;--s2:#ddd7c6;--ink:#161b19;--mute:#5d6863;--line:rgba(22,27,25,.16);--gold:#9a5f00;--on-gold:#fff;--ok:#1f7a55;--bad:#b3452a;color-scheme:light}
*,*:before,*:after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;padding-bottom:150px}
.js body{height:100svh;overflow:hidden;padding-bottom:0}
a{color:inherit}button,input{font:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
::selection{background:var(--gold);color:var(--on-gold)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:var(--on-gold);padding:8px 14px;border-radius:8px;z-index:60}.skip-link:focus{left:8px}
.noscript{padding:12px var(--pad);background:var(--s2)}

/* header */
.bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad);background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mark{font:700 19px var(--display);letter-spacing:-.02em;text-decoration:none}
.rail-nav{display:flex;gap:28px;font-size:15px}
.rail-nav a{color:var(--mute);text-decoration:none;transition:color .2s}.rail-nav a:hover,.rail-nav a.lit{color:var(--ink)}
.bar-end{display:flex;align-items:center;gap:18px;font-size:14px;color:var(--mute)}
.clock b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.theme-toggle{background:none;border:1px solid var(--line);color:var(--ink);border-radius:100px;padding:6px 14px;cursor:pointer;font-size:14px;display:inline-flex;gap:6px}.theme-toggle:hover{border-color:var(--mute)}
.bar.compact .clock{display:none}

/* scene system: one fixed stage, scenes swap with motion instead of scrolling */
.stage{outline:0}
.scene{padding:96px var(--pad) 40px;display:flex;flex-direction:column}
.frame{width:100%;max-width:1400px;margin:auto}
h2{font:700 clamp(32px,min(4.4vw,7vh),62px)/1 var(--display);letter-spacing:-.035em;margin:0 0 clamp(28px,5vh,64px)}
h1{margin:0;font:800 clamp(46px,min(7.4vw,14vh),150px)/.92 var(--display);letter-spacing:-.045em;font-stretch:100%;white-space:nowrap}
.hero-foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,6vw,96px);margin-top:clamp(28px,6vh,72px);align-items:end}
.lede{font-size:clamp(18px,min(1.8vw,3vh),24px);line-height:1.45;margin:0;max-width:30ch}
.index{list-style:none;margin:0;padding:0}
.index a{display:grid;grid-template-columns:1fr auto;gap:2px 24px;padding:clamp(10px,1.8vh,18px) 0;border-top:1px solid var(--line);text-decoration:none;align-items:baseline}
.index li:last-child a{border-bottom:1px solid var(--line)}
.index b{font:700 clamp(20px,3.2vh,26px)/1.1 var(--display);letter-spacing:-.025em;transition:color .2s}
.index a:hover b{color:var(--gold)}
.index span{color:var(--mute);font-size:15px;grid-column:1}.index i{font-style:normal;color:var(--mute);font-size:14px;grid-row:1;grid-column:2}
.project{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:center}
.project h3{font:700 clamp(28px,min(3.4vw,5.4vh),46px)/1.05 var(--display);letter-spacing:-.03em;margin:0 0 6px}
.meta{margin:0 0 clamp(14px,3vh,28px);color:var(--mute);font-size:15px}
.project-q{font:600 clamp(19px,min(2vw,3.2vh),26px)/1.25 var(--display);letter-spacing:-.015em;margin:0 0 14px}
.desc{color:var(--mute);margin:0 0 16px;max-width:52ch;font-size:clamp(15px,2.1vh,17px)}
.stack{font-size:14px;color:var(--mute);margin:0;max-width:52ch}.stack b{color:var(--ink);font-weight:500}

/* demos */
.demo{background:var(--s1);border:1px solid var(--line);border-radius:22px;padding:clamp(18px,2.4vw,32px);display:flex;flex-direction:column;gap:12px}
.demo-top{display:flex;justify-content:space-between;gap:12px;color:var(--mute);font-size:14px;margin-bottom:6px}.demo-top b{color:var(--ink);font-weight:500}
.deal{display:grid;grid-template-columns:1fr auto auto;gap:18px;align-items:baseline;width:100%;text-align:left;background:var(--s2);color:var(--ink);border:1px solid transparent;border-radius:14px;padding:14px 18px;cursor:pointer;transition:border-color .2s}
.deal:hover{border-color:var(--line)}.deal[aria-pressed=true]{border-color:var(--gold)}
.deal b{font:700 20px var(--display)}.deal i{font-style:normal;color:var(--mute);font-size:13px}
.verdict{margin-top:auto;padding-top:8px;font-size:15px;color:var(--mute);min-height:118px}
.step{padding:3px 0}.step.pass{color:var(--ok)}.step.fail{color:var(--bad)}
.final{margin-top:8px;color:var(--ink);font:600 18px/1.35 var(--display)}
.price{font:800 clamp(56px,7vw,92px)/1 var(--display);letter-spacing:-.04em;margin:8px 0 4px;font-variant-numeric:tabular-nums}.price small{font:400 15px var(--body);letter-spacing:0;color:var(--mute)}
.demo-run,.answer-run,.send{background:var(--gold);color:var(--on-gold);border:0;border-radius:100px;padding:11px 22px;font-weight:500;cursor:pointer;align-self:flex-start;transition:transform .2s}
.demo-run:hover,.answer-run:hover,.send:hover{transform:translateY(-2px)}.demo-run:disabled{opacity:.6;cursor:default;transform:none}
.log{margin-top:auto;font-size:14px;color:var(--mute);min-height:128px}
.log div{display:grid;grid-template-columns:56px 1fr;gap:10px;padding:4px 0}.log .hold{color:var(--bad)}.log .sync{color:var(--ok)}
.demo-desc{margin:0}.demo-note{margin:auto 0 0;color:var(--mute);font-size:14px}
.lab{list-style:none;margin:0;padding:0}.lab li{display:flex;justify-content:space-between;gap:20px;padding:15px 0;border-top:1px solid var(--line)}.lab b{font:700 20px var(--display);letter-spacing:-.02em}.lab span{color:var(--mute);text-align:right;font-size:15px}


/* portfolio-specific product panels */
.balance-total{padding:18px 0 22px;border-bottom:1px solid var(--line);display:grid;gap:2px}.balance-total span,.balance-total small{color:var(--mute);font-size:13px}.balance-total strong{font:800 clamp(42px,6vw,76px)/1 var(--display);letter-spacing:-.04em}.balance-row{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}.balance-row span{color:var(--mute)}.balance-row b{font-weight:500}.balance-bars{display:grid;gap:7px;padding-top:4px}.balance-bars i{height:5px;width:var(--w);border-radius:20px;background:var(--gold);opacity:.78}.service-strip{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}.service-strip span{border:1px solid var(--line);border-radius:100px;padding:5px 10px;color:var(--mute);font-size:12px}.app-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;padding:0;overflow:hidden}.app-card{min-height:190px;padding:24px;background:var(--s1);display:flex;flex-direction:column;border:1px solid var(--line);margin:-.5px}.app-card b{font:700 24px/1.1 var(--display);letter-spacing:-.025em;margin-bottom:12px}.app-card span{color:var(--mute);font-size:14px;line-height:1.55}.app-card i{margin-top:auto;padding-top:16px;font-style:normal;color:var(--gold);font-size:12px}.game-grid{gap:1px;padding:0;overflow:hidden}.game-card{min-height:180px;padding:26px;background:var(--s1);border:1px solid var(--line);margin:-.5px;display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start}.game-card b{font:700 24px/1.1 var(--display);letter-spacing:-.025em}.game-card p{margin:8px 0 0;color:var(--mute);font-size:14px;line-height:1.55}.game-mark{width:52px;height:52px;border-radius:50%;background:var(--gold);color:var(--on-gold);display:grid;place-items:center;font-size:24px}.game-mark.arrows{font-size:27px}.js .scene :is(.app-card,.game-card,.balance-total,.balance-row,.service-strip){opacity:0;transform:translateY(calc(26px * var(--dir,1)));transition:opacity .3s ease,transform .3s ease}.js .scene.is-active :is(.app-card,.game-card,.balance-total,.balance-row,.service-strip){opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1) .28s,transform .8s cubic-bezier(.2,.8,.2,1) .28s}

/* how I work / path / contact */
.layers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(20px,3.4vw,56px)}
.layer{border-top:1px solid var(--line);padding:20px 0 clamp(20px,5vh,48px)}
.layer h3{font:700 clamp(19px,3vh,24px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 8px}.layer p{margin:0;color:var(--mute);font-size:clamp(15px,2.1vh,17px)}
.path{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 clamp(20px,3vw,48px)}
.path li{border-top:1px solid var(--line);padding-top:22px}
.path b{display:block;font:700 clamp(22px,3.6vh,30px) var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-bottom:10px}.path p{margin:0;color:var(--mute);font-size:clamp(15px,2.1vh,17px)}
.mail{display:inline-block;font:800 clamp(30px,min(6.4vw,12vh),104px)/1 var(--display);letter-spacing:-.04em;text-decoration:none;border-bottom:3px solid var(--gold);padding-bottom:6px;word-break:break-word;transition:color .2s}.mail:hover{color:var(--gold)}
.contact-lines{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:clamp(24px,5vh,44px)}
.contact-lines a,.contact-lines div{text-decoration:none;display:flex;flex-direction:column}.contact-lines span{color:var(--mute);font-size:14px}.contact-lines b{font-weight:500}.contact-lines a:hover b{color:var(--gold)}
footer{margin-top:clamp(28px,7vh,80px);color:var(--mute);font-size:14px}

/* ask dock */
.dock{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));width:min(760px,calc(100% - 24px))}
.answer{display:none;background:var(--s2);border:1px solid var(--line);border-radius:22px;padding:20px 22px;margin-bottom:10px;max-height:min(60vh,540px);overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.35)}.answer.on{display:block}
.answer-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:13px;color:var(--mute)}
.answer-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.tok{border:1px solid var(--line);border-radius:100px;padding:1px 10px;color:var(--ink)}
.answer-controls{display:flex;gap:6px;flex-shrink:0}.answer-controls button{background:none;border:0;color:var(--mute);cursor:pointer;padding:2px 6px;font-size:13px;text-decoration:underline;text-underline-offset:3px}.answer-controls button:hover{color:var(--ink)}
.answer-body{margin:0 0 14px;line-height:1.6}.cur{display:inline-block;width:2px;height:1.05em;background:var(--gold);vertical-align:-.15em;animation:blink 1s steps(2) infinite}@keyframes blink{50%{opacity:0}}
.answer-ev{list-style:none;margin:0 0 14px;padding:0;font-size:14px}.answer-ev li{display:flex;justify-content:space-between;gap:16px;padding:7px 0;border-top:1px solid var(--line)}.answer-ev b{font-weight:500}.answer-ev i{font-style:normal;color:var(--mute)}
.answer-run{margin-bottom:14px}
.answer-next{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--mute)}
.answer-next button,.hint button{background:none;border:1px solid var(--line);color:var(--mute);border-radius:100px;padding:6px 14px;font-size:14px;cursor:pointer;transition:color .2s,border-color .2s}.answer-next button:hover,.hint button:hover{color:var(--ink);border-color:var(--mute)}
.hint{display:flex;gap:8px;overflow-x:auto;padding:0 2px 10px;scrollbar-width:none}.hint::-webkit-scrollbar{display:none}.hint button{flex-shrink:0;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px)}
.answer.on + .hint{display:none}
.field{display:flex;align-items:center;gap:10px;background:var(--s2);border:1px solid var(--line);border-radius:100px;padding:6px 6px 6px 22px;box-shadow:0 12px 40px rgba(0,0,0,.3);transition:border-color .2s}.field:focus-within{border-color:var(--gold)}
.field input{flex:1;min-width:0;background:none;border:0;color:var(--ink);padding:10px 0;font-size:16px}.field input:focus{outline:0}.field input::placeholder{color:var(--mute)}
.send{align-self:auto}
.back-to-top{position:fixed;right:20px;bottom:96px;z-index:25;width:42px;height:42px;border-radius:50%;background:var(--s2);border:1px solid var(--line);color:var(--ink);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .25s}.back-to-top.on{opacity:1;pointer-events:auto}.back-to-top svg{width:18px;height:18px}

/* stage controls */
.scene-progress{position:fixed;z-index:22;right:12px;top:calc(50% - 108px);transform:translateX(2px);font:500 10px/1 var(--body);letter-spacing:.08em;color:var(--mute);font-variant-numeric:tabular-nums;opacity:.72}
.dots{position:fixed;z-index:22;right:14px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px}
.dots button{position:relative;width:8px;height:8px;padding:0;border:0;border-radius:8px;background:var(--mute);opacity:.42;cursor:pointer;transition:height .38s cubic-bezier(.2,.8,.2,1),background .2s,opacity .2s,transform .2s}
.dots button:hover{opacity:1;transform:scaleX(1.18)}.dots button[aria-current=true]{height:28px;background:var(--gold);opacity:1}
.dots button:after{content:attr(data-label);position:absolute;right:18px;top:50%;transform:translateY(-50%) translateX(5px);white-space:nowrap;background:var(--s2);border:1px solid var(--line);border-radius:8px;padding:5px 9px;color:var(--ink);font:500 12px/1.2 var(--body);opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;box-shadow:0 8px 28px rgba(0,0,0,.18)}
.dots button:hover:after,.dots button:focus-visible:after{opacity:1;transform:translateY(-50%) translateX(0)}
.scroll-hint{position:fixed;z-index:22;left:var(--pad);bottom:34px;font-size:13px;color:var(--mute);opacity:0;pointer-events:none;transition:opacity .4s,transform .4s;transform:translateY(4px)}
.scroll-hint span{color:var(--ink);font-weight:500}
body.is-home .scroll-hint{opacity:1;transform:none}
.stage{transition:opacity .3s}.asking .stage{opacity:.3}

/* with script: fixed stage, layered scenes */
.js,.js body{height:100%;overflow:hidden}
.js body{padding-bottom:0}
.js .stage{position:fixed;inset:0}
.js .scene{position:absolute;inset:0;overflow:hidden;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(calc(18px * var(--dir,1)));transition:opacity .32s ease,transform .45s cubic-bezier(.2,.8,.2,1),visibility 0s .45s;padding-bottom:150px}
.js .scene.is-leaving{transform:translateY(calc(-18px * var(--dir,1)))}
.js .scene.is-active{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .48s ease .08s,transform .7s cubic-bezier(.2,.8,.2,1),visibility 0s}
.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li){opacity:0;transform:translateY(calc(26px * var(--dir,1)));transition:opacity .3s ease,transform .3s ease}
.js .scene.is-leaving :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li){transform:translateY(calc(-26px * var(--dir,1)))}
.js .scene.is-active :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li){opacity:1;transform:none;transition:opacity .8s cubic-bezier(.2,.8,.2,1) var(--dl,.22s),transform .8s cubic-bezier(.2,.8,.2,1) var(--dl,.22s)}
.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li):nth-child(2){--dl:.3s}.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li):nth-child(3){--dl:.38s}.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li):nth-child(4){--dl:.46s}.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li):nth-child(5){--dl:.54s}.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li):nth-child(n+6){--dl:.62s}
.js .scene .demo{opacity:0}
.js .scene.is-active .demo{animation:screen .95s cubic-bezier(.2,.8,.2,1) .32s both}
@keyframes screen{from{opacity:0;clip-path:inset(47% 0 47% 0 round 22px)}to{opacity:1;clip-path:inset(0 round 22px)}}
.js .scene.is-active h1{animation:settle 1.5s cubic-bezier(.2,.8,.2,1) .1s both}
@keyframes settle{from{font-stretch:75%;letter-spacing:.01em;opacity:0}to{font-stretch:100%;letter-spacing:-.045em;opacity:1}}
@media(prefers-reduced-motion:reduce){.js .scene,.js .scene.is-active,.js .scene :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li),.js .scene.is-active :is(h2,.lede,.index li,.project-body>*,.layer,.path li,.mail,.contact-lines>*,footer,.lab li){transition:none}.js .scene.is-active .demo,.js .scene.is-active h1{animation:none;opacity:1}.js .scene .demo{opacity:1}}

@media(max-width:820px){
 .rail-nav,.clock,.theme-label{display:none}.mark{white-space:nowrap;font-size:17px}.theme-toggle{padding:6px 12px}
 .index span,.stack{display:none}.index a{padding:12px 0}.lede{font-size:17px}.frame{margin-top:0}
 h1{white-space:normal;font-size:clamp(46px,14.5vw,80px)}
 .hero-foot,.project,.layers,.path{grid-template-columns:1fr}
 .scene{padding-top:84px}.js .scene{overflow-y:auto;overscroll-behavior:contain}.project{gap:22px;align-items:start}.frame{margin:0 auto auto}
 .layer{padding:14px 0 12px}.path li{padding:14px 0 12px}.path b{margin-bottom:4px}
 .deal{grid-template-columns:1fr auto}.deal i{grid-column:1}.app-grid{grid-template-columns:1fr}.app-card{min-height:150px}.game-card{grid-template-columns:52px 1fr;padding:20px}.game-mark{width:44px;height:44px}
 .scroll-hint,.back-to-top,.scene-progress{display:none}.dots{right:6px}.dots button:after{display:none}.demo{min-height:0}
}
@media(max-width:1420px){.scroll-hint{display:none}}