*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}html[data-look=paper]{--bg:#f2efe8;--ink:#20201e;--muted:#65635d;--accent:#ff8964;--line:#ccc8c0;--panel:#e6e2da;--studio:#e8e4dc}html[data-look=carbon]{--bg:#191a18;--ink:#f2efe8;--muted:#b6b4ac;--accent:#ff8964;--line:#464740;--panel:#292c27;--studio:#22241f}html[data-look=midnight]{--bg:#171d27;--ink:#edf0f4;--muted:#b0bac9;--accent:#ffaf83;--line:#3c4655;--panel:#263042;--studio:#202a38}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{touch-action:manipulation}a:focus-visible,button:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:hover,a:hover{color:var(--accent)}svg{width:23px;height:23px;flex-shrink:0}header{min-height:110px;margin:0 4vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.wordmark{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:900;letter-spacing:-.8px}.wordmark svg{width:43px;height:35px}nav{display:flex;gap:26px;align-items:center;font-size:13px}nav a{padding:14px 0}nav button{background:none;border:1px solid var(--line);border-radius:50%;width:44px;height:44px;font-size:12px}.looks{display:flex;gap:0}.looks button{width:44px;height:44px;border:0;background:none;position:relative}.looks button:before{content:'';position:absolute;inset:13px;border-radius:50%;background:#f2efe8;border:1px solid #888}.looks button[data-look=carbon]:before{background:#252922}.looks button[data-look=midnight]:before{background:#29364d}.looks button[aria-pressed=true]:after{content:'';position:absolute;inset:8px;border:1px solid var(--ink);border-radius:50%}.hero{padding:76px 4vw 68px;display:grid;grid-template-columns:1.15fr 1fr;gap:4vw;align-items:center;min-height:680px}.eyebrow{font-family:Consolas,monospace;font-size:11px;letter-spacing:1.2px;font-weight:400;line-height:1.6}.hero h1{font-size:clamp(56px,6.5vw,104px);line-height:.98;letter-spacing:-.075em;margin:35px 0 28px;font-weight:600}.accent{color:var(--accent)}.intro{max-width:435px;font-size:17px;line-height:1.7;color:var(--muted)}.actions{display:flex;gap:25px;align-items:center;margin-top:34px;font-size:13px}.button{display:flex;align-items:center;gap:26px;background:var(--ink);color:var(--bg);padding:18px 22px}.button:hover{background:var(--accent);color:var(--bg)}.text-link{display:flex;align-items:center;gap:10px}.text-link svg{width:16px}.art{height:475px;border:1px solid var(--line);position:relative;background:var(--panel);overflow:hidden}.art-top,.art-bottom{position:absolute;left:22px;right:22px;display:flex;justify-content:space-between;font:10px Consolas,monospace;letter-spacing:1px;z-index:2}.art-top{top:22px}.art-bottom{bottom:17px;flex-direction:column;gap:12px}.art-bottom div{display:flex;justify-content:space-between;gap:10px}.art-bottom button{font:10px Consolas,monospace;min-height:44px;background:none;border:0;border-bottom:1px solid var(--line);padding:8px 0}.fragment-stage{position:absolute;inset:45px 0 75px;display:grid;place-items:center;perspective:800px}.fragments{width:270px;height:270px;position:relative;transform-style:preserve-3d;transform:rotateX(49deg) rotateZ(-30deg);animation:drift 12s ease-in-out infinite alternate}.fragments i{position:absolute;left:calc(var(--x)*30px);top:calc(var(--y)*30px);width:27px;height:27px;background:linear-gradient(135deg,#ff9a6c,#d94722 80%);box-shadow:1px 1px #9b321c,2px 2px #9b321c,3px 3px #9b321c,5px 6px 9px #0003;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);transform:translateZ(calc(var(--z)*.3))}.fragments.scattered i{transform:translate3d(calc((var(--x) - 4)*10px),calc((var(--y) - 4)*10px),var(--z)) rotate(var(--r))}.paused .fragments{animation-play-state:paused}@keyframes drift{to{transform:rotateX(39deg) rotateZ(-20deg) translateY(-12px)}}.manifesto{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 4vw;display:flex;justify-content:space-between;align-items:center;font-size:clamp(20px,3.4vw,55px);letter-spacing:-.04em;font-weight:600}.mini-mark svg{height:36px;width:45px;color:var(--accent)}.section{padding:95px 4vw}.section-heading{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:50px}h2{font-size:clamp(40px,5vw,74px);line-height:1.04;letter-spacing:-.06em;font-weight:500;white-space:pre-line;margin:22px 0 0}.section-intro{max-width:340px;font-size:15px;line-height:1.7;color:var(--muted);margin:0}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px 25px}.project[hidden]{display:none}.project{min-width:0}.project-image{aspect-ratio:1.4;background:var(--panel);padding:35px 20px;position:relative;overflow:hidden;display:grid;place-items:center}.project-image img{width:100%;height:auto;max-height:210px;object-fit:contain;box-shadow:0 14px 25px #0003;transition:transform .4s}.project:hover img{transform:translateY(-5px) scale(1.02)}.project-number{position:absolute;top:12px;left:15px;font:10px Consolas,monospace;color:var(--muted)}.project-arrow{position:absolute;bottom:10px;right:12px;transition:transform .2s}.project:hover .project-arrow{transform:translate(3px,-3px)}.project-heading{display:flex;align-items:center;margin-top:20px}h3{font-weight:500;font-size:21px;letter-spacing:-.5px;margin:0}.description{font-size:13px;line-height:1.6;margin:10px 0;color:var(--muted)}.status{font:10px Consolas,monospace;color:var(--muted);display:block;line-height:1.5}.more{margin:48px auto 0;display:flex;align-items:center;gap:25px;padding:15px 22px;background:none;border:1px solid var(--line);font-size:13px}.studio{background:var(--studio);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.studio-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:8vw;align-items:start}.studio-text{font-size:21px;line-height:1.55}.muted{color:var(--muted);font-size:14px;line-height:1.8}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:80px}.services article{border-top:1px solid var(--line);padding-top:25px}.services h3{margin-top:22px}.services p{font-size:14px;line-height:1.7;color:var(--muted);max-width:310px}.contact{padding-top:110px;padding-bottom:110px}.contact h2{font-size:clamp(60px,8vw,120px)}.contact>p:not(.eyebrow){color:var(--muted);line-height:1.7;margin-top:30px}.contact-link{font-size:22px;display:inline-flex;align-items:center;gap:50px;border-bottom:1px solid var(--ink);padding:20px 0 12px}.contact-link svg{width:32px;height:32px}footer{border-top:1px solid var(--line);margin:0 4vw;padding:40px 0;display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;font-size:11px;line-height:1.8}footer .wordmark{font-size:16px}footer .wordmark svg{width:33px}footer p{color:var(--muted)}.footer-links{display:flex;flex-direction:column;align-items:start;gap:8px}.footer-links a{min-height:28px}.skip{position:absolute;top:-100px}.skip:focus{top:10px;left:10px;background:var(--bg);padding:20px;z-index:9}.brand-page{padding:60px 5vw}.brand-page h1{font-size:60px;letter-spacing:-3px}.brand-options{display:grid;grid-template-columns:1fr 1fr;gap:30px}.brand-option{background:var(--panel);padding:50px;min-height:320px}.brand-option>img{height:120px;max-width:100%;margin-bottom:40px}.brand-option p{color:var(--muted);line-height:1.6}.swatches{display:flex;gap:15px;margin:35px 0}.swatches span{padding:30px;border:1px solid var(--line)}@media(min-width:1600px){body{max-width:1800px;margin:auto}}@media(max-width:900px){header{flex-wrap:wrap;gap:5px;padding:18px 0}.looks{margin-left:auto}nav{width:100%;justify-content:space-between;gap:12px}.hero{grid-template-columns:1fr;padding-top:45px;gap:40px}.hero h1{font-size:80px}.art{height:420px}.project-grid{grid-template-columns:repeat(2,1fr)}.studio-grid{grid-template-columns:1fr;gap:15px}.section-heading{align-items:start}.section-intro{max-width:270px}.services{gap:25px}.brand-options{grid-template-columns:1fr}}@media(max-width:540px){header{margin:0 6vw}.wordmark{font-size:16px}.wordmark svg{width:35px}.hero{padding:40px 6vw}.hero h1{font-size:58px}.hero .eyebrow{font-size:9px}.intro{font-size:15px}.actions{gap:16px;font-size:11px}.button{padding:16px;gap:15px}.text-link{gap:5px}.art{height:355px}.fragments{scale:.8}.section{padding:62px 6vw}.section-heading{display:block;margin-bottom:30px}.section-intro{margin-top:22px;max-width:none}.project-grid{gap:30px 14px}.project-image{padding:30px 9px;aspect-ratio:1.05}.project h3{font-size:16px}.description{font-size:12px}.status{font-size:9px}.project-arrow svg{width:17px}.services{grid-template-columns:1fr;margin-top:40px;gap:24px}.services h3{margin-top:12px}.contact h2{font-size:57px}.contact-link{font-size:19px}footer{grid-template-columns:1fr 1fr;margin:0 6vw}footer>div:first-child{grid-column:1/-1}.brand-page h1{font-size:42px}.brand-option{padding:25px}.swatches{flex-wrap:wrap}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}

/* Review 02: fixed navigation, connected cube motion, explicit footer destinations. */
html{scroll-padding-top:130px}body{padding-top:110px}header{position:fixed;top:0;left:0;right:0;margin:0;padding:0 4vw;z-index:50;background:var(--bg);box-shadow:0 1px 0 var(--line)}header nav a{border-radius:5px;padding:13px 10px}header nav a:hover{background:var(--panel)}header nav a[aria-current=location]{color:var(--accent);box-shadow:inset 0 -2px var(--accent)}
html[data-look=midnight]{--bg:#171d27;--panel:#202c40;--studio:#1d2839;--accent:#ffae83}
.fragment-stage{inset:20px 0 75px}.cube-scene{width:100%;height:100%;overflow:visible}.cube-face{stroke:#fa9471;stroke-width:.65;stroke-linejoin:round}.cube-top{fill:#ff926b}.cube-left{fill:#ad361e}.cube-right{fill:#e95830}.cube-scene .hero-cube .cube-top{fill:#ffd2a4}.art{isolation:isolate;background:radial-gradient(ellipse at 50% 45%,#35456055,transparent 65%),var(--panel)}.art-top,.art-bottom{pointer-events:none}.art-bottom button{pointer-events:auto}.art-top{top:18px}.project-image{padding-bottom:49px}.project-destination{position:absolute;bottom:12px;left:13px;font-size:11px;font-weight:600;padding:6px 9px;border:1px solid var(--line);background:var(--bg);border-radius:4px}.project:hover .project-destination{background:var(--ink);color:var(--bg)}
.review-footer{margin:0;padding:48px 4vw 25px;display:block;background:var(--studio)}.footer-grid{display:grid;grid-template-columns:1fr 1.2fr 1fr;gap:50px}.review-footer .brand{display:flex;align-items:center;gap:13px;font-size:19px;font-weight:700}.review-footer .brand img{width:45px;height:38px}.review-footer nav{display:flex;flex-direction:column;align-items:stretch;gap:6px;font-size:14px}.review-footer h2{font:11px Consolas,monospace;letter-spacing:1.5px;text-transform:uppercase;margin:0 0 17px;line-height:1.4}.review-footer nav>a{display:flex;align-items:center;gap:13px;min-height:48px;padding:10px 14px;border:1px solid var(--line);border-radius:6px;background:var(--bg)}.review-footer nav>a:hover{border-color:var(--accent);color:var(--accent);background:var(--panel)}.review-footer svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.5}.footer-right nav{gap:6px}.footer-bottom{display:flex;justify-content:space-between;gap:25px;border-top:1px solid var(--line);margin-top:32px;padding-top:22px}.footer-bottom a{padding:10px 0;min-height:44px}.author-link{display:flex;flex-direction:column;gap:3px}.author-tooltip{font-size:10px;color:var(--muted)}.author-link:hover .author-tooltip{color:var(--accent)}
.motion-ready .section h2{transform:translateY(var(--heading-shift,0px));transition:transform .12s linear}.motion-ready .manifesto>span:first-child{transform:translateX(var(--band-shift,0px));will-change:transform}.manifesto{overflow:hidden}.motion-ready .project-image img{transform:scale(var(--image-scale,1));transition:transform .15s linear}.motion-ready .project:hover img{transform:scale(1.04)}.motion-ready .services article{transform:translateY(var(--service-shift,0px))}.paused .section h2,.paused .manifesto>span:first-child,.paused .services article{transition:none}
@media(max-width:900px){body{padding-top:143px}header{padding:14px 4vw;min-height:143px}html{scroll-padding-top:160px}.footer-grid{gap:25px;grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.review-footer nav{width:auto;justify-content:start}.hero{min-height:0}}@media(max-width:540px){header{margin:0;padding:12px 6vw}.review-footer{margin:0;padding:38px 6vw 18px}.footer-grid{gap:22px 12px}.review-footer nav>a{font-size:11px;gap:8px;padding:9px 8px;line-height:1.5}.review-footer nav>a span{overflow-wrap:anywhere}.review-footer svg{width:18px;height:18px}.footer-bottom{font-size:10px;gap:12px}.project-destination{font-size:9px;left:7px;bottom:9px;padding:5px}.project-arrow{right:7px;bottom:11px}.cube-scene{width:110%;max-width:none;margin-left:-5%}.art{height:365px}}@media(prefers-reduced-motion:reduce){.motion-ready .section h2,.motion-ready .manifesto>span:first-child,.motion-ready .services article,.motion-ready .project-image img{transform:none!important}}

/* Categories and real section-color handoffs. */
.more[hidden]{display:none}.category-heading{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--accent);padding:20px 0 0;margin-top:16px;color:var(--accent)}.category-heading h3{font-size:25px}.category-heading>span{font:12px Consolas,monospace}.project-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px}.project-image{aspect-ratio:1.25}.project:hover .project-image{background:color-mix(in srgb,var(--accent) 24%,var(--panel))}.project-heading h3{transition:color .2s}.project-destination{border-color:var(--accent);color:var(--accent)}.project:hover .project-destination{background:var(--accent);color:var(--bg)}.button{background:var(--accent);color:#171d27}.button:hover{background:var(--ink);color:var(--bg)}.services article>.eyebrow{color:var(--accent)}.services article{border-color:var(--accent)}.contact{background:var(--accent);color:#171d27}.contact>p:not(.eyebrow){color:#273347}.contact-link{border-color:#171d27}.contact a:hover{color:#171d27;background:transparent}.contact .eyebrow{color:#273347}.manifesto{position:relative;border:0;background:var(--accent);color:#171d27;min-height:115px;padding:26px 4vw;clip-path:polygon(0 0,100% 13%,100% 100%,0 87%);margin-top:-1px;margin-bottom:-1px}.manifesto:before{content:none}.manifesto .mini-mark svg{color:#171d27}.hero{background:var(--bg)}.studio{border:0}.manifesto{box-shadow:0 35px 0 var(--studio)}body:has(.manifesto) main{background:var(--studio)}.projects{background:var(--bg)}.pattern-seam{height:110px;overflow:hidden;position:relative;margin:-1px 0;line-height:0;--seam-progress:0}.pattern-seam svg{width:100%;height:112px;display:block;transform:scaleY(calc(.7 + var(--seam-progress)*.3));transform-origin:top}.studio-to-tools{background:var(--bg)}.studio-to-tools path{fill:var(--studio)}.tools-to-contact{background:var(--accent)}.tools-to-contact path{fill:var(--bg)}.review-footer nav>a{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}.review-footer nav>a svg{color:var(--accent)}.review-footer nav>a:hover{background:var(--accent);color:#171d27}.review-footer nav>a:hover svg{color:#171d27}.review-footer .footer-sites>a{background:color-mix(in srgb,var(--accent) 10%,var(--bg))}.review-footer .footer-sites>a:hover{background:var(--accent)}
@media(max-width:1000px){.project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:540px){.category-heading h3{font-size:20px}.project-grid{gap:26px 14px}.project-image{aspect-ratio:1.1}.manifesto{font-size:21px;min-height:95px;padding:26px 6vw}.pattern-seam{height:65px}.pattern-seam svg{height:67px}.project h3{overflow-wrap:anywhere}.project-arrow{display:none}}

.fragment-stage{display:block}.cube-scene{position:absolute;inset:0;width:100%;height:100%;max-height:100%;margin:0;overflow:visible}.band-transition{background:linear-gradient(to bottom,var(--bg) 50%,var(--studio) 50%);overflow:hidden;padding:12px 0}.manifesto{box-shadow:none;white-space:nowrap;display:block;min-height:110px;padding:25px 0}.band-track{display:flex;width:max-content;animation:band-flow 32s linear infinite;will-change:transform}.band-track span{flex:none;min-width:100vw;padding-right:35px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes band-flow{to{transform:translateX(-50%)}}.paused .band-track,.band-offscreen .band-track{animation-play-state:paused}.contact-to-footer{background:var(--studio)}.contact-to-footer path{fill:var(--accent)}.review-footer{border-top:0}.review-footer .brand img{filter:drop-shadow(0 0 1px #222)}html[data-look=paper] .review-footer .brand img{filter:brightness(.15)}@media(max-width:540px){.manifesto{min-height:80px;padding:24px 0}.cube-scene{width:100%;margin:0}}@media(prefers-reduced-motion:reduce){.band-track{animation:none!important}}

/* Review 03: full-bleed color fields and unframed, deliberate cube choreography. */
body{max-width:none;margin:0}.hero,.section{padding-left:max(4vw,calc((100vw - 1640px)/2));padding-right:max(4vw,calc((100vw - 1640px)/2))}.art{border:0;background:none;overflow:visible}.art-top{color:var(--muted)}.art-bottom{color:var(--muted)}.fragment-stage{inset:30px 0 70px}.cube-scene{overflow:visible}.band-transition,.manifesto,.pattern-seam{width:100%;max-width:none;margin-left:0;margin-right:0}.review-footer{padding-left:max(4vw,calc((100vw - 1640px)/2));padding-right:max(4vw,calc((100vw - 1640px)/2))}.pattern-seam{isolation:isolate}.pattern-seam svg{min-width:100%;width:100%;max-width:none}.hero{overflow:hidden}@media(max-width:540px){.hero,.section,.review-footer{padding-left:6vw;padding-right:6vw}.art{height:365px}.fragment-stage{inset:35px -8px 75px}}

/* Scroll-driven outline to solid fill; plain text remains accessible and translatable. */
@supports (-webkit-background-clip:text){
 .motion-ready .section h2{--heading-color:var(--ink);color:transparent;-webkit-text-stroke:1px var(--heading-color);background:linear-gradient(90deg,var(--heading-color) 0%,var(--heading-color) var(--heading-fill,0%),transparent var(--heading-fill,0%),transparent 100%);-webkit-background-clip:text;background-clip:text;width:fit-content;max-width:100%;transform:none;transition:none}
 .motion-ready .contact h2{--heading-color:#171d27}
 .paused.motion-ready .section h2{--heading-fill:100%!important}
 @media(prefers-reduced-motion:reduce){.motion-ready .section h2{--heading-fill:100%!important}}
}

/* Paper: the same orange accent as Carbon. */
html[data-look=paper]{--contact-surface:#ff8964}
html[data-look=paper] .contact,html[data-look=paper] .tools-to-contact{background:var(--contact-surface)}
html[data-look=paper] .contact-to-footer path{fill:var(--contact-surface)}
html[data-look=paper] .manifesto,html[data-look=paper] .button{color:#171d27}
html[data-look=paper] .review-footer nav>a:hover,html[data-look=paper] .review-footer nav>a:hover svg{color:#171d27}
html[data-look=paper] .cube-face{stroke:#fa9471}
html[data-look=paper] .cube-top{fill:#ff926b}
html[data-look=paper] .cube-left{fill:#ad361e}
html[data-look=paper] .cube-right{fill:#e95830}
html[data-look=paper] .cube-scene .hero-cube .cube-top{fill:#ffd2a4}
.contact-link{gap:32px;padding:16px 0;min-height:56px;border-bottom:0;background:transparent}
.contact-link svg{transition:transform .25s ease}
.contact-link:hover svg,.contact-link:focus-visible svg{transform:translate(5px,-5px)}
.contact-link:focus-visible{outline:2px solid currentColor;outline-offset:8px}
@media(prefers-reduced-motion:reduce){.contact-link:hover svg,.contact-link:focus-visible svg{transform:none}}

/* Prototype status, visible before the project catalogue. */
.prototype-short{font-size:13px;color:var(--muted);margin-top:22px;line-height:1.5}.prototype-note{margin:0 0 36px;padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:20px;background:var(--panel);color:var(--ink)}.prototype-note h3{font-size:clamp(22px,2.4vw,32px);line-height:1.15;margin:0 0 16px;letter-spacing:-.03em}.prototype-note p{max-width:90ch;font-size:15px;line-height:1.65;margin:12px 0 0;color:var(--muted)}.prototype-note p:last-child{color:var(--ink)}

/* App identity precedes the preview; shared row tracks align all screenshots. */
.project{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:10px;align-content:start}
.project-heading{margin-top:0;gap:10px;min-width:0;align-self:end}
.project-icon{width:36px;height:36px;object-fit:contain;flex:0 0 36px}
.project .description{margin:0 0 6px}
.project .status{margin-top:2px}
.project:hover .project-icon,.motion-ready .project:hover .project-icon{transform:none}
@media(max-width:540px){.project-heading{gap:7px}.project-icon{width:27px;height:27px;flex-basis:27px}.project-heading h3{font-size:14px;letter-spacing:-.35px}.project{row-gap:8px}}

/* Flat 81-cell surface; only the pointed rectangle becomes a rotating solid. */
.art{height:535px}.fragment-stage{inset:42px 0 88px;perspective:1000px}
.flat-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(9,1fr);grid-template-rows:repeat(9,1fr);gap:5px;transform:scale(var(--grid-zoom,1));transform-style:preserve-3d}
.flat-cell{position:relative;min-width:0;min-height:0;perspective:700px;--tile-color:color-mix(in srgb,var(--accent) 24%,var(--bg))}
.tile-lift,.tile-cube{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .65s cubic-bezier(.2,.8,.2,1)}
.tile-face{position:absolute;inset:0;display:block;background:var(--tile-color);border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);backface-visibility:hidden;transition:background 1.4s,box-shadow 1.4s}
.tile-face.front{transform:translateZ(calc(var(--tile-depth)/2))}.tile-face.back{transform:rotateY(180deg) translateZ(calc(var(--tile-depth)/2))}.tile-face.left{transform:rotateY(-90deg) translateZ(calc(var(--tile-depth)/2))}.tile-face.right{transform:rotateY(90deg) translateZ(calc(var(--tile-depth)/2))}.tile-face.top{transform:rotateX(90deg) translateZ(calc(var(--tile-depth)/2))}.tile-face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--tile-depth)/2))}
.tile-cube{transform:translateZ(calc(var(--tile-depth)/-2))}.flat-cell.glowing{--tile-color:color-mix(in srgb,var(--accent) 59%,var(--bg))}.glowing .front{box-shadow:0 0 15px color-mix(in srgb,var(--accent) 18%,transparent)}
.flat-cell.active{z-index:10;--tile-color:var(--accent)}.active .tile-lift{transform:translateY(-12px) translateZ(65px) scale(1.35)}.active .tile-cube{animation:tile-turn 5s linear infinite}.active .top{background:color-mix(in srgb,var(--accent) 65%,white)}.active .left,.active .back{background:color-mix(in srgb,var(--accent) 65%,black)}
@keyframes tile-turn{from{transform:rotateX(-22deg) rotateY(0)}to{transform:rotateX(-22deg) rotateY(360deg)}}
.paused .tile-cube{animation-play-state:paused}.band-transition{padding:5vw 0}.manifesto{width:110%;margin-left:-5%;transform:rotate(-3deg);clip-path:none;padding:25px 0;overflow:hidden}.band-track{transform:none}
.motion-ready .section h2{background-image:linear-gradient(115deg,var(--heading-color) 0%,var(--heading-color) var(--heading-fill,0%),transparent var(--heading-fill,0%),transparent 100%)}
@media(max-width:540px){.art{height:365px}.fragment-stage{inset:36px 0 76px}.flat-grid{gap:3px}.manifesto{padding:24px 0}.active .tile-lift{transform:translateY(-8px) translateZ(30px) scale(1.25)}}
@media(prefers-reduced-motion:reduce){.flat-grid{transform:none}.active .tile-cube{animation:none;transform:rotateX(-18deg) rotateY(25deg)}}

.active .tile-cube{width:var(--tile-depth);height:var(--tile-depth);left:50%;top:50%;margin-left:calc(var(--tile-depth)/-2);margin-top:calc(var(--tile-depth)/-2)}
.fragment-stage{bottom:105px}@media(max-width:540px){.fragment-stage{bottom:94px}}

.tile-lift{pointer-events:none}

/* Square, unframed tiles; quiet artwork without corner captions. */
.art{height:auto;aspect-ratio:1;min-height:0}
.fragment-stage{inset:12px 0 58px;display:flex;align-items:center;justify-content:center}
.flat-grid{width:auto;height:100%;aspect-ratio:1;max-width:100%;flex:none}
.tile-face{border:0}
.art-bottom{bottom:0}
@media(max-width:540px){.art{height:auto;aspect-ratio:1}.fragment-stage{inset:8px 0 52px}}

/* All 81 tiles are solids; proximity lifts a broad, softly weighted area. */
.flat-cell{perspective:800px}
.tile-cube,.active .tile-cube{width:100%;height:100%;inset:0;margin:0;animation:none;transform:translateZ(calc(var(--tile-depth)/-2)) rotateX(-12deg) rotateY(-16deg)}
.tile-lift,.active .tile-lift{transform:translateY(calc(var(--hover-weight,0)*-10px)) translateZ(calc(var(--hover-weight,0)*80px)) scale(calc(.84 + var(--hover-weight,0)*.28));transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.tile-face.top,.active .top{background:color-mix(in srgb,var(--tile-color) 72%,white)}
.tile-face.left,.tile-face.back,.active .left,.active .back{background:color-mix(in srgb,var(--tile-color) 64%,black)}
.tile-face.right{background:color-mix(in srgb,var(--tile-color) 82%,black)}
@media(prefers-reduced-motion:reduce){.tile-lift,.active .tile-lift{transform:scale(calc(.84 + var(--hover-weight,0)*.1))}}

/* Pointer-led camera and a stronger, quick-lighting hover centre. */
.flat-grid{transform:perspective(1100px) rotateX(var(--camera-x,0deg)) rotateY(var(--camera-y,0deg)) scale(var(--grid-zoom,1));transition:transform .22s ease-out}
.tile-lift,.active .tile-lift{transform:translateY(calc(var(--hover-weight,0)*-13px)) translateZ(calc(var(--hover-weight,0)*110px)) scale(calc(.84 + var(--hover-weight,0)*.48))}
.tile-face{transition:background .16s ease-out,box-shadow .14s ease-out}
.tile-face.front{box-shadow:inset 0 0 calc(var(--hover-weight,0)*5px) color-mix(in srgb,var(--accent) 90%,transparent),0 0 calc(var(--hover-weight,0)*13px) color-mix(in srgb,var(--accent) 55%,transparent)}
.art-bottom>div{justify-content:flex-end}
@media(prefers-reduced-motion:reduce){.flat-grid{transform:none}.tile-lift,.active .tile-lift{transform:scale(calc(.84 + var(--hover-weight,0)*.12))}}

/* Both footer columns share the same heading and link-row tracks. */
.footer-grid{row-gap:6px;align-items:start}
.footer-sites-column,.footer-right{display:grid;grid-template-rows:subgrid;grid-row:span 4}
.review-footer .footer-sites,.review-footer .jano-legal-links{display:grid;grid-template-rows:subgrid;grid-row:span 3;gap:6px}
.review-footer .footer-sites>a,.review-footer .jano-legal-links>a{height:100%}
.footer-brand{grid-row:span 4}
@media(max-width:900px){.footer-brand{grid-row:auto;margin-bottom:19px}}

/* Three dark colour worlds, shared across the catalogue and interactive artwork. */
html[data-look=violet]{--bg:#171323;--ink:#f3efff;--muted:#bcb1d0;--accent:#bd9aff;--line:#443655;--panel:#292039;--studio:#201a2e}
html[data-look=ice]{--bg:#101c24;--ink:#edfaff;--muted:#acc5d0;--accent:#79ddf2;--line:#304b59;--panel:#1c303c;--studio:#152732}
html[data-look=rose]{--bg:#21151e;--ink:#fff0f7;--muted:#d0aebf;--accent:#ff94c4;--line:#573347;--panel:#352333;--studio:#2a1b27}
.looks button[data-look=violet]:before{background:#bd9aff;border:0}.looks button[data-look=ice]:before{background:#79ddf2;border:0}.looks button[data-look=rose]:before{background:#ff94c4;border:0}
.project-image{background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 14%,var(--panel)),var(--panel));box-shadow:inset 0 2px 0 color-mix(in srgb,var(--accent) 38%,transparent);transition:background .25s,box-shadow .25s}
.project:hover .project-image,.project:focus-visible .project-image{background:color-mix(in srgb,var(--accent) 23%,var(--panel));box-shadow:inset 0 2px 0 var(--accent),0 12px 30px color-mix(in srgb,var(--accent) 9%,transparent)}
.project-heading h3{font-weight:650}.project-icon{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 22%,transparent))}

/* One rounded card contains the complete tool identity and preview. */
.project{padding:18px;border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:20px;background:color-mix(in srgb,var(--panel) 65%,var(--bg));transition:border-color .2s,background .2s,box-shadow .2s}
.project:hover,.project:focus-visible{border-color:var(--accent);background:var(--panel);box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 10%,transparent)}
.project-image{border-radius:11px;box-shadow:none}
.project:hover .project-image,.project:focus-visible .project-image{box-shadow:none}
@media(max-width:540px){.project{padding:10px;border-radius:15px}.project-image{border-radius:8px}.project-heading{gap:6px}.project-heading h3{font-size:13px}.project-icon{width:23px;height:23px;flex-basis:23px}}

/* A soft moving edge surrounds the complete card without obscuring its content. */
.project{position:relative;isolation:isolate;transform:translateY(var(--card-y,0px)) rotate(var(--card-tilt,0deg));transform-origin:50% 60%}
.project:before{content:'';position:absolute;inset:-1px;padding:1px;border-radius:inherit;pointer-events:none;background:conic-gradient(from var(--edge-angle,0deg),transparent 0deg,var(--accent) 65deg,transparent 125deg,transparent 210deg,var(--accent) 260deg,transparent 320deg);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;opacity:var(--edge-strength,.25)}
.project:hover:before,.project:focus-visible:before{opacity:.85}
.paused .project{transform:none}.paused .project:before{opacity:.25}
@media(prefers-reduced-motion:reduce){.project{transform:none!important}.project:before{display:none}}

/* 81 solids alternate between a 9x9 surface and a 3x3x9 volume. */
.flat-grid{transform:perspective(1200px) rotateX(calc(var(--auto-x,0deg) + var(--camera-x,0deg))) rotateY(calc(var(--auto-y,0deg) + var(--camera-y,0deg))) scale(var(--grid-zoom,1));transition:none;transform-style:preserve-3d}
.flat-cell{perspective:none;transform-style:preserve-3d;transform:translate3d(var(--lattice-x,0px),var(--lattice-y,0px),var(--lattice-z,0px))}
.tile-cube,.active .tile-cube{transform:translateZ(calc(var(--tile-depth)/-2)) rotateX(calc(-12deg * (1 - var(--volume,0)))) rotateY(calc(-16deg * (1 - var(--volume,0))))}
@media(prefers-reduced-motion:reduce){.flat-grid{transform:none}.flat-cell{transform:none}}

/* Exact six-face solids, with one shared 3D coordinate system for all 81 cubes. */
.fragment-stage{display:block;perspective:1000px;touch-action:none;cursor:grab;overflow:visible}
.fragment-stage.dragging{cursor:grabbing}.fragment-stage:focus-visible{outline:2px solid var(--accent);outline-offset:5px;border-radius:12px}
.solid-scene{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.solid-part{position:absolute;width:var(--solid-size);height:var(--solid-size);margin-left:calc(var(--solid-size)/-2);margin-top:calc(var(--solid-size)/-2);transform-style:preserve-3d;--solid-color:color-mix(in srgb,var(--accent) 40%,var(--bg))}
.solid-cube{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .25s}.solid-part.pointed .solid-cube{transform:scale(1.13)}
.solid-face{position:absolute;inset:0;width:var(--solid-size);height:var(--solid-size);backface-visibility:hidden;background:var(--solid-color);border:0;transition:background .4s}
.solid-face.front{transform:translateZ(calc(var(--solid-size)/2))}.solid-face.back{transform:rotateY(180deg) translateZ(calc(var(--solid-size)/2))}.solid-face.left{transform:rotateY(-90deg) translateZ(calc(var(--solid-size)/2));background:color-mix(in srgb,var(--solid-color) 65%,black)}.solid-face.right{transform:rotateY(90deg) translateZ(calc(var(--solid-size)/2));background:color-mix(in srgb,var(--solid-color) 80%,black)}.solid-face.top{transform:rotateX(90deg) translateZ(calc(var(--solid-size)/2));background:color-mix(in srgb,var(--solid-color) 70%,white)}.solid-face.bottom{transform:rotateX(-90deg) translateZ(calc(var(--solid-size)/2));background:color-mix(in srgb,var(--solid-color) 55%,black)}
.solid-part.lit{--solid-color:color-mix(in srgb,var(--accent) 75%,var(--bg))}.solid-part.pointed{--solid-color:var(--accent)}
@media(prefers-reduced-motion:reduce){.solid-part.pointed .solid-cube{transform:none}}

.wordmark>svg,.review-footer .brand-mark{color:var(--accent);fill:currentColor;stroke:none;transition:color .2s}.review-footer .brand-mark{width:45px;height:38px}

/* Games and experiments are independent sections, outside the tools catalogue. */
.separate-projects{border-top:1px solid var(--line);scroll-margin-top:100px}.separate-projects .project-grid{margin-top:32px}.separate-projects .section-intro{max-width:620px;color:var(--muted);line-height:1.6}.separate-projects .project{max-width:620px}header nav{flex-wrap:wrap}@media(max-width:700px){header nav{gap:10px}.separate-projects .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Category ribbons reveal a sheet of cards from behind their shaded lower edge. */
#projects>.project-grid{display:block}
.tool-category{position:relative;margin:26px 0 42px;isolation:isolate}
.category-ribbon{position:relative;z-index:3;margin:0;transform:rotate(-1deg);font-size:inherit;letter-spacing:normal}
.category-toggle{width:100%;display:flex;align-items:center;gap:16px;text-align:left;border:0;border-radius:7px;padding:19px 24px;background:var(--accent);color:var(--bg);box-shadow:0 7px 0 color-mix(in srgb,var(--accent) 55%,var(--bg)),0 13px 18px #0004;transition:filter .2s}
.category-toggle:hover{color:var(--bg);filter:brightness(1.08)}
.category-toggle>span:first-child{font-size:clamp(19px,2.2vw,29px);font-weight:700;letter-spacing:-.04em;flex:1}
.category-count{font:12px Consolas,monospace}.category-toggle svg{width:22px;height:22px;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.category-toggle[aria-expanded=true] svg{transform:rotate(180deg)}
.category-sheet{position:relative;z-index:1;display:grid;grid-template-rows:1fr;transition:grid-template-rows .65s cubic-bezier(.25,.8,.25,1)}
.category-sheet:before{content:'';position:absolute;z-index:2;top:0;left:0;right:0;height:32px;background:linear-gradient(#0005,transparent);pointer-events:none;opacity:.7}
.category-window{min-height:0;overflow:hidden;overflow:clip}
.category-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 20px;padding:34px 8px 22px;transform-origin:50% 0;transform:translateY(0);opacity:1;transition:transform .65s cubic-bezier(.25,.8,.25,1),opacity .4s}
.tool-category.is-closed .category-sheet{grid-template-rows:0fr}
.tool-category.is-closed .category-cards{transform:translateY(-65px);opacity:.15}
.tool-category.is-closed .category-sheet:before{opacity:0}
@media(max-width:1000px){.category-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.category-toggle{padding:16px 14px;gap:10px}.category-toggle>span:first-child{font-size:18px}.category-count{font-size:10px}.category-cards{gap:24px 12px;padding:29px 3px 16px}.tool-category{margin-bottom:32px}.category-toggle svg{width:18px}}
@media(prefers-reduced-motion:reduce){.category-sheet,.category-cards,.category-toggle svg{transition:none}.tool-category.is-closed .category-cards{transform:none}}

.tool-category{width:100vw;margin-left:calc(50% - 50vw);padding:16px 0;overflow:clip}
.category-toggle{padding-left:10vw;padding-right:10vw;border-radius:0}
.category-ribbon{width:102%;margin-left:-1%}
.category-sheet{width:80%;margin:0 auto;background:color-mix(in srgb,var(--accent) 10%,var(--bg));border-radius:0 0 22px 22px;overflow:hidden}
.category-cards{padding:34px clamp(8px,1.5vw,24px) 24px}
@media(max-width:540px){.category-cards{padding:27px 7px 17px;gap:20px 10px}.category-toggle{padding-left:10vw;padding-right:10vw}.category-cards .project{padding:8px}.category-cards .project-heading{flex-wrap:wrap}.category-cards .project-heading h3{font-size:12px}}

/* Six coordinated dark palettes; category colours are previewed in striped swatches. */
html[data-look=violet]{--category-1:#bd9aff;--category-2:#e2a1d5;--category-3:#98b4f5;--category-4:#a9d6cc;--category-5:#d5b6ef;--category-6:#cbbfa5;}
.looks button[data-look=violet]{--palette:linear-gradient(135deg,#bd9aff 0.0% 16.666666666666668%,#e2a1d5 16.666666666666668% 33.333333333333336%,#98b4f5 33.333333333333336% 50.0%,#a9d6cc 50.0% 66.66666666666667%,#d5b6ef 66.66666666666667% 83.33333333333333%,#cbbfa5 83.33333333333333% 100.0%)}
html[data-look=ice]{--category-1:#79ddf2;--category-2:#91b6f7;--category-3:#8ee2c4;--category-4:#c7b7ed;--category-5:#b0d7e6;--category-6:#c1e0a4;}
.looks button[data-look=ice]{--palette:linear-gradient(135deg,#79ddf2 0.0% 16.666666666666668%,#91b6f7 16.666666666666668% 33.333333333333336%,#8ee2c4 33.333333333333336% 50.0%,#c7b7ed 50.0% 66.66666666666667%,#b0d7e6 66.66666666666667% 83.33333333333333%,#c1e0a4 83.33333333333333% 100.0%)}
html[data-look=rose]{--category-1:#ff94c4;--category-2:#e3adf5;--category-3:#ffb8a1;--category-4:#bdacfa;--category-5:#eab8cb;--category-6:#c4cda0;}
.looks button[data-look=rose]{--palette:linear-gradient(135deg,#ff94c4 0.0% 16.666666666666668%,#e3adf5 16.666666666666668% 33.333333333333336%,#ffb8a1 33.333333333333336% 50.0%,#bdacfa 50.0% 66.66666666666667%,#eab8cb 66.66666666666667% 83.33333333333333%,#c4cda0 83.33333333333333% 100.0%)}
html[data-look=forest]{--category-1:#9ed9ad;--category-2:#d0d995;--category-3:#83cbbb;--category-4:#bad1a0;--category-5:#dfc392;--category-6:#a3c9d7;}
.looks button[data-look=forest]{--palette:linear-gradient(135deg,#9ed9ad 0.0% 16.666666666666668%,#d0d995 16.666666666666668% 33.333333333333336%,#83cbbb 33.333333333333336% 50.0%,#bad1a0 50.0% 66.66666666666667%,#dfc392 66.66666666666667% 83.33333333333333%,#a3c9d7 83.33333333333333% 100.0%)}
html[data-look=sunset]{--category-1:#ffbc91;--category-2:#e9a7b4;--category-3:#e6ca87;--category-4:#c6aff1;--category-5:#edbfa6;--category-6:#b4cebf;}
.looks button[data-look=sunset]{--palette:linear-gradient(135deg,#ffbc91 0.0% 16.666666666666668%,#e9a7b4 16.666666666666668% 33.333333333333336%,#e6ca87 33.333333333333336% 50.0%,#c6aff1 50.0% 66.66666666666667%,#edbfa6 66.66666666666667% 83.33333333333333%,#b4cebf 83.33333333333333% 100.0%)}
html[data-look=cobalt]{--category-1:#94b3ff;--category-2:#a6d2ff;--category-3:#b7a3f2;--category-4:#88d9db;--category-5:#d2b9ee;--category-6:#a7c8be;}
.looks button[data-look=cobalt]{--palette:linear-gradient(135deg,#94b3ff 0.0% 16.666666666666668%,#a6d2ff 16.666666666666668% 33.333333333333336%,#b7a3f2 33.333333333333336% 50.0%,#88d9db 50.0% 66.66666666666667%,#d2b9ee 66.66666666666667% 83.33333333333333%,#a7c8be 83.33333333333333% 100.0%)}
html[data-look=forest]{--bg:#121d18;--ink:#f0f6ed;--muted:#b5c8b8;--accent:#9ed9ad;--line:#364f3d;--panel:#213329;--studio:#192a21}
html[data-look=sunset]{--bg:#241a20;--ink:#fff2ea;--muted:#d5bdb6;--accent:#ffbc91;--line:#574048;--panel:#392b32;--studio:#30232a}
html[data-look=cobalt]{--bg:#12192b;--ink:#f0f3ff;--muted:#b1bedb;--accent:#94b3ff;--line:#344463;--panel:#202d46;--studio:#1a253b}
.tool-category:nth-child(6n+1){--accent:var(--category-1)}.tool-category:nth-child(6n+2){--accent:var(--category-2)}.tool-category:nth-child(6n+3){--accent:var(--category-3)}.tool-category:nth-child(6n+4){--accent:var(--category-4)}.tool-category:nth-child(6n+5){--accent:var(--category-5)}.tool-category:nth-child(6n+6){--accent:var(--category-6)}
#games{--accent:var(--category-5)}#experiments{--accent:var(--category-6)}
.looks{gap:4px;flex-shrink:0}.looks button{width:46px;height:46px}.looks button[data-look]:before{inset:5px;background:var(--palette);border:0;box-shadow:inset 0 0 0 1px #ffffff25}.looks button[aria-pressed=true]:after{inset:0;border:2px solid var(--ink)}.looks button:hover:before{filter:brightness(1.13)}
@media(max-width:1150px){header{flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:8px}header nav{width:100%;justify-content:space-between;gap:8px}}
@media(max-width:600px){header .looks{width:100%;justify-content:center;margin:0;order:1}header .wordmark{order:0}header nav{order:2;flex-wrap:wrap}header nav a{padding:10px 7px}.looks button{width:42px;height:44px}.looks{gap:3px}.looks button[data-look]:before{inset:5px 4px}}

/* Current garden and scroll-journey previews; no external embeds or tracking. */
.garden-preview{background:#234b46}.garden-preview>img{width:100%;height:100%;object-fit:contain!important;transform:none!important;padding:7px}
.scroll-preview{background:#ffefcf;overflow:hidden}.scroll-preview-track{position:absolute;inset:0 0 auto;height:200%;display:flex;flex-direction:column;animation:preview-scroll 10s cubic-bezier(.45,0,.3,1) infinite;animation-play-state:paused}
.scroll-preview .scroll-preview-track img{position:static;flex:0 0 50%;height:50%;width:100%;object-fit:contain!important;transform:none!important;padding:0;opacity:1}
.preview-visible .scroll-preview-track{animation-play-state:running}.paused .scroll-preview-track,.preview-hidden .scroll-preview-track{animation-play-state:paused}
.preview-scroll-cue{position:absolute;z-index:2;left:10px;top:10px;right:10px;width:fit-content;max-width:calc(100% - 20px);padding:7px 9px;border:1px solid #2c2632;background:#fff2d5;color:#2c2632;font-size:10px;font-weight:700;line-height:1.4;box-shadow:2px 2px 0 #2c2632}
@keyframes preview-scroll{0%,28%,100%{transform:translateY(0)}42%,83%{transform:translateY(-50%)}}
@media(prefers-reduced-motion:reduce){.scroll-preview-track{animation:none;transform:translateY(-50%)}}

.garden-preview{padding:16px 0 36px}.garden-preview>img{max-height:none;box-shadow:none}.scroll-preview .scroll-preview-track img{max-height:none;box-shadow:none}