@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@300;400;700&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --acc:   #c0392b;
  --ink:   #111110;
  --ink2:  #1c1c1a;
  --dim:   #2a2926;
  --mid:   #5a5752;
  --mist:  #9a9690;
  --paper: #f4efe6;
  --pap2:  #ece6da;
  --bar:   50px;
  --gap:   2px;
  --ease:  cubic-bezier(.86,0,.07,1);
  --pop:   cubic-bezier(.34,1.55,.64,1);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body {
  background:var(--ink); color:var(--paper);
  font-family:'Noto Sans JP',sans-serif; font-weight:400;
  overflow-x:hidden; cursor:none;
  -webkit-font-smoothing:antialiased;
}
a { color:inherit; text-decoration:none }
img { max-width:100%; height:auto; display:block }
button { font:inherit; background:none; border:none; cursor:none; color:inherit }

body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px;
}

#rpb {
  position:fixed; top:0; left:0; z-index:999;
  height:2px; width:0%; background:var(--acc);
  transition:width .08s linear; pointer-events:none;
}

#pto {
  position:fixed; inset:0; z-index:9000;
  background:var(--ink); opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
#pto.out { opacity:1; pointer-events:all }

/* CURSOR */
.cd {
  position:fixed; pointer-events:none; z-index:9999;
  width:6px; height:6px; background:var(--paper); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .15s var(--pop),height .15s var(--pop),background .2s,border-radius .2s;
  will-change:left,top;
}
.cr {
  position:fixed; pointer-events:none; z-index:9998;
  width:30px; height:30px;
  border:1.5px solid rgba(244,239,230,.3); border-radius:50%;
  transform:translate(-50%,-50%);
  transition:width .25s var(--pop),height .25s var(--pop),border-color .2s;
  will-change:left,top;
}
body.hov .cd { width:12px; height:12px; background:var(--acc); border-radius:2px }
body.hov .cr { width:44px; height:44px; border-color:rgba(192,57,43,.5) }
body.click .cd { transform:translate(-50%,-50%) scale(.5) }
.tr { position:fixed; border-radius:50%; pointer-events:none; z-index:9990; transform:translate(-50%,-50%); background:rgba(244,239,230,.22) }

/* BAR */
.bar {
  position:fixed; left:0; top:0; z-index:400;
  width:var(--bar); height:100vh;
  background:var(--ink2); border-right:1px solid var(--dim);
  display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:22px 0;
}
.bar-logo {
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:'Dela Gothic One',cursive; font-size:9.5px; letter-spacing:.35em; text-transform:uppercase;
  color:rgba(244,239,230,.3);
  transition:color .25s, letter-spacing .4s var(--ease);
}
.bar-logo:hover { color:rgba(244,239,230,.75); letter-spacing:.46em }
.bar-logo em { color:var(--acc); font-style:normal }
.bar-line {
  width:1px; height:52px;
  background:linear-gradient(to bottom,var(--acc),transparent);
  animation:bpip 3.5s ease-in-out infinite;
}
@keyframes bpip { 0%,100%{opacity:.1;transform:scaleY(.5)} 55%{opacity:.9;transform:scaleY(1)} }

/* NAV BUTTON */
.nav-btn {
  position:fixed; right:18px; top:18px; z-index:600;
  width:42px; height:42px;
  border:1px solid var(--dim); background:var(--ink2);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  transition:border-color .2s, background .2s;
}
.nav-btn:hover { border-color:var(--acc); background:rgba(192,57,43,.08) }
.nav-btn span { display:block; background:var(--paper); transition:all .3s var(--ease); transform-origin:center }
.nav-btn span:nth-child(1) { width:18px; height:1.5px }
.nav-btn span:nth-child(2) { width:13px; height:1.5px; margin-left:-5px }
.nav-btn span:nth-child(3) { width:16px; height:1.5px }
.nav-btn.X span:nth-child(1) { width:16px; transform:translateY(6.5px) rotate(45deg); background:var(--acc) }
.nav-btn.X span:nth-child(2) { opacity:0; transform:scaleX(0) }
.nav-btn.X span:nth-child(3) { width:16px; transform:translateY(-6.5px) rotate(-45deg); background:var(--acc) }

