/* Karbon / Atelier. A complete visual layer over the working portfolio. */
html{overflow-x:clip}
:root{--bg:#0b0c0a;--bg-2:#11120f;--surface:#171914;--surface-2:#20231b;--text:#f2f2e9;--text-mid:#b2b6a8;--text-dim:#8b9280;--accent:#d6fa73;--accent-2:#b9db61;--accent-3:#f0f4dc;--accent-ink:#14180b;--accent-soft:#d6fa7314;--border:#e2edc514;--border-2:#e2edc52b;--maxw:1440px;--radius:8px;--radius-sm:6px;--radius-xs:4px;--card-bg:linear-gradient(var(--surface),var(--surface));--glow:0 18px 60px -30px #000;--spot-color:#d6fa7309}
[data-theme=light]{--bg:#f0f1e9;--bg-2:#e6e9dd;--surface:#fafbf4;--surface-2:#e1e6d6;--text:#171c12;--text-mid:#535e48;--text-dim:#5c6851;--accent:#496315;--accent-2:#587824;--accent-3:#284318;--accent-ink:#fff;--accent-soft:#59782414;--border:#20340820;--border-2:#20340838;--card-bg:linear-gradient(var(--surface),var(--surface));--spot-color:#6382270d}
body:before{display:none}body:after{opacity:.026}.wrap{padding-inline:clamp(22px,4.5vw,72px)}
.site-header{background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid var(--border)}.header-inner{min-height:86px}.logo-text{font-size:1.2rem;letter-spacing:-.05em}.logo-muted{font-size:.85em}.logo-mark{background:var(--accent);box-shadow:none;border-radius:0;transform:rotate(-12deg)}.primary-nav a{font-size:.8rem}.header-actions{gap:12px}.header-actions .btn{border-radius:4px}.cmdk-hint{border-radius:3px}.rail{display:none!important}
.btn{border-radius:4px;padding:1.05rem 1.35rem;font-size:.875rem;box-shadow:none!important}.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);text-shadow:none}.btn.primary:after{display:none}.btn.ghost{background:transparent;border-color:var(--border-2)}.btn-sm{padding:.7rem 1rem}.btn.primary:hover{background:var(--accent-2);color:var(--accent-ink)}
.atelier-hero{min-height:calc(100svh - 86px);padding:0;display:flex;flex-direction:column;isolation:isolate;overflow:hidden;background:var(--bg)}.atelier-hero:before,.atelier-hero:after{display:none}.atelier-grid{position:absolute;inset:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:120px 120px;mask-image:linear-gradient(90deg,transparent 35%,#000);z-index:-1;opacity:.65}
.atelier-topline{display:flex;justify-content:space-between;padding-top:24px;color:var(--text-dim);font-size:.72rem;letter-spacing:.04em}.atelier-topline p{display:flex;align-items:center;gap:10px}.atelier-topline .live-dot{background:var(--accent);box-shadow:none}.atelier-topline .hero-clock{margin-left:14px;font-variant-numeric:tabular-nums}.atelier-stage{position:relative;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;flex:1;min-height:590px}.atelier-copy{position:relative;z-index:2;padding:74px 0 60px;pointer-events:none}.atelier-copy a{pointer-events:auto}.atelier-index{font-size:.68rem;letter-spacing:.13em;margin-bottom:27px;color:var(--text-dim)}.atelier-title{font-size:clamp(4.1rem,7.6vw,7.7rem);line-height:.92;font-weight:500;letter-spacing:-.075em;text-wrap:initial;margin:0 0 32px;min-width:0}.atelier-title>span{display:block;white-space:nowrap}.atelier-title em{font-family:var(--serif);font-weight:400;letter-spacing:-.04em;color:var(--accent)}.atelier-title>span:last-child{font-size:.48em;letter-spacing:-.055em;margin-top:.5em}.atelier-lede{font-size:1.02rem;line-height:1.7;color:var(--text-mid);margin-bottom:28px}.atelier-copy .hero-cta{margin:0;gap:26px;align-items:center}.atelier-textlink{font-size:.85rem;border-bottom:1px solid var(--border-2);padding-block:10px;display:flex;gap:22px}.atelier-textlink:hover{color:var(--accent)}
.sculpture-stage{position:absolute;right:-4%;top:0;width:63%;height:100%;z-index:1;pointer-events:none}.atelier-sculpture{width:100%;height:100%;display:block}.sculpture-cross{position:absolute;font:300 20px var(--mono);color:var(--text-dim)}.cross-a{top:13%;right:20%}.cross-b{bottom:19%;left:23%}.sculpture-caption{position:absolute;right:16%;bottom:8%;display:flex;flex-direction:column;gap:8px;color:var(--text-dim);font-size:.6rem;letter-spacing:.13em}.sculpture-caption span:last-child{color:var(--accent)}
.atelier-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border);padding-block:22px;margin-top:10px;gap:24px;font-size:.76rem}.scroll-cue{display:flex;align-items:center;gap:14px}.scroll-cue>span{border:1px solid var(--border-2);border-radius:50%;width:38px;height:38px;display:grid;place-items:center;animation:cue 3s ease-in-out infinite}.atelier-bottom p{color:var(--text)}.atelier-bottom p span{color:var(--text-dim)}.atelier-edition{color:var(--text-dim);font-size:.64rem;letter-spacing:.09em}
@keyframes cue{50%{transform:translateY(5px)}}@keyframes atelier-enter{from{opacity:0;transform:translateY(34px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}@media(prefers-reduced-motion:no-preference){.atelier-title>span{animation:atelier-enter 1.2s cubic-bezier(.16,1,.3,1) both}.atelier-title>span:nth-child(2){animation-delay:.12s}.atelier-title>span:nth-child(3){animation-delay:.24s}.atelier-lede,.atelier-copy .hero-cta{animation:atelier-enter 1.2s .3s both}}
.marquee{background:var(--accent);color:var(--accent-ink);border:0;transform:rotate(-1deg) scale(1.01);padding:22px 0;margin:15px 0 0}.marquee-track span{font:500 clamp(1rem,2vw,1.65rem) var(--font);text-transform:none;letter-spacing:-.035em;color:var(--accent-ink)}.marquee-track i{color:var(--accent-ink);font-size:1rem}.marquee-track{gap:40px}
.selfband{background:var(--bg);padding:90px 0;border-bottom:1px solid var(--border)}.selfband-in{grid-template-columns:.95fr 1.05fr}.selfband-copy h2{font-size:clamp(2.3rem,4vw,4rem);font-weight:400}.selfband .section-sub{font-size:.97rem}.self-do{border:none;border-top:1px solid var(--border-2);border-radius:0;box-shadow:none;background:transparent;padding:18px 0}.self-do:hover:not(.is-static){box-shadow:none;transform:translateX(4px)}.self-key{background:transparent;border:none;font-size:1.3rem}.self-txt{font-size:.8rem}.self-txt b{font-size:.9rem;font-weight:500}
.section{padding:110px 0}.section-head{max-width:900px;margin-bottom:60px}.section-head h2{font-size:clamp(2.8rem,5.4vw,5.6rem);font-weight:400;line-height:.98;letter-spacing:-.055em}.section-head .section-sub{font-size:1rem;max-width:58ch;margin-top:25px}.eyebrow{font-size:.68rem;letter-spacing:.13em}.eyebrow:before{box-shadow:none}.section-head h2 .accent-serif{color:var(--accent)}
.sites{gap:100px;counter-reset:projects}.site{grid-template-columns:minmax(0,.7fr) minmax(0,1.5fr);gap:50px;align-items:center;padding-top:35px;border-top:1px solid var(--border-2);position:relative;counter-increment:projects}.site:before{content:"0" counter(projects);position:absolute;top:-.55em;right:0;font:400 1rem var(--mono);background:var(--bg);padding-left:20px;color:var(--text-dim)}.site.reverse .site-copy{order:0}.site.reverse .site-app{order:1}.site-copy h3{font-size:clamp(2rem,3.1vw,3rem);font-weight:450;line-height:1.05;letter-spacing:-.05em;margin:17px 0 22px}.site-copy>p{font-size:.95rem;line-height:1.7}.demo-tag{padding:0;border:0;border-radius:0;background:none;font-size:.63rem;letter-spacing:.08em}.demo-tag:before{display:none}.site-copy .demo-points li{font-size:.82rem;padding-left:15px}.demo-points li:before{width:4px;height:4px;background:var(--accent);box-shadow:none;border-radius:50%}.site-cta{margin-top:28px}.site-cta .featured-hint{display:none}.browser{border:1px solid var(--border-2);border-radius:8px;box-shadow:0 30px 70px -40px #000;background:var(--surface)}.browser:hover{transform:translateY(-7px);box-shadow:0 40px 70px -40px #000}.browser-bar{padding:10px 14px;background:var(--surface);gap:15px}.browser-url{background:none;border:0;font-size:.61rem}.frame-dots i{width:5px;height:5px;background:var(--text-dim);opacity:.4}.frame-expand{font-size:.62rem}.site-veil{backdrop-filter:none;background:#0003}.veil-txt{background:var(--accent);color:var(--accent-ink);padding:17px 23px;border:none}.veil-ring{width:120px;height:120px}.sites-note{border:none;border-top:1px solid var(--border-2);padding:22px 0;background:none;border-radius:0;font-size:.83rem;max-width:850px}
#work{background:var(--bg-2);border-block:1px solid var(--border)}.demos{gap:90px}.demo{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:60px}.demo-copy h3{font-size:clamp(1.8rem,2.8vw,2.8rem);font-weight:450;letter-spacing:-.045em}.demo-copy>p{font-size:.94rem;line-height:1.75}.demo-points li{font-size:.85rem}.chat-shell,.counter-shell,.json-shell,.featured-frame{background:var(--surface);border:1px solid var(--border-2);border-radius:10px;box-shadow:0 30px 70px -40px #000}.chat-bar{padding:19px;background:var(--surface-2)}.chat-msg.bot{border-radius:2px 14px 14px 14px}.chat-options button{border-radius:6px}.counter-totals{padding:22px}.counter-totals .grand{background:var(--accent);padding:12px;border-radius:4px;color:var(--accent-ink)}.counter-totals .grand p{color:var(--accent-ink)}.counter-totals .value{font-size:1.5rem}.money-row{padding-block:9px}.money-row input{border-radius:4px}.json-bar{padding:16px}.biz-tab,.aud-tab{border-radius:4px}.demo.featured{padding-top:40px;border-top:1px solid var(--border-2)}
.cap-card,.engage-card,.faq-item{border-radius:6px;background:var(--surface);box-shadow:none}.cap-card h3,.engage-card h3{font-weight:500}.contact-card{border-radius:8px;background:var(--surface);border:1px solid var(--border-2);box-shadow:none;padding:60px 30px}.contact-card:before{opacity:.12}.site-footer{padding-top:55px}
/* Avoid the old scroll fade on the new artwork and preserve the native layout. */
.atelier-hero .hero-cta{transform:none;opacity:1;filter:none}.atelier-hero .hero-cta:before{display:none}html.intro:before,html.intro:after{display:none}
@media(min-width:1450px){.atelier-stage{min-height:660px}.sculpture-stage{right:-1%}}
@media(max-width:1100px){.primary-nav ul{gap:16px}.header-actions .cmdk-hint{display:none}.header-inner{gap:18px}.logo-muted{display:none}.atelier-stage{min-height:550px}.atelier-title{font-size:8.1vw}.site{gap:28px;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}.site-copy .demo-points{display:none}.demo{gap:30px}}
@media(max-width:900px){.site,.demo{grid-template-columns:1fr}.site-copy{max-width:640px}.site.reverse .site-app{order:0}.demo.reverse .demo-copy{order:0}.demo.reverse .demo-app{order:1}.site{gap:25px}.site-copy>p{max-width:60ch}.site-copy h3{margin-bottom:12px}.site-cta{margin-top:18px}.site-copy .demo-points{display:none}.selfband-in{grid-template-columns:1fr}.selfband{padding:60px 0}.sites{gap:65px}.section{padding:75px 0}.atelier-edition{display:none}}
@media(max-width:620px){.header-inner{min-height:72px}.header-actions .btn{display:none}.atelier-topline{font-size:.6rem;padding-top:20px}.atelier-topline>p:last-child{display:none}.atelier-stage{display:block;min-height:780px}.atelier-copy{padding-top:48px}.atelier-title{font-size:clamp(3.2rem,12.8vw,5rem)}.atelier-title>span:last-child{font-size:.47em}.atelier-index{font-size:.58rem;margin-bottom:22px}.atelier-lede{font-size:.92rem}.atelier-copy .hero-cta{gap:18px}.atelier-textlink{font-size:.74rem;gap:12px}.sculpture-stage{width:110%;height:440px;top:auto;bottom:0;right:-12%}.sculpture-caption{font-size:.5rem;right:17%;bottom:8%}.cross-a{right:16%}.atelier-bottom{font-size:.67rem;padding-block:18px;align-items:flex-start}.atelier-bottom p{max-width:180px}.atelier-topline,.atelier-stage,.atelier-bottom{padding-inline:22px}.marquee{padding:16px 0}.section-head{margin-bottom:40px}.section-head h2{font-size:2.9rem}.selfband-list{grid-template-columns:1fr 1fr;gap:10px}.self-txt{font-size:.7rem}.self-txt b{font-size:.8rem}.self-key{display:none}.site-copy h3{font-size:2.2rem}.browser-bar{padding:9px 10px}.tiny{font-size:.65rem}.demo-copy>p{font-size:.9rem}.counter-totals .value{font-size:1.13rem}.counter-totals{padding:12px;gap:6px}.contact-card{padding:38px 18px}.section{padding:64px 0}}
@media(prefers-reduced-motion:reduce){.atelier-title>span,.atelier-lede,.atelier-copy .hero-cta,.scroll-cue>span{animation:none}.browser:hover{transform:none}}