/* Miso Editor homepage - pixel style. Basis for each value: design_notes.md */
@font-face{font-family:"Dot16";src:url("../fonts/dot16-latin.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2010-2027,U+2190-2193,U+00D7}
@font-face{font-family:"Dot16";src:url("../fonts/dot16-ja.woff2") format("woff2");font-display:swap;unicode-range:U+3000-30FF,U+4E00-9FFF,U+FF00-FFEF,U+2028-218F,U+2194-2BFF}
@font-face{font-family:"Px12";src:url("../fonts/px12-latin.woff2") format("woff2");font-display:swap;unicode-range:U+0000-00FF,U+2010-2027,U+2190-2193,U+00D7}
@font-face{font-family:"Px12";src:url("../fonts/px12-ja.woff2") format("woff2");font-display:swap;unicode-range:U+3000-30FF,U+4E00-9FFF,U+FF00-FFEF,U+2028-218F,U+2194-2BFF}

:root{
  --bg:#2a1208; --bg2:#3a1f12; --ink:#0e0402; --cream:#f5e6c8; --sand:#d8bf94;
  --orange:#f07c1e; --amber:#f99715; --red:#c0361a; --yellow:#fcbe07;
  --px:4px;               /* 1 "big dot" for borders and shadows */
  --wrap:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--bg) url("../assets/bg_tile.png") repeat;background-size:64px 32px;
  image-rendering:pixelated;color:var(--cream);
  font:16px/1.75 "Dot16",monospace;letter-spacing:.02em;
  cursor:url("../assets/cursor.png") 0 0,auto;
  -webkit-font-smoothing:none;font-smooth:never;
}
img{image-rendering:pixelated;max-width:100%;height:auto}
img.real{image-rendering:auto}
a{color:var(--yellow);text-underline-offset:4px;text-decoration-thickness:2px}
a:hover{color:var(--cream)}
a,button,summary,[role=button]{cursor:url("../assets/cursor.png") 0 0,pointer}
:focus-visible{outline:var(--px) solid var(--yellow);outline-offset:var(--px)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:8px;top:-80px;z-index:50;background:var(--orange);color:var(--bg);padding:12px 16px;font-family:"Px12","Dot16";text-decoration:none}
.skip:focus{top:8px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

h1,h2,h3,.btn,.head-font{font-family:"Px12","Dot16",monospace;font-weight:normal;letter-spacing:.04em}
h2{font-size:36px;line-height:48px;margin:0 0 8px;color:var(--orange);text-shadow:var(--px) var(--px) 0 var(--ink)}
h3{font-size:24px;line-height:36px;margin:0 0 8px;color:var(--cream)}
.lead{color:var(--sand);margin:0 0 32px;max-width:46em}
p{margin:0 0 16px}
section{padding:96px 0 32px;scroll-margin-top:72px}

/* pixel divider: stripes of the logo */
.stripes{height:24px;background:
  linear-gradient(var(--ink) 0 4px,#f23f20 4px 8px,#f65c1b 8px 12px,#f76e18 12px 16px,#f99715 16px 20px,var(--ink) 20px 24px)}
/* hard-edged colour bands only (no blending): stops are equal pairs */

/* 9-slice pixel frames (12px png, 4px slice, drawn at 2x) */
.frame{border:8px solid transparent;border-image:url("../assets/frame_dark.png") 4 fill / 8px stretch;image-rendering:pixelated;padding:16px 20px}
.frame.cream{border-image-source:url("../assets/frame_cream.png");color:#3a1f12}
.frame.cream a{color:#a12c12}
.frame.cream h3{color:#3a1f12}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:56px;padding:12px 24px;
  font-size:24px;line-height:24px;text-decoration:none;border:var(--px) solid var(--ink);
  box-shadow:var(--px) var(--px) 0 var(--ink);transition:none;position:relative;user-select:none}
.btn img{width:32px;height:32px}
.btn-primary{background:var(--orange);color:var(--bg)}
.btn-primary:hover{background:var(--amber);color:var(--bg)}
.btn-secondary{background:var(--red);color:#fff}
.btn-secondary:hover{background:#d4401f;color:#fff}
.btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.btn-primary img{filter:brightness(0) saturate(100%) invert(8%) sepia(40%) saturate(2000%) hue-rotate(350deg)}
.btn-small{min-height:48px;font-size:16px;line-height:16px;padding:8px 16px;gap:8px}
.btn-small img{width:16px;height:16px}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:var(--px) solid var(--ink);box-shadow:0 var(--px) 0 #5a2c14}
.top .wrap{display:flex;align-items:center;gap:16px;height:64px}
.brand{display:flex;align-items:center;min-height:48px;min-width:48px;gap:12px;color:var(--cream);text-decoration:none;font-family:"Px12","Dot16";font-size:24px;white-space:nowrap}
.brand img{width:56px;height:56px;flex:none;image-rendering:auto}
.nav{display:flex;gap:4px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;justify-content:center;min-height:48px;min-width:48px;padding:0 12px;color:var(--sand);text-decoration:none;font-family:"Px12","Dot16";white-space:nowrap}
.nav a:hover{color:var(--bg);background:var(--orange)}
.menu-btn{display:none;align-items:center;gap:10px;margin-left:auto;min-height:48px;min-width:48px;padding:0 12px;background:var(--bg2);color:var(--cream);border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 #5a2c14;font:inherit;font-family:"Px12","Dot16";font-size:16px;cursor:pointer}
.menu-btn .bars{display:block;width:20px;height:4px;background:var(--orange);box-shadow:0 -8px 0 var(--orange),0 8px 0 var(--orange)}
.menu-btn[aria-expanded="true"]{background:var(--yellow);color:var(--bg)}
.menu-btn[aria-expanded="true"] .bars{background:var(--bg);box-shadow:0 -8px 0 var(--bg),0 8px 0 var(--bg)}
.menu-btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
.lang{display:flex;border:var(--px) solid var(--ink);margin-left:8px}
.lang a,.lang span{display:flex;align-items:center;justify-content:center;min-width:48px;min-height:48px;font-family:"Px12","Dot16";text-decoration:none}
.lang span{background:var(--orange);color:var(--bg)}
.lang a{color:var(--cream);background:var(--bg2)}
.lang a:hover{background:var(--amber);color:var(--bg)}

/* hero */
.hero{position:relative;overflow:hidden;background:#1e0a05 url("../assets/hero_sky.png") center bottom/1920px 640px no-repeat;height:640px;border-bottom:var(--px) solid var(--ink)}
.hero .wrap{position:relative;height:100%}
.hero-copy{position:absolute;left:24px;top:48px;width:760px;z-index:5}
.hero-logo{width:96px;height:96px;display:block;margin:0 0 16px}
.hero h1{font-size:48px;line-height:56px;margin:0 0 12px;color:var(--cream);text-shadow:var(--px) var(--px) 0 var(--ink)}
.hero h1 em{font-style:normal;color:var(--orange)}
.hero .sub{display:inline-block;color:var(--cream);background:var(--bg);padding:4px 8px;margin:0 0 24px;box-shadow:var(--px) var(--px) 0 var(--ink)}
.cta{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.status{display:inline-block;background:var(--bg);padding:4px 8px;margin:20px 0 0;font-family:"Px12","Dot16";color:var(--sand)}
.status b{color:var(--yellow);font-weight:normal}
/* trailer thumbnail (2026-10-30): picture + play mark + length in a pixel frame, YouTube loads only after the click (site.js) */
.hero-foot{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;margin-top:20px}
.hero-foot .status{margin:0}
.trailer-thumb{position:relative;display:block;flex:none;border:8px solid transparent;border-image:url("../assets/frame_orange.png") 4 / 8px stretch;image-rendering:pixelated;background:var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);line-height:0}
.trailer-thumb>img{display:block;width:192px;height:108px;image-rendering:auto}
.tt-play{position:absolute;left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;display:flex;align-items:center;justify-content:center;background:var(--red);border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink)}
.tt-play img{width:32px;height:32px;image-rendering:pixelated}
.tt-time{position:absolute;right:4px;bottom:4px;padding:2px 6px;font-family:"Px12","Dot16";font-size:16px;line-height:16px;color:#fff;background:var(--ink)}
.trailer-thumb:hover .tt-play{background:#d4401f}
.trailer-thumb:active{transform:translate(var(--px),var(--px));box-shadow:none}
.scene{position:absolute;left:0;right:0;bottom:0;height:100%;pointer-events:none}
/* hero demo (2026-10-30 round 2): 3D model (video, 8 directions x 16 walk frames) -> 2D sprite sheet (hero_sheet8.png =
   8 directions d00,d08..d56 x 8 frames f00,f02..f14 of the 64-direction walk, cells 34x46 + 1 px lines, 1x) with the cell of
   the 3D's current direction / frame lit, + "in game" = that cell at --g x. js/site.js moves .hd-hit and .hd-play */
.hero{height:748px}
.hero-copy{width:560px}
.hero-demo{--h:264px;--g:2;--rw:calc(var(--h) * 322 / 436 + 335px);position:absolute;right:calc(50% - 560px);bottom:16px;z-index:4}
.hd-row{display:flex;align-items:flex-start}
.hd-box{position:relative;background:#1a0904;border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 #5a2c14}
.hd-3d video{display:block;height:var(--h);width:calc(var(--h) * 322 / 436);background:#1a0904}
.hd-tag{margin:0 0 4px;width:max-content;max-width:100%;padding:2px 6px;font-family:"Px12","Dot16";font-size:16px;line-height:20px;color:var(--bg);background:var(--orange)}
.hd-tag span{color:var(--bg);font-size:12px}
.hd-arrow{width:44px;flex:none;margin-top:calc(24px + var(--h) / 2 - 30px);text-align:center;font-family:"Px12","Dot16";color:var(--orange)}
.hd-arrow b{display:block;font-size:40px;line-height:44px;font-weight:normal}
.hd-arrow small{display:block;white-space:nowrap;font-size:12px;line-height:14px;color:var(--cream);background:var(--bg);padding:2px 0}
.hd-sh{width:283px}
.hd-sheet{width:279px;height:375px;background:#e9d7b4}
.hd-sheet img{display:block;width:279px;height:375px;image-rendering:pixelated}
.hd-hit{position:absolute;left:0;top:0;width:34px;height:46px;outline:var(--px) solid var(--yellow);box-shadow:0 0 0 4px rgba(255,214,64,.35)}
.hd-game{display:flex;align-items:center;gap:8px;width:283px;margin-top:8px}
.hd-game .hd-box{flex:none;background:#e9d7b4}
.hd-play{width:calc(34px * var(--g));height:calc(46px * var(--g));background:url("../assets/hero_sheet8.png") 0 0/calc(279px * var(--g)) calc(375px * var(--g)) no-repeat;image-rendering:pixelated}
.hd-game p{margin:0;padding:2px 6px;font-family:"Px12","Dot16";font-size:12px;line-height:16px;color:var(--sand);background:var(--bg);border:var(--px) solid var(--ink)}
.hd-game p b{color:var(--cream);font-weight:normal}
.hd-cap{width:max-content;max-width:var(--rw);margin:6px 0 0;padding:2px 8px;font-family:"Px12","Dot16";font-size:16px;line-height:20px;color:var(--sand);background:var(--bg);border:var(--px) solid var(--ink)}
/* 1101-1439: copy narrower, 3D shorter */
@media (min-width:1101px) and (max-width:1439px){
  .hero-copy{width:520px}
  html[lang="en"] .hero h1{font-size:44px;line-height:52px}
  .hero-demo{--h:220px;right:16px}
}
.walker{--s:2;position:absolute;bottom:40px;z-index:2;height:calc(42px * var(--s));width:calc(var(--fw) * 1px * var(--s));
  background-image:var(--img);background-repeat:no-repeat;background-size:calc(var(--fw) * var(--n) * 1px * var(--s)) 100%;image-rendering:pixelated;
  animation:frames var(--spd) steps(var(--n)) infinite, across var(--dur) linear infinite;animation-delay:0s,var(--delay)}
.walker.ltr{animation-name:frames,across-ltr}
@keyframes frames{to{background-position:calc(var(--fw) * var(--n) * -1px * var(--s)) 0}}
@keyframes across{from{transform:translateX(100vw)}to{transform:translateX(-160px)}}
@keyframes across-ltr{from{transform:translateX(-160px)}to{transform:translateX(100vw)}}
@media (prefers-reduced-motion:reduce){.walker{animation:none;transform:translateX(var(--rest))}}

/* flow */
.flow{display:grid;gap:24px}
.flow-row{display:grid;grid-template-columns:200px 1fr;gap:24px;align-items:start}
.flow-tag{font-family:"Px12","Dot16";font-size:24px;line-height:36px;color:var(--bg);background:var(--orange);border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);padding:12px 16px;text-align:center}
.flow-tag small{display:block;font-size:16px;line-height:24px}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}
.step{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:start}
.step .pic{width:120px;height:120px;background:#1a0904;border:var(--px) solid var(--ink);display:flex;align-items:center;justify-content:center;overflow:hidden}
.step .pic img{width:100%;height:100%;object-fit:contain}
.step .pic img.px,.step .pic img.nat{width:auto;height:auto;max-width:calc(100% - 8px);max-height:calc(100% - 8px)}
.step .pic img.px{image-rendering:pixelated}
.step h3{display:flex;gap:12px;align-items:baseline}
.num{font-family:"Px12","Dot16";color:var(--orange)}
.tag{display:inline-block;font-family:"Px12","Dot16";font-size:16px;line-height:24px;padding:0 8px;border:2px solid var(--sand);color:var(--sand);margin-left:4px}
.tag.free{border-color:var(--yellow);color:var(--yellow)}
.step p{margin:0;color:var(--sand)}
.anim{--fw:0;--fh:0;--n:1;--z:1;width:calc(var(--fw) * 1px * var(--z));height:calc(var(--fh) * 1px * var(--z));
  background-image:var(--img);background-repeat:no-repeat;background-size:calc(var(--fw) * var(--n) * 1px * var(--z)) calc(var(--fh) * 1px * var(--z));
  animation:frames2 var(--spd,1s) steps(var(--n)) infinite;max-width:100%}
@keyframes frames2{to{background-position:calc(var(--fw) * var(--n) * -1px * var(--z)) 0}}
.anim.px{image-rendering:pixelated}
.anim.real{image-rendering:auto}
@media (prefers-reduced-motion:reduce){.anim{animation:none}}
/* (2026-10-30) whole body inside the 112 px box (120 - 2 x 4 px border), 4 px margin: scale by the larger side */
.step .pic .anim{--z:min(calc(104 / var(--fw)), calc(104 / var(--fh)))}

/* examples */
.ex-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.ring{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;background:#1a0904;border:var(--px) solid var(--ink);padding:16px}
.ring figure{margin:0;display:flex;flex-direction:column;align-items:center}
.ring figcaption{font-family:"Px12","Dot16";font-size:16px;color:var(--sand);line-height:24px}
.cap{font-size:16px;color:var(--sand);margin:8px 0 0}
.pixrow{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;background:#e9d7b4;border:var(--px) solid var(--ink);padding:24px;color:#3a1f12}
.pixrow figure{margin:0}
.pixrow figcaption{font-size:16px;line-height:24px;margin-top:8px;max-width:30ch}
.sheet-wide{background:#1a0904;border:var(--px) solid var(--ink);padding:16px;overflow-x:auto}
.sheet-wide img{display:block;max-width:none}
.cmp-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px}
.cmp-grid h3{margin-top:0}
.cmp{background:#1a0904;border:var(--px) solid var(--ink);padding:16px}
.cmp img,.cmp video{display:block;width:100%;height:auto;cursor:zoom-in}
.cmp-lab{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-family:"Px12","Dot16";font-size:16px;line-height:24px;color:var(--sand);margin-top:8px}
.cmp-lab .on{color:var(--orange)}
/* (2026-10-30) whole-number zoom kept: the box shrinks to the picture (no scaling unless the screen is narrower) */
.cmp.fit{width:fit-content;max-width:100%;margin:0 auto}
/* (2026-10-30) slash trails 2x2 (one video, 4 quadrants); labels sit on each quadrant's top-left. Video 544 tall =
   the Lighting box (512 video + 8 + 24 label row), so the two boxes end level */
.cmp4{position:relative}
.cmp4-lab{position:absolute;inset:16px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;pointer-events:none}
.cmp4-lab span{align-self:start;justify-self:start;padding:0 6px;font-family:"Px12","Dot16";font-size:16px;line-height:24px;color:var(--sand);background:var(--bg)}
.cmp4-lab .on{color:var(--orange)}
.cmp.fit img,.cmp.fit video{width:auto;max-width:100%}

/* lists / cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}
.card h3{font-size:24px}
.card p,.card ul{color:var(--sand);margin:0}
.card ul{padding-left:20px}
.frame.cream p,.frame.cream ul,.frame.cream li{color:#3a1f12}
ul.px{list-style:none;padding:0;margin:0}
ul.px li{position:relative;padding-left:24px;margin:0 0 8px}
ul.px li::before{content:"";position:absolute;left:0;top:10px;width:8px;height:8px;background:var(--orange);box-shadow:2px 2px 0 var(--ink)}
.frame.cream ul.px li::before{background:var(--red)}

table.spec{width:100%;border-collapse:collapse}
.spec th,.spec td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:var(--px) solid var(--ink)}
.spec th{font-family:"Px12","Dot16";font-weight:normal;color:var(--orange);width:30%}
.spec td{color:var(--cream)}
.frame.cream .spec th{color:#a12c12}
.frame.cream .spec td{color:#3a1f12}
.frame.cream .spec th,.frame.cream .spec td{border-bottom-color:#c9ae84}

/* faq */
details{border:var(--px) solid var(--ink);background:var(--bg2);margin:0 0 12px;box-shadow:var(--px) var(--px) 0 var(--ink)}
summary{list-style:none;display:flex;align-items:center;gap:16px;min-height:56px;padding:12px 20px;font-family:"Px12","Dot16";font-size:20px;line-height:28px;color:var(--cream)}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";font-family:"Px12","Dot16";color:var(--bg);background:var(--orange);width:28px;height:28px;display:flex;align-items:center;justify-content:center;flex:none;border:2px solid var(--ink)}
details[open] summary::before{content:"-"}
summary:hover{background:#4a2816}
details .ans{padding:0 20px 16px 64px;color:var(--sand)}
details .ans p:last-child{margin:0}

/* roadmap */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.road h3{display:flex;align-items:center;gap:12px}
.road h3 img{width:32px;height:32px}
.road .done h3{color:#8fd16a}
.road .now h3{color:var(--yellow)}
.road .plan h3{color:var(--sand)}
.note{font-size:16px;color:var(--sand)}

/* press */
.press-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:24px;align-items:start}
.shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin:0 0 16px}
.shots a{display:block;border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 var(--ink);background:#1a0904}
.shots a:hover{outline:var(--px) solid var(--orange)}
.shots img{display:block;width:100%;image-rendering:auto}
.dl{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 0}

/* footer */
footer{margin-top:96px;background:#1a0904;border-top:var(--px) solid var(--ink);padding:48px 0 32px}
.foot{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;align-items:flex-start}
.social{display:flex;flex-wrap:wrap;gap:12px}
.social a{display:flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:var(--px) solid var(--ink);background:var(--bg2);color:var(--cream);text-decoration:none;font-family:"Px12","Dot16";box-shadow:var(--px) var(--px) 0 var(--ink)}
.social a img{width:32px;height:32px}
.social a:hover{background:var(--orange);color:var(--bg)}
.social a:hover img{filter:brightness(0)}
.social a:active{transform:translate(var(--px),var(--px));box-shadow:none}
.legal{font-size:14px;line-height:24px;color:#b49c76;margin-top:32px}

/* trailer dialog */
dialog{border:var(--px) solid var(--ink);background:var(--bg);padding:0;width:min(960px,94vw);box-shadow:8px 8px 0 var(--ink)}
dialog::backdrop{background:rgba(14,4,2,.85)}
.dlg-bar{display:flex;justify-content:space-between;align-items:center;padding:8px 8px 8px 16px;font-family:"Px12","Dot16";color:var(--cream)}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* narrow header: nav folds into the menu button */
@media (max-width:900px){
  .js .menu-btn{display:flex}
  .js .nav{display:none;position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;gap:0;background:var(--bg);padding:8px 16px 16px;border-bottom:var(--px) solid var(--ink);box-shadow:0 var(--px) 0 #5a2c14;overflow:visible}
  .js .nav.open{display:flex}
  .js .nav a{justify-content:flex-start;font-size:20px;padding:0 8px;border-bottom:2px solid #5a2c14}
  .js .nav a:last-child{border-bottom:0}
}
/* Fire Field band (under the hero): in-game loop + one paragraph */
.ff{padding:48px 0;background:var(--bg2);border-bottom:var(--px) solid var(--ink)}
.ff-row{display:grid;grid-template-columns:480px 1fr;gap:32px;align-items:center}
.ff-vid{margin:0}
.ff-vid video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 #5a2c14}
.ff-copy h2{font-size:28px;line-height:36px}
.ff-copy p{color:var(--cream);max-width:36em}
.ff-link{font-family:"Px12","Dot16";color:var(--orange)}
/* tablet */
@media (max-width:1100px){
  .hero{background-size:1440px 480px;height:auto;min-height:480px}
  .hero-copy{position:relative;left:0;top:0;padding:40px 0 624px;width:auto;max-width:560px}
  .hero-demo{--h:300px;left:50%;right:auto;bottom:24px;transform:translateX(-50%)}
  .walker{bottom:24px}
  .ex-grid,.press-grid,.cmp-grid{grid-template-columns:1fr}
  .ff-row{grid-template-columns:1fr;gap:16px}
  .ff-vid{max-width:640px}
  .road{grid-template-columns:1fr}
}
/* phone */
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .top .wrap{height:56px;gap:8px}
  .brand span{display:none}
  .brand img{width:40px;height:40px}
  .nav a{padding:0 8px}
  .hero{background-size:960px 320px}
  .hero-logo{width:96px;height:96px}
  .hero h1{font-size:36px;line-height:44px}
  html[lang="ja"] .hero h1{font-size:32px;line-height:40px}
  .hero-copy{padding:24px 0 880px}
  .hero-demo{--h:180px;bottom:12px;width:max-content}
  .hd-row{flex-direction:column;align-items:center}
  .hd-arrow{margin:4px 0}
  .hd-arrow b{display:inline-block;transform:rotate(90deg);font-size:32px;line-height:32px}
  .hd-arrow small{font-size:12px;line-height:14px}
  .hd-tag{font-size:12px;line-height:16px;padding:1px 4px}
  .hd-a3d .hd-tag{margin-left:auto;margin-right:auto}
  .hd-cap{max-width:300px;font-size:12px;line-height:16px;padding:2px 6px}
  .walker{--s:1;bottom:12px}
  .btn{width:100%;font-size:20px;line-height:24px;white-space:nowrap;padding:12px 12px;gap:8px}
  .trailer-thumb>img{width:160px;height:90px}
  h2{font-size:28px;line-height:36px}
  section{padding:64px 0 16px}
  .ff{padding:32px 0}
  .ff-copy h2{font-size:22px;line-height:30px}
  .flow-row{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .step{grid-template-columns:96px 1fr}
  .step .pic{width:96px;height:96px}
  .step .pic .anim{--z:min(calc(80 / var(--fw)), calc(80 / var(--fh)))}
  .ring{grid-template-columns:repeat(4,1fr);padding:8px;gap:4px}
  .ring .anim{--z:.5}
  .spec th,.spec td{display:block;width:100%;padding:8px 12px}
  .spec th{border-bottom:0;padding-bottom:0}
  details .ans{padding:0 16px 16px}
  summary{font-size:18px}
}

/* itch.io official badge (itch.io/press-kit: self-hosted, no distortion / effects, aspect kept) */
.store-badge{display:inline-flex;align-items:center;line-height:0}
.store-badge img{display:block;height:54px;width:auto;image-rendering:auto}
.store-badge:focus-visible{outline:var(--px) solid var(--yellow);outline-offset:4px}
.store-badge + .store-badge{margin-left:16px}  /* clear space between the two store logos */
/* store logos look pressable like .btn: ink border + pixel shadow, lift on hover, press on click (logos themselves unchanged) */
.store-badge{border:var(--px) solid var(--ink);box-shadow:var(--px) var(--px) 0 #5a2c14;cursor:pointer;transition:transform .08s steps(2),box-shadow .08s steps(2)}
.store-badge:hover{transform:translate(calc(var(--px) * -1),calc(var(--px) * -1));box-shadow:calc(var(--px) * 2) calc(var(--px) * 2) 0 #5a2c14;outline:var(--px) solid var(--yellow);outline-offset:2px}
.store-badge:active{transform:translate(var(--px),var(--px));box-shadow:none}
.store-badge + .store-badge{margin-left:0}
.buy-label{display:table;margin:0 0 8px;padding:2px 8px;background:var(--bg);box-shadow:var(--px) var(--px) 0 var(--ink);font-family:"Px12","Dot16",monospace;font-size:18px;line-height:22px;color:var(--yellow)}
.hero .sub{margin-bottom:12px}
/* 2026-10-30 every clickable thing shows it on hover (user: "can't tell what is clickable"): block items lift + yellow
   outline + press down on click (same as .store-badge); text links in sentences are underlined and get a highlight */
.btn,.trailer-thumb,.nav a,.lang a,.social a,.shots a,summary,.menu-btn,.brand{cursor:pointer;transition:transform .08s steps(2),box-shadow .08s steps(2)}
.btn:hover,.trailer-thumb:hover,.social a:hover,.shots a:hover,.menu-btn:hover{transform:translate(calc(var(--px) * -1),calc(var(--px) * -1));box-shadow:calc(var(--px) * 2) calc(var(--px) * 2) 0 var(--ink);outline:var(--px) solid var(--yellow);outline-offset:2px}
.nav a:hover,.lang a:hover,summary:hover{outline:var(--px) solid var(--yellow);outline-offset:-2px}
.btn:active,.trailer-thumb:active,.social a:active,.shots a:active,.menu-btn:active{transform:translate(var(--px),var(--px));box-shadow:none}
p a,li a,.ans a,figcaption a,.legal a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px}
p a:hover,li a:hover,.ans a:hover,figcaption a:hover,.legal a:hover{background:var(--orange);color:var(--bg);text-decoration-color:var(--bg)}
/* example pictures / videos open the lightbox (js/lightbox.js L35): show it on hover too */
#examples img,#examples video{cursor:zoom-in}
#examples img:hover,#examples video:hover{outline:var(--px) solid var(--yellow);outline-offset:2px}