/* SIDENAV */
.sidenav {
  position:fixed; right:0; top:0; z-index:500;
  width:300px; height:100vh;
  background:var(--ink2); border-left:1px solid var(--dim);
  transform:translateX(100%); transition:transform .55s var(--ease);
  display:flex; flex-direction:column; overflow:hidden;
}
.sidenav.on { transform:translateX(0) }
.nav-search { padding:22px 24px 16px; border-bottom:1px solid var(--dim); flex-shrink:0 }
.search-wrap { display:flex; border-bottom:1.5px solid var(--dim); transition:border-color .2s }
.search-wrap:focus-within { border-color:var(--acc) }
.search-in { flex:1; background:none; border:none; outline:none; padding:9px 4px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--paper); letter-spacing:.04em }
.search-in::placeholder { color:var(--mid) }
.search-go { padding:0 8px; color:var(--acc); font-size:14px; transition:transform .2s }
.search-go:hover { transform:scale(1.15) }
.search-res { margin-top:10px; max-height:150px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:rgba(192,57,43,.3) transparent }
.sr { display:block; padding:7px 0; border-bottom:1px solid rgba(244,239,230,.06); font-size:12px; color:rgba(244,239,230,.6); transition:color .2s,padding-left .2s }
.sr:hover { color:var(--acc); padding-left:5px }
.sr-tag { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.18em; text-transform:uppercase; color:var(--acc); opacity:.55; display:block; margin-top:2px }
.sr-mt { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--mid); text-align:center; padding:10px 0 }
.nav-links { flex:1; overflow-y:auto; padding:14px 24px }
.nl {
  display:flex; align-items:center; gap:12px; padding:14px 0;
  border-bottom:1px solid var(--dim);
  font-family:'Dela Gothic One',cursive; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--mist);
  opacity:0; transform:translateX(16px);
  transition:color .2s,padding-left .2s,opacity .35s var(--ease),transform .35s var(--ease);
}
.sidenav.on .nl { opacity:1; transform:none }
.sidenav.on .nl:nth-child(1){transition-delay:.06s}
.sidenav.on .nl:nth-child(2){transition-delay:.11s}
.sidenav.on .nl:nth-child(3){transition-delay:.16s}
.sidenav.on .nl:nth-child(4){transition-delay:.21s}
.sidenav.on .nl:nth-child(5){transition-delay:.26s}
.sidenav.on .nl:nth-child(6){transition-delay:.31s}
.sidenav.on .nl:nth-child(7){transition-delay:.36s}
.sidenav.on .nl:nth-child(8){transition-delay:.41s}
.nl:hover { color:var(--paper); padding-left:6px }
.nl-n { font-size:9px; opacity:.3; flex-shrink:0; font-family:'JetBrains Mono',monospace }
.nl-arr { margin-left:auto; opacity:0; color:var(--acc); transition:opacity .2s,transform .2s }
.nl:hover .nl-arr { opacity:1; transform:translateX(3px) }
.nl-ext .nl-n { color:var(--acc); opacity:.7 }
.nl-ext { border-top:1px solid var(--dim); margin-top:6px; padding-top:16px!important }
.nav-foot { padding:14px 24px; border-top:1px solid var(--dim); display:flex; align-items:center; justify-content:space-between; flex-shrink:0 }
.nav-foot-txt { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; color:var(--mid) }
.nav-tg { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:var(--mist); border:1px solid var(--dim); padding:4px 10px; transition:all .2s }
.nav-tg:hover { border-color:var(--acc); color:var(--acc) }
.overlay { position:fixed; inset:0; background:rgba(17,17,16,.75); backdrop-filter:blur(3px); z-index:450; opacity:0; pointer-events:none; transition:opacity .4s }
.overlay.on { opacity:1; pointer-events:all }

.top-btn {
  position:fixed; right:18px; bottom:22px; z-index:300;
  width:38px; height:38px; border:1px solid var(--dim); background:var(--ink2);
  display:flex; align-items:center; justify-content:center;
  color:var(--mist); font-size:14px;
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .3s var(--pop),transform .3s var(--pop),border-color .2s,color .2s;
}
.top-btn.show { opacity:1; pointer-events:all; transform:none }
.top-btn:hover { border-color:var(--acc); color:var(--acc) }

