/* 太初 Arche V5 — cinematic creative lab. Overrides the functional V4 core stylesheet. */
:root{
  --bg:#090a0c;--white:#f8f8f7;--ink:#f2f2f2;--muted:#929499;--muted2:#656970;
  --soft:#141518;--border:#303137;--blue:#ff5146;--bluehover:#ff7169;
  --accent-red:#ff443c;--accent-glow:#ff654d;
  --container:1216px;
}
html{scroll-padding-top:85px}
body{color:var(--ink);background:#090a0c;overflow-x:hidden;min-height:100vh}
body::before{content:"";position:fixed;pointer-events:none;inset:0;background:radial-gradient(ellipse at 84% 8%,rgba(132,34,31,.065),transparent 36%),radial-gradient(ellipse at 5% 90%,rgba(88,25,21,.05),transparent 38%);z-index:-1}
::selection{background:#9b2f28;color:#fff}
.site-noise{position:fixed;inset:0;pointer-events:none;opacity:.17;background-image:url('assets/noise.png');background-size:160px 160px;z-index:0;mix-blend-mode:screen}
.reading-progress{position:fixed;left:0;top:0;width:0;height:2px;background:linear-gradient(90deg,#ff6d58,#e3282e);z-index:92;box-shadow:0 0 14px rgba(255,75,62,.45);pointer-events:none;transition:width .10s linear}
.site-header{height:79px;z-index:40;background:rgba(9,10,12,.78);border-bottom:1px solid rgba(255,255,255,.075);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px)}
.site-header .container{width:min(calc(100% - 88px),var(--container))}
.nav-shell{gap:20px}
.brand{gap:9px;color:#f8f8f9;letter-spacing:-.7px;font-weight:720}
.brand-mark{width:42px;height:42px;flex-shrink:0;border:1px solid #34353b;border-radius:11px}
.brand-type{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:48px;line-height:1}
.brand-word{font-size:23px;white-space:nowrap}
.brand-roman{display:block;font-size:10px;letter-spacing:1.75px;color:#b7a9aa;font-weight:600;margin:0 0 0 1px;white-space:nowrap;text-transform:none}
.main-nav{gap:32px;margin-left:auto;margin-right:auto}
.main-nav a,.main-nav .nav-scroll{height:79px;position:relative;display:flex;align-items:center;justify-content:center;font-size:13px;color:#999aa1;background:none;border:0;padding:0 2px;font-weight:590;white-space:nowrap;transition:color .22s}
.main-nav a:hover,.main-nav a.active,.main-nav .nav-scroll:hover{color:#f8f8f8}
.main-nav a.active:after{height:2px;background:var(--accent-red);bottom:0;box-shadow:0 0 13px rgba(255,67,55,.6)}
.nav-contact{border:1px solid rgba(255,75,66,.60);background:rgba(255,63,54,.035);color:#ff7167;border-radius:100px;padding:11px 18px;font-size:12px;font-weight:720}
.nav-contact:hover{background:#ff4c42;border-color:#ff4c42;color:#fff;box-shadow:0 0 24px rgba(255,63,54,.18)}
.nav-contact span{margin-left:12px;color:inherit}
main{position:relative;z-index:1}
.container{width:min(calc(100% - 88px),var(--container))}
.view{min-width:0}
/* Cinematic first fold */
.hero-area{position:relative;overflow:hidden;background:radial-gradient(ellipse at 69% 46%,rgba(101,32,29,.11),transparent 50%),linear-gradient(#0a0b0d,#0a0b0d);border-bottom:1px solid rgba(255,255,255,.045)}
.hero-area::after{content:"";position:absolute;left:0;right:0;bottom:0;height:145px;background:linear-gradient(transparent,#0b0c0e);pointer-events:none}
.hero-gridlines{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.014) 1px,transparent 1px);background-size:100px 100px;mask-image:linear-gradient(to right,transparent,#000 55%,transparent)}
.hero-area .hero{position:relative;min-height:650px;padding-top:45px;padding-bottom:53px;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);gap:2%;align-items:center;max-width:1260px;z-index:1}
.hero-content{position:relative;z-index:7;min-width:0;padding:35px 0 16px}
.eyebrow{margin:0 0 30px;gap:12px;font-size:10px;letter-spacing:2.15px;color:#b7b3b2;font-weight:730}
.eyebrow-line{height:2px;width:31px;background:var(--accent-red);border-radius:0;box-shadow:0 0 12px rgba(255,66,58,.35)}
.eyebrow-index{margin-left:6px;color:#725450;letter-spacing:1px}
.hero h1{font-weight:820;font-size:clamp(59px,5.65vw,88px);line-height:1.17;letter-spacing:-4.7px;color:#f4f3f1;margin:0;text-shadow:0 6px 24px rgba(0,0,0,.18)}
.hero h1 span{background:linear-gradient(105deg,#fff4ef 8%,#ffada1 38%,#fa5148 96%);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;color:#ff6a56}
.hero h1 .heading-dot{background:none;color:#fa493f;-webkit-text-fill-color:#fa493f}
.hero-lead{margin:28px 0 29px;max-width:515px;font-size:14px;line-height:2;color:#a9a9ae}
.hero-lead strong{color:#e5e4e7;font-weight:630}
.hero-buttons{gap:12px}
.button{transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;min-height:50px;padding:14px 23px;font-size:13px}
.button-dark{border-color:transparent;background:linear-gradient(130deg,#ff5b4f,#ef3430);color:white;box-shadow:0 8px 30px rgba(242,65,52,.22)}
.button-dark:hover{background:linear-gradient(130deg,#ff7868,#fa4037);box-shadow:0 10px 36px rgba(242,65,52,.33);transform:translateY(-2px)}
.button-outline{color:#e1e0e1;border:1px solid #555258;background:rgba(255,255,255,.025)}
.button-outline:hover{border-color:#9c6a64;background:rgba(255,81,66,.07);transform:translateY(-2px)}
.hero-bottom-line{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:35px;color:#8d8c92;font-size:11px;letter-spacing:.3px}
.status-dot{width:7px;height:7px;background:#ff554b;box-shadow:0 0 0 4px rgba(255,80,64,.13),0 0 17px rgba(255,68,60,.34)}
.short-divider{height:10px;width:1px;background:#4d4e53}
.hero-visual{height:565px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;width:100%;overflow:visible}
.hero-ambient{position:absolute;inset:5% -7% 1% -12%;background:radial-gradient(ellipse at 62% 55%,rgba(255,76,61,.16),transparent 44%),radial-gradient(ellipse at 42% 85%,rgba(139,28,18,.21),transparent 47%);filter:blur(31px);z-index:0}
.hero-art-layer{position:absolute;left:-11%;right:-12%;top:55px;bottom:18px;z-index:2;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform;transition:transform .45s ease-out}
.hero-art-layer img{display:block;width:110%;height:auto;max-width:none;filter:drop-shadow(0 25px 48px rgba(255,52,39,.07))}
.hero-orbit{border:1px solid rgba(255,67,52,.18);width:88%;height:67%;border-radius:50%;transform:rotate(-24deg);position:absolute;left:9%;top:17%;z-index:1;box-shadow:inset 0 0 50px rgba(249,63,52,.012)}
.hero-orbit.orbit-two{width:116%;height:45%;left:-10%;top:31%;transform:rotate(22deg);opacity:.42}
#hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}
.hero-visual-label{position:absolute;right:1%;top:20%;z-index:4;font-size:9px;line-height:2.0;letter-spacing:1.85px;color:#c5c0c0;text-align:left;display:flex;align-items:start;gap:10px}
.visual-label-stroke{width:2px;height:39px;background:linear-gradient(#ff5a46,transparent);margin-top:3px}
.hero-float-card{position:absolute;left:-3%;bottom:65px;z-index:5;display:flex;gap:11px;align-items:center;background:rgba(15,16,18,.75);border:1px solid rgba(255,255,255,.16);box-shadow:0 15px 33px rgba(0,0,0,.32);backdrop-filter:blur(12px);color:#99969a;border-radius:12px;padding:11px 15px 11px 11px;font-size:10px;letter-spacing:1px;line-height:1.6;transform:rotate(-4deg);animation:floatCard 7s ease-in-out infinite}
.hero-float-card strong{color:#f2f0f0;font-size:11px}
.float-card-icon{border-radius:8px;background:#ef453e;color:white;font-size:21px;width:35px;height:35px;display:grid;place-items:center}
.motion-control{position:absolute;z-index:6;right:1%;bottom:10%;display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.16);background:rgba(9,10,12,.57);backdrop-filter:blur(8px);color:#ada8ac;font-size:10px;padding:8px 12px;border-radius:100px;transition:border-color .2s,background .2s}
.motion-control:hover{border-color:#dd5752;background:rgba(27,19,21,.88)}
.motion-control-led{width:7px;height:7px;background:#ff5c50;border-radius:50%;box-shadow:0 0 11px rgba(255,74,61,.75)}
.motion-control[aria-pressed="false"] .motion-control-led{background:#787b80;box-shadow:none}
@keyframes floatCard{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(-2deg)}}
/* Real metrics */
.feature-divider{padding:25px 0 27px;display:grid;grid-template-columns:repeat(3,1fr) 1.12fr;align-items:center;gap:20px;border-top:0;border-bottom:1px solid #303136;margin-top:0}
.metric{display:flex;align-items:baseline;gap:14px;white-space:nowrap}
.metric strong{font-size:31px;color:#f2efed;font-weight:750;letter-spacing:-1px;font-variant-numeric:tabular-nums}
.metric span{font-size:12px;color:#969599}
.metrics-note{text-align:right;font-size:9px;letter-spacing:1.4px;color:#747479;line-height:1.8;margin:0}
.metrics-note em{font-style:normal;color:#ff655d}
/* Shared editorial headings */
.section-topline{font-size:10px;color:#8b8b8e;letter-spacing:1.5px;font-weight:720;align-items:center;margin-bottom:31px}
.section-topline>span{display:inline-flex;align-items:center;gap:10px}
.accent-stroke{width:25px;height:2px;background:#ff4d42;display:inline-block;box-shadow:0 0 12px rgba(255,69,57,.33)}
.section-topline .inline-link{color:#ff7267;font-size:12px;font-weight:670;letter-spacing:0}
.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:40px}
.section-heading h2,.how-section h2{font-size:clamp(35px,3.75vw,54px);font-weight:760;line-height:1.28;letter-spacing:-2.2px;color:#eeeef0}
.section-heading h2 span,.method-intro h2 span{color:#95969a}
.section-heading p{color:#888b92;line-height:2.05;font-size:13px;max-width:370px}
.category-section{padding:100px 0 35px}
.category-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.category-card{min-height:268px;position:relative;display:flex;flex-direction:column;justify-content:space-between;border:1px solid #303136;background:#141516;border-radius:17px;overflow:hidden;padding:24px 24px 22px;isolation:isolate;transition:border-color .3s,transform .3s,box-shadow .3s}
.category-card:hover{transform:translateY(-6px);border-color:#a24e49;box-shadow:0 22px 40px rgba(0,0,0,.28)}
.category-card::before{content:"";inset:0;position:absolute;z-index:-1;background:radial-gradient(circle at 82% 35%,rgba(219,62,52,.19),transparent 48%),linear-gradient(160deg,transparent,#181010);opacity:.9}
.category-two::before{background:radial-gradient(circle at 80% 31%,rgba(83,104,143,.17),transparent 52%),linear-gradient(155deg,#18191c,#111214)}
.category-three::before{background:radial-gradient(circle at 82% 28%,rgba(237,81,51,.14),transparent 52%),linear-gradient(155deg,#181314,#111214)}
.category-top{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.category-count{font-size:10px;letter-spacing:1.2px;color:#9d989a;font-weight:630}
.circle-arrow{width:28px;height:28px;border:1px solid #5d5e63;border-radius:100%;color:#eee;display:grid;place-items:center;font-size:14px;transition:background .24s,border-color .24s}
.category-card:hover .circle-arrow{background:#f0473c;border-color:#f0473c}
.category-bottom{display:grid;gap:9px;position:relative;z-index:2}
.category-bottom strong{font-size:20px;letter-spacing:-.4px;font-weight:725}
.category-bottom small{font-size:11px;color:#929196;line-height:1.5}
.category-symbol{position:absolute;z-index:0;left:50%;top:48%;transform:translate(-50%,-50%);width:172px;height:123px;opacity:.82;pointer-events:none;filter:drop-shadow(0 25px 20px rgba(0,0,0,.31))}
.category-symbol-one i{position:absolute;border:2px solid rgba(255,107,94,.7);border-radius:50% 4% 50% 4%;width:125px;height:73px;left:22px;top:27px;background:linear-gradient(95deg,rgba(255,90,70,.31),transparent 75%);transform:rotate(-35deg) skewX(-12deg)}
.category-symbol-one i:nth-child(2){transform:rotate(-12deg) skewX(-12deg);border-color:#e3a0a0;left:34px;opacity:.72}
.category-symbol-one i:nth-child(3){transform:rotate(14deg) skewX(-12deg);border-color:#d95b51;left:44px;opacity:.57}
.category-symbol-two i{position:absolute;display:block;width:76px;height:76px;border-radius:14px;transform:rotate(21deg);background:linear-gradient(145deg,rgba(236,240,249,.4),rgba(26,30,47,.1));border:1px solid rgba(208,216,234,.47);left:30px;top:19px;box-shadow:inset 10px 12px 13px rgba(255,255,255,.07)}
.category-symbol-two i:nth-child(2){left:74px;top:38px;transform:rotate(-9deg);background:linear-gradient(130deg,rgba(91,119,157,.28),transparent)}
.category-symbol-two i:nth-child(3){left:55px;top:9px;transform:rotate(43deg);opacity:.43}
.category-symbol-three i{display:block;position:absolute;left:45px;top:9px;width:85px;height:108px;border:19px solid rgba(237,240,241,.67);border-bottom:0;border-radius:60px 60px 0 0;box-shadow:7px 8px 28px rgba(255,110,77,.12)}
.category-symbol-three i::after{content:"";position:absolute;left:19px;top:48px;width:18px;height:18px;border-radius:50%;background:#ff6157;box-shadow:0 0 28px rgba(255,82,66,.8)}
/* Portfolio cards */
.section.featured-section{padding-top:102px;padding-bottom:108px}
.works-grid{gap:21px;grid-template-columns:repeat(2,minmax(0,1fr))}
.work-card{border:1px solid #36363a;background:#151517;border-radius:17px;box-shadow:0 10px 28px rgba(0,0,0,.11);overflow:hidden;will-change:transform;transition:transform .28s ease,border-color .25s ease,box-shadow .28s ease;isolation:isolate}
.work-card::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(280px circle at var(--spot-x,50%) var(--spot-y,20%),rgba(255,255,255,.07),transparent 70%);z-index:2;pointer-events:none;opacity:0;transition:opacity .2s}
.work-card:hover::after{opacity:1}
.work-card:hover{transform:translateY(-6px);border-color:#a0544d;box-shadow:0 24px 52px rgba(0,0,0,.27)}
.work-cover{height:290px;isolation:isolate}
.work-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.085))}
.work-cover.flagship{background:radial-gradient(circle at 55% 42%,#6f2730 0%,transparent 48%),linear-gradient(135deg,#25181b,#0c1015 94%)}
.work-cover.cover{background:radial-gradient(circle at 68% 42%,rgba(227,107,81,.48),transparent 42%),linear-gradient(136deg,#572a2b,#231819)}
.work-cover.grid{background:radial-gradient(circle at 67% 41%,rgba(64,122,184,.42),transparent 50%),linear-gradient(136deg,#122533,#161a20)}
.work-cover.drawing{background:radial-gradient(circle at 75% 25%,rgba(116,87,151,.29),transparent 43%),linear-gradient(135deg,#1e1c28,#10141b)}
.work-cover.palette{background:radial-gradient(circle at 70% 41%,#573d51,transparent 50%),#211d23}
.work-cover.habit{background:radial-gradient(circle at 70% 41%,#385f57,transparent 50%),#18211f}
.work-cover.timer{background:radial-gradient(circle at 70% 41%,#354f70,transparent 52%),#19212b}
.work-cover.game2048{background:radial-gradient(circle at 70% 41%,#725042,transparent 52%),#231b19}
.work-cover.memory{background:radial-gradient(circle at 70% 41%,#574a75,transparent 52%),#1b1a26}
.work-cover.choice{background:radial-gradient(circle at 70% 41%,#7d464c,transparent 52%),#2b1a20}
.cover-badge{z-index:2;top:17px;left:18px;border:1px solid rgba(255,255,255,.22);background:rgba(17,17,19,.61);backdrop-filter:blur(10px);color:#f4f3f3;padding:7px 11px;font-size:10px}
.flagship .cover-badge{background:rgba(9,10,14,.55);color:#fff;border-color:rgba(255,255,255,.3)}
.cover-symbol,.flagship .cover-symbol{color:rgba(255,255,255,.65);font-size:9px;top:22px;right:22px}
.work-meta{background:#151517;padding:23px 25px 25px;position:relative}
.work-meta::before{content:"";position:absolute;left:25px;top:-1px;width:38px;height:2px;background:#ff6259}
.work-meta h3{color:#f4f3f2;font-size:20px;font-weight:690}
.work-meta-top>span{color:#ff7269!important;font-size:18px}
.work-meta p{color:#a2a0a4;font-size:12px;margin:11px 0 21px;line-height:1.75}
.work-meta-bottom{align-items:end}
.work-tags span{border:1px solid #36353b;background:#222225;color:#a5a4aa;padding:6px 10px}
.work-open{color:#ff7b6f;font-size:12px}
.work-card .work-link:focus-visible{outline-color:#ff6459}
/* white/light embedded project preview elements are intentionally kept readable */
.cover-preview-foot{color:inherit}
.featured-outro{text-align:center;margin:37px 0 0}
.more-works{display:inline-flex;gap:10px;align-items:center;border:1px solid #48464a;border-radius:99px;padding:12px 23px;color:#e2e0df;font-size:13px;transition:border-color .2s,background .2s}
.more-works strong{font-size:15px;color:#ff6158;font-variant-numeric:tabular-nums}
.more-works span{margin-left:6px;color:#ff6b60}
.more-works:hover{border-color:#ff6559;background:rgba(255,86,72,.07)}
.marquee-band{height:90px;display:flex;align-items:center;overflow:hidden;border-block:1px solid #353336;background:#111113;white-space:nowrap}
.marquee-track{display:inline-flex;align-items:center;gap:40px;min-width:max-content;font-size:36px;letter-spacing:-1px;color:#292a2e;font-weight:860;animation:marqueeFlow 35s linear infinite}
.marquee-track span{font-size:22px;color:#ff5446}
@keyframes marqueeFlow{to{transform:translateX(-50%)}}
/* How works */
.how-section{background:radial-gradient(ellipse at 85% 40%,rgba(116,43,38,.08),transparent 60%),#0d0e10;padding:112px 0 122px;border-bottom:1px solid #252528}
.method-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:43px}
.method-intro h2{margin:0;max-width:700px}
.method-intro p{font-size:13px;line-height:2;color:#94949a;max-width:350px;margin:0}
.how-grid{gap:15px;margin-top:0}
.how-item{min-height:267px;padding:28px 27px;background:linear-gradient(145deg,#171719,#111113);border:1px solid #333336;border-radius:16px;position:relative;overflow:hidden;transition:border-color .25s,transform .25s}
.how-item:hover{border-color:#ac4842;transform:translateY(-4px)}
.how-item::after{content:"";height:150px;width:150px;position:absolute;right:-75px;top:-75px;border:1px solid rgba(255,92,75,.12);border-radius:50%;box-shadow:0 0 0 33px rgba(255,70,45,.015),0 0 0 65px rgba(255,70,45,.01)}
.how-index{font-size:12px;color:#ff645b;font-weight:740;letter-spacing:0;display:flex;justify-content:space-between;align-items:center}
.how-index span{font-size:9px;color:#77787e;letter-spacing:1.4px}
.method-icon{display:grid;place-items:center;border:1px solid #505056;background:#1a1a1e;width:47px;height:47px;border-radius:13px;color:#ff7c71;font-size:22px;margin-top:35px}
.how-item h3{font-size:20px;color:#f0eef0;margin:17px 0 7px}
.how-item p{font-size:12px;line-height:1.9;color:#949298}
/* End card */
.closing-section{padding:100px 0 110px}
.closing-card{min-height:353px;align-items:center;background:radial-gradient(circle at 84% 45%,rgba(232,60,49,.20),transparent 31%),linear-gradient(140deg,#201718,#111113 55%,#171517);border:1px solid #514044;border-radius:21px;overflow:hidden;position:relative;padding:55px 68px}
.closing-card::after{height:370px;width:370px;right:-36px;top:-36px;border:1px solid rgba(255,101,87,.15);box-shadow:0 0 0 30px rgba(255,89,71,.045),0 0 0 65px rgba(255,89,71,.025);z-index:0}
.closing-inner{position:relative;z-index:2}
.closing-overline{font-size:10px;color:#f37971;letter-spacing:2px}
.closing-card h2{font-size:clamp(32px,3.4vw,47px);line-height:1.32;margin:24px 0 13px}
.closing-card h2 span{color:#a7a0a2}
.closing-card p{font-size:13px;margin-bottom:27px;color:#a9a3a5}
.closing-symbol{position:absolute;right:100px;top:69px;width:215px;height:215px;transform:rotate(-10deg);filter:drop-shadow(0 20px 65px rgba(252,83,66,.12));opacity:.67;z-index:1}
.closing-symbol img{width:100%;height:100%;border:1px solid rgba(255,255,255,.1);border-radius:35px}
/* Gallery */
.gallery-hero{position:relative;overflow:hidden;border-bottom:1px solid #2a292d;background:radial-gradient(ellipse at 86% 48%,rgba(139,42,39,.16),transparent 43%),#0b0c0e}
.gallery-intro{padding:97px 0 99px;position:relative;isolation:isolate}
.gallery-intro h1{font-size:clamp(52px,5.9vw,82px);line-height:1.23;letter-spacing:-4px;font-weight:810;color:#f5f3f2}
.gallery-intro h1 span{color:#a9a7aa}
.gallery-intro>p:last-of-type{color:#9b9a9f;font-size:14px;line-height:2}
.gallery-decor{position:absolute;right:8%;top:17%;width:300px;height:300px;opacity:.53;z-index:-1;filter:drop-shadow(0 18px 26px rgba(244,63,50,.09))}
.gallery-decor span{position:absolute;inset:0;border-radius:50%;border:1px solid #a1443b;transform:rotateX(65deg) rotate(-25deg);box-shadow:inset 0 0 45px rgba(228,48,36,.04)}
.gallery-decor span:nth-child(2){inset:30px;border-color:#d86e5b;transform:rotateX(55deg) rotate(48deg)}
.gallery-decor span:nth-child(3){inset:70px;background:radial-gradient(circle at 31% 21%,#ff7d65,#801e1b 40%,#180d0d 80%);border:0;box-shadow:0 0 42px rgba(246,81,63,.22);transform:none}
.gallery-section{padding:45px 0 135px}
.gallery-controls{border-color:#34343a;gap:18px;padding-bottom:22px}
.filter{color:#a5a2a7;border:1px solid transparent;border-radius:50px;font-weight:610}
.filter:hover{background:#1b1b1f;color:#fff}
.filter.active{background:#eb453c;color:#fff;border-color:#eb453c;box-shadow:0 5px 19px rgba(233,68,57,.15)}
.search-field{background:#18191c;color:#a2a3aa;border-color:#39383f}
.search-field input{color:#fff}
.search-field input::placeholder{color:#777780}
.search-field:focus-within{outline:2px solid rgba(255,87,72,.57)}
.gallery-meta{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:21px 0 22px}
.gallery-meta span{font-size:10px;letter-spacing:1px;color:#676a70}
.gallery-count{margin:0;color:#a8a6ad}
.empty-state{background:#17181b;color:#eee}
.empty-state p{color:#94939a}
/* Footer */
.site-footer{background:#0b0c0e;border-top:1px solid #313137;padding:39px 0 44px}
.footer-inner{gap:25px}
.footer-ident{display:flex;gap:10px;align-items:center}
.footer-ident img{border-radius:10px;border:1px solid #38383e}
.footer-brand{font-size:17px;color:#f2f2f1;font-weight:740}
.footer-brand small{font-size:9px;letter-spacing:1.1px;color:#7a7c82;margin-left:3px}
.footer-inner p{margin:6px 0 0;color:#777a80}
.footer-links{color:#a7a5a9;gap:25px}
.footer-links a:hover,.footer-links button:hover{color:#ff7469}
.copyright{color:#686a70}
/* Reuse original interactive tools, with a dark modal frame and a bright practical work area. */
.overlay{background:rgba(0,0,0,.76);backdrop-filter:blur(13px)}
.modal{background:#f7f7f7;border:1px solid #4a3c3e;box-shadow:0 32px 100px rgba(0,0,0,.65)}
.modal-header{background:#171719;color:#f2f2f3;border-bottom:1px solid #37373b}
.modal-eyebrow{color:#ed7066}
.modal-header h2{color:#f3f3f4}
.close-button{background:#343438;color:#f1eded}
.close-button:hover{background:#55403f;color:#fff}
.modal-scroll{background:#f9f8f8;color:#27272b;color-scheme:light}
.modal-scroll .experience-note,.modal-scroll .small-tip,.modal-scroll .contact-lead{color:#74737b}
.modal-scroll .tool-button.primary,.modal-scroll .weapp-link{background:linear-gradient(110deg,#f25a4a,#e73732);border-color:transparent;color:#fff}
.modal-scroll .tool-select button.active{background:#28272c;color:#fff;border-color:#28272c}
.modal-scroll .tool-button:not(.primary){color:#2a292f;background:#fff}
.modal-scroll .tool-button:not(.primary):hover{background:#f7f2f1}
.modal-scroll .panel-soft{background:#eeeef0}
.modal-scroll .timer-ring{color:#26262a}
.modal-scroll .contact-info{background:#f1eff0}
.modal-scroll .contact-info strong{color:#202123}
.modal-scroll .contact-body .button-dark{color:#fff}
.modal-scroll .game-toolbar,.modal-scroll .game-help{color:#4b4b50}
.toast{color:#fff;background:#d93e38}
/* Animation is opt-in by JS: no hidden content when scripts are absent. */
.effects-ready [data-reveal]{opacity:0;transform:translateY(23px);transition:opacity .72s cubic-bezier(.2,.7,.3,1),transform .72s cubic-bezier(.2,.7,.3,1)}
.effects-ready [data-reveal].is-visible{opacity:1;transform:none}
.effects-ready .category-card:nth-child(2),.effects-ready .how-item:nth-child(2){transition-delay:.07s}
.effects-ready .category-card:nth-child(3),.effects-ready .how-item:nth-child(3){transition-delay:.13s}
/* focus + touch + accessibility */
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #ff877c;outline-offset:3px}
@media(max-width:1100px){
  .brand-roman{display:block}
  .hero-area .hero{grid-template-columns:1fr 1fr;gap:0;min-height:615px}
  .hero h1{font-size:clamp(52px,5.8vw,72px)}
  .hero-visual{height:490px}
  .hero-art-layer{left:-18%;right:-16%;top:45px}
  .hero-visual-label{right:0;top:17%}
  .category-card{min-height:250px;padding:20px}
  .category-bottom strong{font-size:18px}
}
@media(max-width:800px){
  .site-header,.main-nav a,.main-nav .nav-scroll{height:67px}
  .site-header .container,.container{width:min(calc(100% - 38px),var(--container))}
  .site-header .nav-shell{gap:12px}
  .brand-mark{width:34px;height:34px}
  .brand-word{font-size:19px}
  .brand-roman{font-size:9px;letter-spacing:1.45px}
  .brand-type{gap:3px}
  .main-nav{gap:16px;margin:0 0 0 auto}
  .main-nav a,.main-nav .nav-scroll{font-size:12px}
  .nav-contact{padding:9px 13px}
  .hero-area .hero{grid-template-columns:1fr;gap:0;min-height:0;padding-top:67px;padding-bottom:39px}
  .hero-content{padding:0 0 15px;max-width:720px}
  .hero h1{font-size:clamp(58px,9.8vw,82px);letter-spacing:-3.5px}
  .hero-lead{font-size:13px;max-width:620px}
  .hero-visual{height:420px;width:min(100%,650px);margin-inline:auto}
  .hero-art-layer{left:-8%;right:-8%;top:12px;bottom:0}
  .hero-visual-label{right:2%;top:12%}
  .hero-float-card{left:8%;bottom:28px}
  .motion-control{right:4%;bottom:5%}
  .feature-divider{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
  .metric{display:grid;gap:0}
  .metrics-note{display:none}
  .category-section{padding-top:74px}
  .section-heading,.method-intro{display:block}
  .section-heading p,.method-intro p{margin-top:15px;max-width:100%}
  .category-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .category-card{min-height:226px;padding:16px}
  .category-bottom strong{font-size:16px}
  .category-bottom small{font-size:10px}
  .category-symbol{transform:translate(-50%,-50%) scale(.78)}
  .section.featured-section{padding-top:75px;padding-bottom:83px}
  .work-cover{height:240px}
  .how-section{padding:80px 0 88px}
  .how-grid{gap:9px}
  .how-item{padding:20px 17px;min-height:250px}
  .how-item h3{font-size:17px}
  .closing-section{padding:70px 0 80px}
  .closing-symbol{right:25px;top:70px;width:175px;height:175px;opacity:.4}
  .gallery-intro{padding:80px 0 75px}
  .gallery-decor{right:0}
  .gallery-section{padding-bottom:85px}
}
@media(max-width:560px){
  .site-header,.main-nav a,.main-nav .nav-scroll{height:62px}
  .site-header .container,.container{width:calc(100% - 34px)}
  .brand{gap:6px}
  .brand-mark{width:32px;height:32px;border-radius:8px}
  .brand-word{font-size:19px}
  .brand-roman{font-size:9px;letter-spacing:1.4px}
  .brand-type{gap:2px}
  .main-nav{gap:14px;margin-left:auto;margin-right:0}
  .main-nav a{font-size:11px}
  .main-nav .nav-scroll{display:none}
  .nav-contact{padding:8px 10px;font-size:10px}
  .nav-contact span{display:none}
  .hero-area .hero{padding-top:53px;padding-bottom:20px}
  .hero-content{padding:0}
  .eyebrow{font-size:9px;margin-bottom:24px;letter-spacing:1.05px;gap:9px}
  .eyebrow-index{display:none}
  .eyebrow-line{width:22px}
  .hero h1{font-size:clamp(48px,10.7vw,62px);line-height:1.15;letter-spacing:-2.8px}
  .hero-lead{margin:19px 0 24px;font-size:12px;line-height:1.95;max-width:100%}
  .hero-lead br{display:none}
  .hero-buttons{gap:8px}
  .hero-buttons .button{min-height:43px;padding:10px 13px;font-size:11px;gap:7px}
  .hero-bottom-line{margin-top:21px;gap:8px;font-size:10px}
  .hero-visual{height:345px;margin-top:6px;overflow:hidden}
  .hero-art-layer{left:-10%;right:-10%;top:19px;bottom:0}
  .hero-art-layer img{width:122%;height:auto}
  .hero-ambient{inset:8% 0 4%}
  .hero-visual-label{top:12%;right:2%;font-size:7px;letter-spacing:1px}
  .hero-float-card{left:3%;bottom:33px;transform:scale(.86) rotate(-3deg);transform-origin:bottom left;font-size:9px;padding:8px;animation:none}
  .float-card-icon{width:29px;height:29px;font-size:16px}
  .motion-control{bottom:13px;right:3%;font-size:9px;padding:6px 9px}
  .feature-divider{padding:20px 0 22px}
  .metric strong{font-size:26px}
  .metric span{font-size:10px}
  .category-section{padding-top:72px;padding-bottom:0}
  .section-topline{font-size:9px;margin-bottom:20px;gap:8px}
  .section-topline>span:last-child:not(:first-child){font-size:9px;color:#77777d}
  .section-heading{margin-bottom:25px}
  .section-heading h2,.how-section h2{font-size:36px;letter-spacing:-1.4px}
  .section-heading p{font-size:12px;margin-top:14px;line-height:1.9}
  .category-grid{grid-template-columns:1fr;gap:11px}
  .category-card{min-height:179px;padding:19px 20px}
  .category-bottom strong{font-size:18px}
  .category-bottom small{font-size:11px}
  .category-symbol{left:73%;top:49%;transform:translate(-50%,-50%) scale(.76);opacity:.62}
  .section.featured-section{padding-top:77px;padding-bottom:71px}
  .works-grid{grid-template-columns:1fr;gap:19px}
  .work-cover{height:240px}
  .work-meta{padding:20px 21px 23px}
  .work-meta h3{font-size:18px}
  .work-meta p{font-size:12px}
  .work-tags span{font-size:10px}
  .featured-outro{margin-top:28px}
  .marquee-band{height:66px}
  .marquee-track{font-size:25px;gap:23px}
  .how-section{padding:74px 0 80px}
  .method-intro{margin-bottom:28px}
  .method-intro p{font-size:12px}
  .how-grid{grid-template-columns:1fr;gap:12px}
  .how-item{min-height:0;padding:22px 22px 24px}
  .method-icon{margin-top:26px;width:41px;height:41px}
  .how-item h3{margin-top:14px}
  .closing-section{padding:68px 0 72px}
  .closing-card{min-height:0;padding:36px 25px;border-radius:18px}
  .closing-card h2{font-size:29px;line-height:1.4}
  .closing-card p{font-size:11px;margin-bottom:24px;max-width:260px}
  .closing-symbol{width:110px;height:110px;right:-18px;top:28%;opacity:.27}
  .closing-card .button{margin-top:0}
  .gallery-intro{padding:70px 0 62px}
  .gallery-intro h1{font-size:49px;letter-spacing:-2.5px}
  .gallery-intro>p:last-of-type{font-size:12px}
  .gallery-intro>p:last-of-type br{display:none}
  .gallery-decor{width:160px;height:160px;right:-48px;top:20%;opacity:.35}
  .gallery-section{padding-top:31px;padding-bottom:72px}
  .gallery-controls{gap:14px}
  .filter-group{margin-right:-17px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none}
  .filter{padding:8px 12px;font-size:11px}
  .search-field{width:100%}
  .gallery-meta span{font-size:8px}
  .site-footer{padding:30px 0 36px}
  .footer-inner{display:flex;flex-direction:column;align-items:flex-start;gap:21px}
}
@media(max-width:360px){
  .nav-shell{gap:7px}
  .main-nav{gap:8px}
  .nav-contact{padding:7px 8px}
  .brand-word{font-size:17px}
  .brand-roman{font-size:8px;letter-spacing:1.1px}
  .hero h1{font-size:46px}
  .hero-buttons .button{font-size:10px;padding:10px 11px}
  .metric strong{font-size:23px}
  .metric span{font-size:9px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .effects-ready [data-reveal]{opacity:1!important;transform:none!important}
  .marquee-track{animation:none}
  .hero-art-layer{transition:none}
}