:root{color-scheme:dark;--bg:#080808;--surface:#111;--raised:#161616;--line:#2b2b2b;--strong:#444;--text:#f2f2f0;--muted:#a3a39e;--quiet:#81817c;--accent:#afd0e8}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:2rem}body{margin:0;min-width:320px;background:var(--bg);color:var(--text);font:16px/1.6 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-underline-offset:.22em}a:focus-visible{outline:2px solid #e5f3fd;outline-offset:4px;border-radius:5px}h1,h2,h3,p{margin:0}h1,h2,h3{line-height:1.08;text-wrap:balance}.skip-link{position:fixed;top:-5rem;left:1rem;z-index:20;padding:.65rem .9rem;background:var(--text);color:var(--bg)}.skip-link:focus{top:1rem}.project-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:min(100% - 2rem,68rem);margin:1rem auto;color:var(--quiet);font-size:.72rem}.project-nav a{min-height:2.75rem;display:inline-flex;align-items:center}.project-nav a:last-child{justify-self:end}.work-page{width:min(100% - 2rem,68rem);margin:0 auto 4rem}.work-hero{max-width:50rem;padding:5rem 0 4rem}.eyebrow{color:var(--muted);font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase}h1{margin-top:.5rem;font-size:clamp(2.7rem,7vw,5.6rem);letter-spacing:-.06em}.work-lead{max-width:62ch;margin-top:1.2rem;color:#c9c9c5;font-size:1rem}.work-jump{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}.work-jump a{padding:.55rem .75rem;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.72rem;text-decoration:none}.case{scroll-margin-top:2rem;margin-bottom:1.2rem;padding:clamp(1.25rem,4vw,2.2rem);border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,var(--raised),var(--surface));box-shadow:0 24px 60px rgb(0 0 0/.18)}.case__header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2rem;align-items:start;padding-bottom:1.5rem;border-bottom:1px solid var(--line)}.case__header h2{margin-top:.4rem;font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.05em}.case__header p:last-child{max-width:55ch;margin-top:.55rem;color:var(--muted)}.case__visit{display:inline-flex;align-items:center;min-height:2.75rem;color:var(--accent);font-size:.78rem;font-weight:700;white-space:nowrap}.case__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:1.5rem;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--line)}.case__grid section{padding:1rem;background:rgb(8 8 8/.55)}.case__grid h3{color:var(--accent);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}.case__grid p{margin-top:.5rem;color:var(--muted);font-size:.8rem}.case__note{display:grid;grid-template-columns:10rem minmax(0,1fr);gap:1rem;margin-top:1rem;padding:1rem;border-left:2px solid var(--strong);background:rgb(0 0 0/.16);font-size:.76rem}.case__note span{color:var(--muted)}.case__note--metric{border-left-color:var(--accent)}.work-contact{max-width:48rem;margin-top:5rem;padding-top:2rem;border-top:1px solid var(--strong)}.work-contact h2{margin-top:.5rem;font-size:2rem;letter-spacing:-.04em}.work-contact p:not(.eyebrow){max-width:55ch;margin-top:.7rem;color:var(--muted)}.work-contact a{display:inline-flex;align-items:center;min-height:2.75rem;margin-top:.8rem;color:var(--accent);font-size:.8rem;font-weight:700}@media(max-width:46rem){.project-nav{grid-template-columns:1fr auto}.project-nav span{display:none}.case__header{grid-template-columns:1fr;gap:.7rem}.case__visit{justify-self:start}.case__grid{grid-template-columns:1fr}.case__note{grid-template-columns:1fr;gap:.3rem}.work-hero{padding:3.5rem 0 2.5rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}/* AccordionOS adaptation © 2025 Urvish Mali; MIT in THIRD-PARTY-NOTICES.md. */
[hidden]{display:none!important}
summary:focus-visible,button:focus-visible{outline:2px solid #e5f3fd;outline-offset:4px;border-radius:12px}
.project-story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:2rem;align-items:center;margin-top:1.5rem;padding:clamp(1rem,3vw,1.75rem);border:1px solid var(--line);border-radius:18px;background:radial-gradient(ellipse at right top,#263947,transparent 70%),#101519}
.project-story[data-project="design-lab"]{background:radial-gradient(ellipse at right top,#3a3022,transparent 70%),#191713}
.project-story[data-project="hayalows"]{background:radial-gradient(ellipse at right top,#303c31,transparent 70%),#141714}
.project-story[data-project="english-chat"]{background:radial-gradient(ellipse at right top,#343142,transparent 70%),#15131b}
.story-controls{min-width:0}
.story-instruction{margin-bottom:.9rem;color:#c9c9c5;font-size:.78rem}
.story-part{width:fit-content;max-width:100%;margin-bottom:.65rem;border:1px solid #626a70;border-radius:999px;background:#c5cbce;color:#14191d;transition:background-color 180ms,border-radius 200ms}
.story-part[open]{width:100%;border-radius:20px;background:#f0f2f1;border-color:#f0f2f1}
.story-part summary{display:flex;align-items:center;gap:.65rem;min-height:3rem;padding:.7rem 1rem;font-size:.92rem;font-weight:650;cursor:pointer;list-style:none}
.story-part summary::-webkit-details-marker{display:none}
.story-part summary small{margin-left:auto;padding-left:1rem;color:#505a62;font-size:.65rem;font-weight:550}
.story-part__mark{position:relative;display:grid;place-items:center;flex:0 0 1.3rem;height:1.3rem;border-radius:50%;background:#eef1f1;box-shadow:0 2px 5px #0002}
.story-part__mark::before,.story-part__mark::after{position:absolute;width:.55rem;height:1px;background:#293139;content:''}
.story-part__mark::after{transform:rotate(90deg);transition:transform 180ms}
.story-part[open] .story-part__mark{background:#202b33}
.story-part[open] .story-part__mark::before{background:#fff}
.story-part[open] .story-part__mark::after{transform:rotate(0deg);background:#fff}
.story-copy{padding:0 1rem 1rem;color:#404b53;font-size:.92rem;line-height:1.65}
.story-copy h3{margin:.1rem 0 .55rem;font-size:.68rem;font-weight:700;letter-spacing:.055em;text-transform:uppercase;color:#505c64}
.story-pagination{display:flex;align-items:center;gap:.5rem;width:fit-content;margin-top:1rem;padding:.25rem;border:1px solid #5d666c;border-radius:999px;color:#d0d8dd;font-size:.72rem;font-variant-numeric:tabular-nums}
.story-pagination button{display:grid;place-items:center;min-width:2.75rem;min-height:2.75rem;padding:0;border:0;border-radius:50%;background:#dce3e7;color:#111820;cursor:pointer}
.story-pagination button:disabled{opacity:.4;cursor:default}
.story-pagination span{min-width:4.5rem;text-align:center}
.story-preview{min-width:0;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}
.story-preview__frame{overflow:hidden;display:grid;place-items:center;min-height:12rem;border:1px solid #57636d;border-radius:14px;background:#0d1012;box-shadow:0 15px 40px #0004}
.story-preview__label{justify-self:start;padding:.55rem .75rem;font-size:.64rem;color:#d1d8db;letter-spacing:.09em;text-transform:uppercase}
.story-preview img{display:block;width:100%;height:auto;aspect-ratio:1280/900;object-fit:contain;border-top:1px solid #39434a}
.story-image-fallback{padding:2rem 1rem;color:#d2d6d8;font-size:.85rem}
.story-preview figcaption{padding-top:.85rem}
.story-context{min-height:3.2em;color:#e3e9ed;font-size:.85rem;line-height:1.6}
.story-preview__meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;margin-top:.65rem;padding-top:.65rem;border-top:1px solid #46525c;font-size:.67rem;color:#b5c0c8}
.story-preview__meta a{color:var(--accent)}
.project-story[data-active-stage="1"] .story-preview__frame{border-color:var(--accent)}
.project-story[data-active-stage="2"] .story-preview__label{color:var(--accent)}
.project-story[data-active-stage] .story-context{animation:story-context-in 180ms ease-out}
@keyframes story-context-in{from{opacity:.4;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:46rem){.project-story{grid-template-columns:minmax(0,1fr);gap:1.5rem}.story-context{min-height:0}.story-preview__frame{min-height:8rem}}
@media(prefers-reduced-motion:reduce){.story-part,.story-part__mark::after{transition:none}.project-story[data-active-stage] .story-context{animation:none}}
@media(forced-colors:active){.story-part{border:1px solid ButtonText}.story-part__mark{forced-color-adjust:none}}
.story-pagination{max-width:100%}.story-pagination button{min-width:44px;min-height:44px}.story-pagination span{min-width:0;padding-inline:.25rem;overflow-wrap:anywhere}
.case__header h2,.work-hero h1{overflow-wrap:anywhere}
.story-part summary{flex-wrap:wrap}.story-part summary small{padding-left:0}
@media(max-width:46rem){.case{padding:20px}.project-story{padding:16px}.story-part summary{padding:12px;gap:8px}.story-copy{padding:0 12px 16px;overflow-wrap:anywhere}}