/* LAYOUT */
.site { margin-left:var(--bar); position:relative; z-index:1 }

/* HERO */
.hero {
  min-height:100vh; display:flex; align-items:center;
  padding:0 6vw; position:relative; overflow:hidden; background:var(--ink);
}
.hero::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(244,239,230,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,.022) 1px,transparent 1px);
  background-size:80px 80px;
}
.hero-mascot {
  position:absolute; right:0; bottom:0; z-index:0;
  width:clamp(260px,36vw,520px); pointer-events:none;
  opacity:.12; mix-blend-mode:multiply;
  filter:contrast(1.15) grayscale(.1);
  mask-image:linear-gradient(to left,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 40%,transparent 75%);
  -webkit-mask-image:linear-gradient(to left,rgba(0,0,0,.85) 0%,rgba(0,0,0,.5) 40%,transparent 75%);
  animation:mFloat 9s ease-in-out infinite alternate;
}
@keyframes mFloat { from{transform:translateY(0)} to{transform:translateY(-20px)} }
.hero-mascot img { filter:invert(1) contrast(.9); width:100%; height:auto }
.hero-body { position:relative; z-index:1; max-width:640px }
.hero-label {
  display:flex; align-items:center; gap:10px; margin-bottom:24px;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.48em; text-transform:uppercase; color:var(--acc);
  opacity:0; animation:riseUp .7s var(--ease) forwards .05s;
}
.hero-label::before { content:''; width:28px; height:1.5px; background:var(--acc) }
.hero-title {
  font-family:'Dela Gothic One',cursive;
  font-size:clamp(4.5rem,10.5vw,10.5rem);
  line-height:.88; letter-spacing:-.025em; color:var(--paper); margin-bottom:10px;
  opacity:0; animation:riseUp .7s var(--ease) forwards .14s;
}
.hero-title-line { position:relative; display:inline-block }
.hero-title-line::after {
  content:''; position:absolute; bottom:-6px; left:0; right:0;
  height:3px; background:var(--acc);
  transform:scaleX(0); transform-origin:left;
  animation:scaleIn .6s var(--ease) forwards .6s;
}
@keyframes scaleIn { to{transform:scaleX(1)} }
.hero-sub { display:block; font-family:'Dela Gothic One',cursive; font-size:.38em; color:var(--mid); letter-spacing:.04em; font-weight:400; margin-top:4px }
.hero-desc {
  font-family:'JetBrains Mono',monospace; font-size:11px; line-height:2; color:var(--mist);
  max-width:360px; margin-bottom:32px; margin-top:20px;
  border-left:2px solid var(--dim); padding-left:14px;
  opacity:0; animation:riseUp .7s var(--ease) forwards .3s;
}
.hero-phrase {
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Dela Gothic One',cursive; font-size:13px; letter-spacing:.04em;
  color:var(--paper); padding:10px 16px;
  border:1.5px solid var(--dim); background:var(--ink2);
  opacity:0; animation:riseUp .6s var(--pop) forwards .5s;
}
.hero-phrase-mark { color:var(--acc) }
.scroll-hint {
  position:absolute; bottom:28px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:5px;
  font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.3em; text-transform:uppercase; color:var(--mid);
  opacity:0; animation:riseUp 1s ease forwards 1.1s; z-index:1;
}
.scroll-hint::after { content:''; width:1px; height:28px; background:linear-gradient(to bottom,var(--acc),transparent); animation:scrollpip 2.5s ease-in-out infinite }
@keyframes scrollpip { 0%,100%{transform:scaleY(.3);opacity:.2} 55%{transform:scaleY(1);opacity:.9} }
@keyframes riseUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* SECTIONS GRID */
.sections-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); background:var(--dim); border-top:var(--gap) solid var(--dim) }
.sec-tile {
  background:var(--ink2); padding:26px 20px;
  display:flex; align-items:center; gap:14px;
  position:relative; overflow:hidden; cursor:none; transition:background .2s;
}
.sec-tile::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease) }
.sec-tile:hover { background:var(--dim) }
.sec-tile:hover::before { transform:scaleX(1) }
.sec-tile-icon { width:40px; height:40px; flex-shrink:0; border:1px solid var(--dim); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:var(--acc); transition:border-color .2s,background .2s }
.sec-tile:hover .sec-tile-icon { border-color:var(--acc); background:rgba(192,57,43,.1) }
.sec-tile-body { flex:1; min-width:0 }
.sec-tile-name { font-family:'Dela Gothic One',cursive; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--paper); margin-bottom:3px; transition:color .2s }
.sec-tile:hover .sec-tile-name { color:var(--acc) }
.sec-tile-hint { font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--mid); letter-spacing:.04em; line-height:1.5 }
.sec-tile-arr { color:var(--acc); opacity:0; font-size:14px; transition:opacity .2s,transform .2s; flex-shrink:0 }
.sec-tile:hover .sec-tile-arr { opacity:1; transform:translateX(3px) }
.sec-tile--shop { background:rgba(192,57,43,.06) }
.sec-tile--shop::before { transform:scaleX(.25) }

