:root{--red:#d71921;--bg:#f4f4f4;--ink:#0b0b0b;--blk:#000;--card:#fff;--line:#d9d9d9;--dim:#6b6b6b;--dk-card:#111;--dk-line:#2a2a2a;--r:12px;--pad:clamp(16px,3.2vw,40px);
--serif:"Newsreader",Georgia,serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;--dotf:"Doto","Geist Mono",monospace}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.4 var(--serif);overflow-x:hidden;min-height:100vh}
body:not(.ready) main,body:not(.ready) .foot{opacity:0}
a{color:inherit}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.02em}.dot{font-family:var(--dotf);font-weight:700}.serif{font-family:var(--serif)}
.tiny{font-size:11px;line-height:1.5;color:var(--dim)}.dark .tiny,.dark .mod .tiny{color:#8a8a8a}
.r,.rd{color:var(--red)}.rd{font-style:normal;font-weight:400}
i[data-ic]{display:inline-block;width:16px;height:16px;flex:none}i[data-ic] svg{display:block;width:100%;height:100%;fill:currentColor}
/* dot grid ground */
.dark,.light,.foot{position:relative;isolation:isolate}
.dark::before,.light::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,currentColor 1.2px,transparent 1.6px);background-size:100px 100px;background-position:50px 50px;opacity:.16}
.dark{background:var(--blk);color:#fff}.light{background:var(--bg)}
/* preloader */
#pre{position:fixed;inset:0;z-index:100;background:#000;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;transition:opacity .6s .1s,visibility .7s}
#pre.out{opacity:0;visibility:hidden}.pre-w{font-size:clamp(34px,8vw,64px);letter-spacing:.04em}.pre-s{font-size:11px;color:#777}.pre-s::after{content:"";animation:ell 1s steps(4) infinite}
@keyframes ell{0%{content:""}25%{content:" ."}50%{content:" . ."}75%{content:" . . ."}}
/* nav */
.nav{position:fixed;z-index:50;top:8px;left:50%;transform:translateX(-50%);width:min(576px,calc(100% - 16px));height:48px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;padding:0 6px;background:rgba(200,200,200,.72);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);color:#000;transition:width .45s cubic-bezier(.2,.8,.2,1),background .3s}
.nav.sm{width:min(380px,calc(100% - 16px))}
.nbtn{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;transition:background .2s}.nbtn:hover{background:rgba(0,0,0,.1)}
.logo{text-decoration:none;font-size:18px;letter-spacing:.06em;white-space:nowrap}
.menu{position:absolute;left:0;right:0;top:56px;background:rgba(235,235,235,.92);backdrop-filter:blur(18px);border-radius:8px;padding:8px;display:grid;gap:2px;font:500 13px var(--mono);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.25s}
.nav.open .menu{opacity:1;visibility:visible;transform:none}.menu a{display:flex;gap:10px;align-items:center;padding:12px;border-radius:6px;text-decoration:none}.menu a:hover{background:#000;color:#fff}
/* hero */
.hero{padding:clamp(96px,14vw,150px) var(--pad) clamp(36px,5vw,64px);min-height:min(100svh,860px);display:flex;flex-direction:column;align-items:center;text-align:center}
.label{font-size:12px;color:#bbb;margin-bottom:22px}
.h1{font-weight:400;font-size:clamp(40px,8.4vw,116px);line-height:.96;letter-spacing:-.035em;max-width:11.5em;margin:0 auto}
.h1 span{display:inline-block}
.mods{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:8px;width:min(1180px,100%);margin:clamp(36px,5vw,64px) auto 28px;text-align:left}
.mod{position:relative;border-radius:var(--r);background:var(--dk-card);border:1px solid var(--dk-line);padding:14px;min-height:260px;display:flex;flex-direction:column;overflow:hidden;transition:border-color .3s,transform .3s}
.mod:hover{border-color:#555}
.card .chip,.mod .chip{}
.chip{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.04em;color:#bdbdbd}
.chip .ico{margin-left:auto;color:var(--red)}.hint{margin-left:auto;color:#6d6d6d;transition:color .3s}.cat:hover .hint{color:var(--red)}
.led{width:6px;height:6px;border-radius:50%;background:var(--red);animation:led 2.2s infinite}@keyframes led{50%{opacity:.25}}
.cat{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
#kit{width:100%;flex:1;min-height:0;margin-top:6px;overflow:visible}#kit circle{transition:fill .12s}
#kit .body{transform-origin:50% 90%;transform-box:view-box}#kit.hop .body{animation:hop .45s cubic-bezier(.3,1.6,.5,1)}@keyframes hop{30%{transform:translateY(-7px) scaleY(1.03)}60%{transform:translateY(0) scale(1.03,.95)}}
.cat.purr #kit .body{animation:purr .08s linear infinite}@keyframes purr{50%{transform:translate(.8px,.4px)}}
.fx{position:absolute;pointer-events:none;color:var(--red);width:16px;height:16px;animation:fx 1.8s ease-out forwards}.fx svg{width:100%;height:100%;fill:currentColor}
@keyframes fx{0%{opacity:0;transform:translateY(0) scale(.5)}15%{opacity:1}100%{opacity:0;transform:translate(var(--dx),-120px) scale(1.2)}}
.zz{position:absolute;pointer-events:none;font:500 12px var(--mono);color:#888;animation:fx 2.2s ease-out forwards}
.wash{position:fixed;inset:0;z-index:60;pointer-events:none;background:var(--red);animation:wash 6s ease-in-out forwards;-webkit-mask:radial-gradient(circle,#000 1.4px,transparent 1.8px) 0 0/10px 10px;mask:radial-gradient(circle,#000 1.4px,transparent 1.8px) 0 0/10px 10px}
@keyframes wash{0%{opacity:0}15%{opacity:.55}70%{opacity:.55}100%{opacity:0}}
.note{justify-content:space-between}.big{font-size:clamp(26px,3.2vw,40px);line-height:1.05;letter-spacing:-.025em;font-weight:400;margin:16px 0}.big em,.h2 em{font-style:italic;padding:0 .06em;margin-left:.02em}
.clk{justify-content:flex-start}.clock{font-size:clamp(46px,6.4vw,84px);line-height:1;margin:14px 0 8px;letter-spacing:.02em;white-space:nowrap}.clock small{font-size:.38em;margin-left:.3em;color:var(--red)}
#wmap{width:100%;margin-top:auto;fill:#9a9a9a}#wmap .mer{stroke:var(--red);stroke-width:.5;stroke-dasharray:1.5 2.5;opacity:.8}#wmap .pin{fill:var(--red)}#wmap .ring{fill:none;stroke:var(--red);stroke-width:.6;transform-box:fill-box;transform-origin:center;animation:ring 2s infinite}@keyframes ring{from{transform:scale(1);opacity:1}to{transform:scale(3.4);opacity:0}}
.btn,.send{display:inline-flex;align-items:center;gap:12px;background:#fff;color:#040404;border-radius:4px;padding:12px 16px;font:500 13px var(--mono);text-decoration:none;letter-spacing:.02em;transition:background .2s,color .2s,transform .2s}
.btn:hover,.send:hover{background:var(--red);color:#fff}.btn i,.send i{transition:transform .2s}.btn:hover i,.send:hover i{transform:translateX(3px)}
/* light section */
.light{padding:clamp(64px,9vw,120px) var(--pad) clamp(48px,7vw,96px)}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto 28px}
.h2{font-size:clamp(36px,6vw,76px);line-height:1;letter-spacing:-.03em;font-weight:400}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-width:1180px;margin:0 auto 8px}
.card{position:relative;background:var(--card);border-radius:var(--r);border:1px solid transparent;transition:border-color .3s,box-shadow .3s}.card:hover{border-color:#bbb}
.proj{display:flex;flex-direction:column;overflow:hidden;padding:8px}
.art{position:relative;aspect-ratio:4/3;border-radius:8px;background:#000;overflow:hidden}.art canvas{width:100%;height:100%;display:block}
.meta{padding:14px 8px 10px}.cap{font-size:clamp(18px,2vw,22px);line-height:1.2;letter-spacing:-.01em;margin-top:10px}
.tag{margin-left:auto;font-size:10px;color:var(--dim);border:1px solid var(--line);border-radius:3px;padding:2px 6px}.proj .chip{color:#000}
.mise{color:#fff;display:flex;padding:clamp(12px,3%,22px)}.mw{margin:auto;width:min(100%,360px);display:grid;gap:9px}
.mlogo{font-size:20px;letter-spacing:.05em}
.mpaste{border:1px solid #444;border-radius:6px;padding:11px 12px;font-size:12px;color:#ccc;min-height:40px;display:flex;align-items:center;white-space:nowrap;overflow:hidden}.caret{width:6px;height:13px;background:var(--red);margin-left:2px;animation:led 1s steps(2) infinite}
.mrow{display:flex;align-items:center;gap:10px;background:#111;border:1px solid #2a2a2a;border-radius:6px;padding:8px 10px;opacity:0;transform:translateY(6px);transition:.4s}.mrow.on{opacity:1;transform:none}
.cov{width:34px;height:34px;border-radius:4px;flex:none;background:radial-gradient(circle,#fff 1.2px,transparent 1.6px) 0 0/6px 6px,#222}
.mrow b{display:block;font:500 11px var(--mono);letter-spacing:.04em}.mrow s{text-decoration:none;font:400 10px var(--mono);color:#888}.mrow.rdy s{color:var(--red)}
.dots{margin-left:auto;display:flex;gap:3px}.dots i{width:5px;height:5px;border-radius:50%;background:#555;animation:led 1s infinite}.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}.mrow.rdy .dots i{animation:none;background:var(--red)}.mrow.rdy .dots i:not(:first-child){display:none}
.msteps{display:grid;gap:6px}.msteps div{display:flex;align-items:center;gap:10px;opacity:.15;transition:opacity .4s}.msteps div.on{opacity:1}.msteps em{font:500 10px var(--mono);font-style:normal;width:20px;height:20px;border:1px solid #555;border-radius:50%;display:grid;place-items:center;flex:none}.msteps u{height:3px;border-radius:2px;background:#444;flex:1;text-decoration:none}.msteps div:nth-child(2) u{flex:.8}.msteps div:nth-child(3) u{flex:.9}.msteps div:nth-child(4) u{flex:.6}
.tall{min-height:200px;padding:14px;display:flex;flex-direction:column;justify-content:space-between}.tall .big{margin-bottom:6px}.sm{font-size:clamp(28px,3.6vw,48px)}
#contact{cursor:pointer}.plus{position:absolute;top:10px;right:10px;width:48px;height:48px;border-radius:6px;background:#000;color:#fff;display:grid;place-items:center;transition:transform .3s,background .2s}.plus:hover,#contact:hover .plus{background:var(--red)}.plus i{transition:transform .3s}.plus.open i{transform:rotate(45deg)}
.fwrap{max-width:1180px;margin:0 auto;display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}.fwrap.open{grid-template-rows:1fr}.fin{overflow:hidden;min-height:0}
form{display:grid;grid-template-columns:1fr 1fr;gap:12px;background:#fff;border-radius:var(--r);padding:20px;margin-top:8px}.full{grid-column:1/-1}
label{display:grid;gap:6px;font-size:11px;color:var(--dim)}input,textarea{font:400 16px var(--serif);text-transform:none;letter-spacing:0;color:#000;background:var(--bg);border:1px solid transparent;border-radius:6px;padding:12px;outline:0;resize:vertical;transition:border-color .2s}input:focus,textarea:focus{border-color:var(--red)}
.frow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.send{background:#000;color:#fff}.fnote{font-size:11px;color:var(--dim)}
.foot{background:#000;color:#fff;padding:clamp(40px,6vw,72px) var(--pad) 32px;display:grid;gap:14px}.fl{font-size:clamp(28px,6vw,64px);letter-spacing:.04em;line-height:1}.foot .tiny{max-width:560px}
/* reveal */
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.8,.2,1) calc(var(--d,0)*70ms),transform .7s cubic-bezier(.2,.8,.2,1) calc(var(--d,0)*70ms)}.rv.in{opacity:1;transform:none}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* responsive */
@media (max-width:1100px){.mods{grid-template-columns:1fr 1fr}.clk{grid-column:1/-1}.clk #wmap{max-height:200px}}
@media (max-width:760px){.grid{grid-template-columns:1fr}.mods{grid-template-columns:1fr}.mod{min-height:230px}.cat{min-height:280px}.hero{min-height:0}.tall{min-height:150px}form{grid-template-columns:1fr}.logo{font-size:15px}.sec-h{flex-direction:column;gap:6px}}
@media (min-width:761px) and (max-width:900px){.grid.two{grid-template-columns:1fr 1fr}.h1{font-size:clamp(48px,10vw,80px)}}
@media (max-width:380px){.h1{font-size:36px}.clock{font-size:42px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}html{scroll-behavior:auto}}
.static .rv,.static .mrow,.static .msteps div,.static .fwrap{transition:none!important}.static #pre{display:none}

.light .chip{color:#111}.light .tall .chip{color:#111;font-weight:500}.light .tag{color:#555;border-color:#bbb}.tiny{color:#8a8a8a}.light .tiny{color:#555}

.cls{font-size:12px;border:1px solid #bbb;border-radius:4px;padding:11px 14px;color:#111;transition:background .2s,color .2s}.cls:hover{background:#000;color:#fff}
/* ===== v3: single-headline bento, dark first ===== */
.hero{min-height:0;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(36px,5vw,64px)}
.bento{container-type:inline-size;width:min(1180px,100%);margin:clamp(20px,2.4vw,32px) auto 8px;display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(110px,14cqw,168px);gap:8px;text-align:left}
.bento .h1{grid-column:1/9;grid-row:1/3;margin:0;max-width:none;background:var(--dk-card);border:1px solid var(--dk-line);border-radius:var(--r);padding:clamp(16px,3cqw,36px);font-size:7.2cqw;line-height:.98;letter-spacing:-.035em;display:flex;flex-direction:column;justify-content:flex-end;gap:0;transition:border-color .3s}
.bento .h1:hover{border-color:#555}.bento .h1 span{display:block;white-space:nowrap}
.bento .cat{grid-column:9/13;grid-row:1/3;min-height:0}
.bento .note{grid-column:1/5;grid-row:3;min-height:0}.bento .note .big{font-size:clamp(20px,2.6cqw,34px);margin:auto 0 0}
.bento .clk{grid-column:5/13;grid-row:3;flex-direction:row;align-items:stretch;justify-content:space-between;gap:8px;min-height:0}
.ck{display:flex;flex-direction:column;min-width:0}.bento .clock{font-size:clamp(40px,6.4cqw,80px);margin:auto 0 0}
.bento #wmap{width:52%;align-self:center;margin:0;max-height:100%}
.hero .label{margin-bottom:0}
.proj .art{aspect-ratio:auto;flex:1;min-height:200px}
.grid.b3{grid-template-columns:repeat(3,1fr);grid-auto-rows:clamp(150px,19cqw,230px);margin:0 auto}
.light .bwrap{container-type:inline-size;max-width:1180px;margin:0 auto}
.p1{grid-column:1/3;grid-row:1/3}.p2{grid-column:3;grid-row:1/4}.bcontact{grid-column:1;grid-row:3}.babout{grid-column:2;grid-row:3}
.b3 .tall{min-height:0}.b3 .proj{min-height:0}
@media (max-width:1000px){
 .bento{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
 .bento .h1{grid-column:1/-1;grid-row:auto;font-size:clamp(44px,10.6vw,96px);padding:clamp(18px,4vw,32px);gap:0}
 .bento .h1 span{white-space:normal}
 .bento .cat,.bento .note,.bento .clk{grid-row:auto;grid-column:auto}
 .bento .cat{min-height:300px}.bento .note{min-height:300px}.bento .clk{grid-column:1/-1;min-height:170px}.bento #wmap{width:50%}.bento .note .big{font-size:clamp(24px,4.4vw,34px)}
 .grid.b3{grid-template-columns:1fr 1fr;grid-auto-rows:auto}.p1,.p2{grid-column:1/-1;grid-row:auto}.bcontact,.babout{grid-column:auto;grid-row:auto;min-height:170px}
 .proj .art{min-height:0;aspect-ratio:4/3;flex:none}
}
@media (max-width:640px){.bento{grid-template-columns:1fr}.bento .cat,.bento .note,.bento .clk{grid-column:1/-1}.bento .cat{min-height:300px}.bento .note{min-height:170px}.bento .clk{flex-direction:column;min-height:0}.bento #wmap{width:100%}.grid.b3{grid-template-columns:1fr}.bcontact,.babout{min-height:140px}.bento .h1{font-size:clamp(40px,12.4vw,64px)}}
.mise{align-items:center}.mise .mw{margin:0 auto}
@media (max-width:640px){.bento .clock{font-size:clamp(48px,15vw,64px)}}
.big{word-spacing:.14em}.big em{padding:0 .1em 0 .04em}
.hl{padding-top:.1em}

/* ===== v3: dark everywhere ===== */
.card{background:var(--dk-card);border:1px solid var(--dk-line);color:#fff}.card:hover{border-color:#555}
.light .chip,.dark .card .chip,.card .chip{color:#bdbdbd}.card .tag{color:#9a9a9a;border-color:#3a3a3a}.proj .chip{color:#bdbdbd}
.plus{background:#fff;color:#000}.plus:hover,#contact:hover .plus{background:var(--red);color:#fff}
form{background:var(--dk-card);border:1px solid var(--dk-line)}label{color:#9a9a9a}input,textarea{color:#fff;background:#000;border-color:#2a2a2a}input:focus,textarea:focus{border-color:var(--red)}
.send{background:#fff;color:#000}.cls{border-color:#444;color:#ddd}.cls:hover{background:#fff;color:#000}.fnote{color:#9a9a9a}
.proj .art{background:#000;border:1px solid #1c1c1c}.mise{color:#fff}
body{background:#000}
/* pet: local glow only, no page overlay */
.cat.glow{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 40px -6px rgba(215,25,33,.45)}
.cat{transition:border-color .5s,box-shadow .5s}
#pre .pre-w{visibility:hidden}#pre.fr .pre-w{visibility:visible}

.bcontact{grid-column:1/3}
.bento .note{justify-content:flex-end}.bento .note .big{margin:0}
@media (max-width:1000px){.bcontact{grid-column:1/-1}}
.nav{justify-content:center;width:min(300px,calc(100% - 16px))}.hero{padding-top:clamp(84px,9vw,100px)}

/* v3 footer */
.foot{padding:clamp(56px,8vw,110px) var(--pad) 24px;gap:0;container-type:inline-size;border-top:1px solid var(--dk-line)}
.fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,5vw,64px)}
.fq{font-size:clamp(24px,3.4vw,44px);line-height:1.05;letter-spacing:-.025em;text-align:right}.fq em{padding:0 .1em 0 .04em}
.fname{font-weight:700;line-height:.86;letter-spacing:.01em;display:flex;flex-direction:column;gap:.04em;margin:0;white-space:nowrap}
.fname .fl1{font-size:min(23.4cqw,330px)}.fname .fl2{font-size:min(12.3cqw,175px)}.fname b{color:var(--red)}
.fname span{transition:color .4s}.fname:hover span{color:#d9d9d9}
.fbot{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;border-top:1px solid var(--dk-line);margin-top:clamp(28px,4vw,56px);padding-top:18px}
.fbot span:last-child{text-align:right}.fbot a{display:inline-flex;gap:8px;align-items:center;text-decoration:none;color:#fff}.fbot a:hover{color:var(--red)}
@media (max-width:760px){.fhead{flex-direction:column;align-items:flex-start}.fq{text-align:left}.fbot{grid-template-columns:1fr}.fbot span:last-child{text-align:left}}
.foot{display:block}
@media (max-width:640px){.bento .note{min-height:0}.bento .note .big{margin:0}.bento .note{padding:18px 14px}}
@media (min-width:641px) and (max-width:1000px){.bento .note{min-height:0}.bento .cat{min-height:300px}}
#work{padding:clamp(64px,9vw,120px) var(--pad) clamp(48px,7vw,96px)}

/* v4: fluted-glass footer (own CSS texture, inspired by reeded glass; no image used) */
.foot{--mx:80%;--my:40%;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
background:repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0,rgba(255,255,255,.03) 9px,rgba(0,0,0,.45) 20px,rgba(255,255,255,.12) 22px),radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.42),transparent 52%);
-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%),radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.75) 55%,rgba(0,0,0,.4) 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
-webkit-mask-composite:source-in,source-in;mask-image:linear-gradient(180deg,transparent 0,#000 38%,#000 100%),radial-gradient(circle at var(--mx) var(--my),#000 0,rgba(0,0,0,.75) 55%,rgba(0,0,0,.4) 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
.foot::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");background-size:160px}
.foot .fname span{text-shadow:0 0 28px rgba(0,0,0,.55)}
.foot .fname{mix-blend-mode:normal}
.foot .tiny,.foot .fq{text-shadow:0 0 14px rgba(0,0,0,.9),0 0 3px rgba(0,0,0,.6)}.foot .tiny{color:#cfcfcf}
.fbot{border-top-color:rgba(255,255,255,.28)}