.divider { height:var(--gap); background:var(--dim) }

/* POSTS */
.posts { padding:56px 6vw 80px; background:var(--ink) }
.sec-header { display:flex; align-items:center; gap:14px; margin-bottom:28px }
.sec-title { font-family:'Dela Gothic One',cursive; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--paper); white-space:nowrap }
.sec-title span { color:var(--acc) }
.sec-rule { flex:1; height:1px; background:var(--dim) }
.sec-num { font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--mid) }
.filters { display:flex; gap:var(--gap); margin-bottom:22px; flex-wrap:wrap }
.f-btn { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.14em; text-transform:uppercase; padding:6px 13px; border:1px solid var(--dim); color:var(--mid); background:var(--ink2); transition:all .2s }
.f-btn:hover,.f-btn.on { border-color:var(--acc); color:var(--acc); background:rgba(192,57,43,.08) }
.bento { display:grid; grid-template-columns:repeat(12,1fr); gap:var(--gap); background:var(--dim) }
.bento.geq { grid-template-columns:repeat(3,1fr) }
.bento.geq .card { grid-column:span 1!important }
.bento.lst { display:flex; flex-direction:column; gap:var(--gap); background:var(--dim) }
.card { background:var(--ink2); padding:26px 20px; display:flex; flex-direction:column; position:relative; overflow:hidden; cursor:none; opacity:0; transform:translateY(8px); transition:opacity .5s,transform .5s,background .2s }
.card.V { opacity:1; transform:none }
.bento .card:nth-child(1){grid-column:span 8} .bento .card:nth-child(2){grid-column:span 4}
.bento .card:nth-child(3),.bento .card:nth-child(4),.bento .card:nth-child(5){grid-column:span 4}
.bento .card:nth-child(6){grid-column:span 7} .bento .card:nth-child(7){grid-column:span 5}
.bento .card:nth-child(n+8){grid-column:span 6}
.card.hidden { display:none }
.card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.card:hover { background:var(--dim) }
.card:hover::before { transform:scaleX(1) }
.card.gm { border-bottom:2px solid rgba(192,57,43,.3) }
.c-badge { position:absolute; top:12px; right:12px; font-family:'JetBrains Mono',monospace; font-size:7px; letter-spacing:.22em; text-transform:uppercase; color:var(--acc); border:1px solid rgba(192,57,43,.35); padding:2px 7px }
.c-top { display:flex; align-items:center; gap:8px; margin-bottom:12px }
.c-tag { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.2em; text-transform:uppercase; color:var(--acc); opacity:.65 }
.c-num { margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--mid) }
.c-title { font-family:'Dela Gothic One',cursive; font-size:1.12rem; line-height:1.2; color:var(--paper); margin-bottom:8px; transition:color .2s }
.card:hover .c-title { color:var(--acc) }
.c-exc { font-family:'Noto Sans JP',sans-serif; font-weight:300; font-size:11px; line-height:1.75; color:var(--mist); overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical }
.c-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:14px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.08em; color:var(--mid) }
.c-arr { color:var(--acc); opacity:0; transition:opacity .2s,transform .2s }
.card:hover .c-arr { opacity:1; transform:translateX(3px) }
.bento.lst .card { flex-direction:row; align-items:center; gap:18px; padding:16px 20px }
.bento.lst .c-top { flex-shrink:0; width:60px; flex-direction:column; align-items:flex-start; margin-bottom:0 }
.bento.lst .c-exc { display:none }
.bento.lst .c-title { font-size:.95rem; margin-bottom:0 }
.bento.lst .c-foot { padding-top:0; flex-shrink:0 }
.reveal { opacity:0; transform:translateY(14px); transition:opacity .6s var(--ease),transform .6s var(--ease) }
.reveal.R { opacity:1; transform:none }

/* BUTTONS */
.btn {
  font-family:'Dela Gothic One',cursive; font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  padding:13px 24px; border:1.5px solid rgba(244,239,230,.2); background:transparent; color:var(--paper);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:none; position:relative; overflow:hidden; isolation:isolate;
  transition:border-color .2s,transform .15s var(--pop);
}
.btn > * { position:relative; z-index:2 }
.btn::before { content:''; position:absolute; inset:0; background:var(--paper); transform:translateY(101%); transition:transform .3s var(--ease); z-index:1 }
.btn:hover { border-color:var(--paper); transform:translateY(-1px) }
.btn:hover > * { color:var(--ink) }
.btn:hover::before { transform:translateY(0) }
.btn:active { transform:translateY(1px) }
.btn-acc { border-color:var(--acc); color:var(--acc) }
.btn-acc::before { background:var(--acc) }
.btn-acc:hover > * { color:var(--paper)!important }
.btn-acc:hover { border-color:var(--acc) }

/* PAGE HEAD */
.page-head { padding:88px 6vw 44px; border-bottom:1px solid var(--dim); position:relative; overflow:hidden; background:var(--ink) }
.page-head::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--acc) }
.page-head::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(244,239,230,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,.018) 1px,transparent 1px); background-size:80px 80px }
.page-eyebrow { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.44em; text-transform:uppercase; color:var(--acc); display:flex; align-items:center; gap:10px; margin-bottom:16px; position:relative; z-index:1 }
.page-eyebrow::before { content:''; width:26px; height:1.5px; background:var(--acc) }
.page-title { font-family:'Dela Gothic One',cursive; font-size:clamp(2.4rem,5.5vw,5rem); line-height:.9; letter-spacing:-.02em; color:var(--paper); position:relative; z-index:1; margin-bottom:14px }
.page-title em { color:var(--acc); font-style:normal }
.page-sub { font-family:'JetBrains Mono',monospace; font-size:11px; line-height:2; color:var(--mist); border-left:2px solid var(--acc); padding-left:14px; position:relative; z-index:1 }

/* SHOP */
.shop-platforms { display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; position:relative; z-index:1 }
.pl-btn { display:inline-flex; align-items:center; gap:10px; font-family:'Dela Gothic One',cursive; font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:11px 20px; border:1.5px solid; cursor:none; position:relative; overflow:hidden; isolation:isolate; transition:transform .15s var(--pop) }
.pl-btn > * { position:relative; z-index:2 }
.pl-btn::before { content:''; position:absolute; inset:0; transform:translateY(101%); transition:transform .3s var(--ease); z-index:1 }
.pl-btn:hover { transform:translateY(-2px) }
.pl-btn:hover::before { transform:translateY(0) }
.pl-avito { border-color:#0068dc; color:#0068dc }
.pl-avito::before { background:#0068dc }
.pl-avito:hover > * { color:#fff }
.pl-ozon { border-color:#005bff; color:#005bff }
.pl-ozon::before { background:#005bff }
.pl-ozon:hover > * { color:#fff }
.pl-badge { width:22px; height:22px; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:900; flex-shrink:0 }
.shop-body { padding:40px 6vw 80px }
.shop-empty { padding:60px 6vw; text-align:center; display:flex; flex-direction:column; align-items:center; gap:20px }
.shop-empty-ttl { font-family:'Dela Gothic One',cursive; font-size:1.4rem; color:var(--mist) }
.shop-empty-sub { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mid); line-height:2 }

/* POST */
.post-hero { padding:96px 6vw 48px; border-bottom:1px solid var(--dim); position:relative; overflow:hidden; background:var(--ink) }
.post-hero::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--acc) }
.post-hero::after { content:''; position:absolute; inset:0; pointer-events:none; background-image:linear-gradient(rgba(244,239,230,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,.015) 1px,transparent 1px); background-size:80px 80px }
.p-tag { font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.36em; text-transform:uppercase; color:var(--acc); margin-bottom:14px; position:relative; z-index:1 }
.p-h1 { font-family:'Dela Gothic One',cursive; font-size:clamp(1.8rem,4.5vw,3.8rem); line-height:1.05; color:var(--paper); max-width:800px; position:relative; z-index:1 }
.p-meta { display:flex; gap:22px; flex-wrap:wrap; margin-top:18px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.1em; color:var(--mid); position:relative; z-index:1 }
.game-box { margin:0 6vw; border:1px solid var(--dim); background:var(--ink2) }
.game-top { display:flex; align-items:center; justify-content:space-between; padding:8px 14px; border-bottom:1px solid var(--dim); font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em; color:var(--acc) }
.game-top::before { content:'> ' }
.game-frame { position:relative; padding-bottom:56.25%; background:#000 }
.game-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0 }
.game-fs { position:absolute; bottom:8px; right:8px; cursor:pointer; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:var(--acc); border:1px solid rgba(192,57,43,.3); padding:5px 10px; background:rgba(17,17,16,.9); transition:all .2s }
.game-fs:hover { background:rgba(192,57,43,.12); border-color:var(--acc) }
.game-dl { padding:8px 14px; display:flex; gap:8px; flex-wrap:wrap }
.game-dl a { font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border:1px solid var(--dim); color:var(--mist); transition:all .2s }
.game-dl a:hover { border-color:var(--acc); color:var(--acc) }
.post-body { padding:48px 6vw 80px; max-width:calc(660px + 12vw) }
.post-body p { margin-bottom:1.5em; line-height:1.9; font-size:1.02rem; color:rgba(244,239,230,.85) }
.post-body h2 { font-family:'Dela Gothic One',cursive; font-size:1.45rem; color:var(--paper); margin:2.5em 0 .8em; border-left:3px solid var(--acc); padding-left:14px }
.post-body h3 { font-family:'Dela Gothic One',cursive; font-size:1.1rem; color:var(--paper); margin:2em 0 .65em }
.post-body blockquote { border-left:3px solid var(--acc); padding:11px 22px; margin:2em 0; color:var(--mist); font-style:italic; background:var(--ink2) }
.post-body a { color:var(--acc); border-bottom:1px solid rgba(192,57,43,.3); transition:border-color .2s }
.post-body a:hover { border-color:var(--acc) }
.post-body code { font-family:'JetBrains Mono',monospace; font-size:.84em; color:var(--acc); background:rgba(192,57,43,.1); padding:2px 6px }
.post-body pre { background:var(--ink2); border:1px solid var(--dim); padding:20px; overflow-x:auto; margin:1.5em 0; position:relative }
.post-body pre code { background:none; padding:0; color:rgba(244,239,230,.85) }
.copy-btn { position:absolute; top:8px; right:8px; font-family:'JetBrains Mono',monospace; font-size:8px; letter-spacing:.12em; text-transform:uppercase; padding:4px 9px; border:1px solid var(--dim); color:var(--mid); background:var(--ink2); cursor:pointer; transition:all .2s }
.copy-btn:hover { border-color:var(--acc); color:var(--acc) }
.kg-width-wide { width:85vw; min-width:100%; margin:auto calc(50% - 50vw); transform:translate(calc(50vw - 50%),0) }
.kg-width-full { width:100vw; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; position:relative }
.kg-image { max-width:100%; height:auto }
.post-related { padding:40px 6vw 70px; border-top:1px solid var(--dim) }
.post-related h3 { font-family:'Dela Gothic One',cursive; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--mist); margin-bottom:20px; display:flex; align-items:center; gap:10px }
.post-related h3::before { content:''; width:20px; height:1.5px; background:var(--acc) }
.rel-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:var(--gap); background:var(--dim) }
.rel-card { background:var(--ink2); padding:18px 16px; display:block; position:relative; overflow:hidden; transition:background .2s }
.rel-card:hover { background:var(--dim) }
.rel-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease) }
.rel-card:hover::before { transform:scaleX(1) }
.rel-card h4 { font-family:'Dela Gothic One',cursive; font-size:.95rem; color:var(--paper); margin-bottom:5px; transition:color .2s }
.rel-card:hover h4 { color:var(--acc) }
.rel-card span { font-family:'JetBrains Mono',monospace; font-size:8px; color:var(--mid) }

/* PAGE / TAG / ERROR */
.page-body { padding:96px 6vw 80px; background:var(--ink) }
.page-body h1 { font-family:'Dela Gothic One',cursive; font-size:clamp(1.8rem,4vw,3.5rem); color:var(--paper); margin-bottom:36px; padding-bottom:16px; border-bottom:1px solid var(--dim) }
.page-cnt { max-width:660px; line-height:1.9; color:rgba(244,239,230,.8) }
.page-cnt p { margin-bottom:1.4em }
.tag-body { padding:96px 6vw 48px; background:var(--ink) }
.tag-body h1 { font-family:'Dela Gothic One',cursive; font-size:clamp(2.5rem,6vw,5.5rem); line-height:.9; color:var(--paper); margin-bottom:8px }
.tag-desc { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mist); margin-bottom:44px }
.err-wrap { min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:0 6vw; position:relative; background:var(--ink) }
.err-bg { position:absolute; font-family:'Dela Gothic One',cursive; font-size:clamp(8rem,22vw,18rem); color:var(--acc); opacity:.06; line-height:1; pointer-events:none; top:50%; transform:translateY(-50%) }
.err-c { position:relative; z-index:1 }
.err-c h1 { font-family:'Dela Gothic One',cursive; font-size:2.5rem; color:var(--paper); margin-bottom:12px }
.err-c p { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--mist); margin-bottom:26px }

/* FOOTER */
.site-footer { padding:24px 6vw; border-top:1px solid var(--dim); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em; color:var(--mid); background:var(--ink2) }
.ftr-links { display:flex; gap:18px; flex-wrap:wrap }
.ftr-link { color:var(--mid); transition:color .2s; border-bottom:1px solid transparent; padding-bottom:1px }
.ftr-link:hover { color:var(--paper); border-color:var(--acc) }
.ftr-right { display:flex; align-items:center; gap:12px }
.ftr-tg { color:var(--mid); border:1px solid var(--dim); padding:4px 10px; font-size:9px; transition:all .2s }
.ftr-tg:hover { border-color:var(--acc); color:var(--acc) }

/* RESPONSIVE */
@media(max-width:1024px) { .sections-grid { grid-template-columns:repeat(3,1fr) } }
@media(max-width:768px) { .sections-grid { grid-template-columns:repeat(2,1fr) } .bento .card { grid-column:span 12!important } .bento.geq { grid-template-columns:repeat(2,1fr) } }
@media(max-width:640px) {
  :root { --bar:36px }
  body { cursor:auto }
  .cd,.cr,.tr { display:none }
  .hero,.posts,.post-hero,.post-body,.page-body,.page-head,.shop-body,.shop-empty,.tag-body,.err-wrap,.game-box { padding-left:5vw; padding-right:5vw }
  .hero-title { font-size:clamp(3.5rem,14vw,6rem) }
  .hero-mascot { opacity:.08; width:60vw }
  .sections-grid { grid-template-columns:1fr 1fr }
  .nav-btn { right:12px; top:14px }
  .top-btn { right:12px; bottom:16px }
  .site-footer { flex-direction:column; align-items:flex-start }
  .ftr-links { gap:12px }
  .shop-platforms { flex-direction:column }
  .pl-btn { width:100%; justify-content:center }
}
@media(max-width:480px) { .sections-grid { grid-template-columns:1fr } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important } }