/* Based on Refero "mono" DESIGN.md (Ink #292929 / Paper #fff / Carbon #000, 2px rules, 0 radius, no shadow/gradient).
   NH -> Noto Sans JP 300/400, S-Condensed -> Noto Sans JP 300/500. Motion: 0.3s state changes only; none with reduced motion. */
@font-face{font-family:NJ;font-weight:300;font-display:swap;src:url(../fonts/nj-300.woff2) format("woff2")}
@font-face{font-family:NJ;font-weight:400;font-display:swap;src:url(../fonts/nj-400.woff2) format("woff2")}
@font-face{font-family:NJ;font-weight:500;font-display:swap;src:url(../fonts/nj-500.woff2) format("woff2")}
:root{--ink:#292929;--paper:#fff;--rule:2px solid #292929;--ease:cubic-bezier(.455,.03,.515,.955)}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth;scroll-padding-top:16px}
body{background:var(--paper);color:var(--ink);font-family:NJ,sans-serif;padding-right:44px}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid #000;outline-offset:3px}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:8px 16px;font-size:12px;letter-spacing:.1em;z-index:10}
.skip:focus{top:8px}
.row{display:grid;border-left:var(--rule);border-top:var(--rule)}
.cell{border-right:var(--rule);border-bottom:var(--rule);background:var(--paper)}
.lab{font-size:12px;letter-spacing:.1em;font-weight:500;line-height:1.34;display:block}
.top{grid-template-columns:1fr auto}
.brand{padding:20px 45px;font-size:18px;letter-spacing:-.02em}
.burger{display:none;font-family:inherit;background:var(--paper);color:var(--ink);border-top:0;border-left:0;padding:0 20px;cursor:pointer}
.nav{display:flex;align-items:center}
.nav a{display:flex;align-items:center;height:100%;padding:0 20px;font-size:12px;font-weight:300;letter-spacing:.2em;transition:background-color .3s var(--ease),color .3s var(--ease)}
.nav a:hover,.nav a:focus-visible{background:var(--ink);color:#fff}
.inv{background:var(--ink);color:#fff;display:flex;align-items:center;padding:0 20px;font-size:12px;letter-spacing:.1em}
.hero{grid-template-columns:1fr 1fr;border-top:0}
.col{display:flex;flex-direction:column}
.head{padding:43px 45px}.head h1{margin-top:20px;font-weight:300;font-size:43px;line-height:1.34;letter-spacing:-.02em}
.body{padding:20px 45px 43px;flex:1}.body p{font-size:18px;font-weight:300;line-height:1.5;letter-spacing:-.02em;max-width:28em}
.btns{display:flex;gap:8px;margin-top:43px;align-items:center;flex-wrap:wrap}
.btn{height:40px;display:inline-flex;align-items:center;padding:0 20px;border:2px solid var(--ink);font-size:12px;font-weight:500;letter-spacing:.1em;transition:background-color .3s var(--ease),color .3s var(--ease)}
.btn:hover,.btn:focus-visible{background:var(--ink);color:#fff}
.tl{padding:0 20px;font-size:12px;font-weight:300;letter-spacing:.2em;text-decoration:underline;text-underline-offset:4px}
.prod{position:relative;display:grid;grid-template-rows:1fr auto;min-height:560px;overflow:hidden}
.stage{position:relative;min-height:380px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.poster{display:grid;grid-template-columns:200px 1fr;gap:20px;align-items:center;padding:16px 20px;border-top:var(--rule)}
.poster img{width:200px;height:auto;display:block;border:1px solid #292929}
.poster b{display:block;margin-bottom:6px}
.poster span{font-size:14px;font-weight:300;line-height:1.5}
.poster small{display:block;font-size:12px;margin-top:6px}
.prod .plan-fallback{width:auto;height:auto;max-width:86%;max-height:calc(100% - 96px)}
.model{width:100%;height:100%;display:block}
/* Editorial Caption: circular rotating SVG text (mono DESIGN.md l.139-141, l.196) */
.ring{position:absolute;right:20px;top:20px;width:130px;height:130px;animation:spin 40s linear infinite}
.ring text{font-size:11.5px;letter-spacing:.2em;font-weight:500;fill:#292929}
@keyframes spin{to{transform:rotate(360deg)}}
/* Ticker (marquee) */
.ticker{grid-template-columns:1fr;border-top:0}
.track{overflow:hidden;white-space:nowrap;padding:14px 0}
.belt{display:inline-flex;animation:belt 60s linear infinite}
.belt span{font-size:14px;font-weight:300;letter-spacing:.2em;padding-right:0}
@keyframes belt{to{transform:translateX(-50%)}}
.pause{font-family:inherit;background:#fff;color:#292929;border-top:0;border-left:0;padding:0 20px;cursor:pointer;white-space:nowrap;transition:background-color .3s var(--ease),color .3s var(--ease)}
.pause{-webkit-tap-highlight-color:transparent}
@media(hover:hover){.pause:hover{background:#292929;color:#fff}}
.pause:focus-visible{background:#292929;color:#fff}
.motion-paused .ring,.motion-paused .belt{animation-play-state:paused}
.tag{position:absolute;left:0;top:0;background:var(--ink);color:#fff;font-size:12px;letter-spacing:.1em;padding:4px 12px}
.svc{grid-template-columns:repeat(3,1fr);border-top:0}.svc .cell{padding:20px}
h2{font-size:25px;font-weight:300;line-height:1.27;letter-spacing:-.02em;margin-top:8px}
.svc p,.steps p,.w figcaption{font-size:14px;font-weight:300;line-height:1.6;margin-top:8px}
.sec{border-top:0;grid-template-columns:1fr}
.shead{padding:43px 45px}.shead h2{font-size:32px;line-height:1.25}
.note{font-size:14px;font-weight:300;margin-top:12px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr)}
.w{padding:20px}.w img{width:100%;height:auto;aspect-ratio:15/11;object-fit:cover;display:block}
.ai{font-size:12px;font-weight:300;margin-top:4px}
.w figcaption{display:flex;gap:12px;align-items:baseline;font-size:16px;font-weight:400}
.steps{list-style:none;display:grid;grid-template-columns:repeat(3,1fr)}.steps .cell{padding:20px 20px 43px}
h3{font-size:25px;font-weight:300;line-height:1.27;letter-spacing:-.02em;margin-top:8px}
.abody{padding:43px 45px}.abody p{font-size:18px;font-weight:300;line-height:1.5;max-width:34em}
.abody .demo-n{font-size:14px;margin-top:20px}
.foot{display:flex;flex-wrap:wrap;gap:20px 45px;padding:20px 45px;border-top:var(--rule);font-size:12px;letter-spacing:.2em}
.foot a:hover{text-decoration:underline}
.side{position:fixed;right:20px;top:50%;transform:translateY(-50%) rotate(90deg);width:0;display:flex;justify-content:center;white-space:nowrap;font-size:12px;font-weight:300;letter-spacing:.2em}
@media(max-width:900px){
 body{padding-right:0}.side{display:none}
 .top{grid-template-columns:1fr auto}
 .burger{display:block}
 .nav{grid-column:1/3;display:none;flex-direction:column;align-items:stretch}
 .nav.open{display:flex}
 .nav a{padding:16px 20px;border-top:1px solid var(--ink)}
 .inv{grid-column:1/3;padding:8px 20px}
 .brand{padding:20px}
 .hero,.svc,.grid3,.steps{grid-template-columns:1fr}
 .head,.body,.shead,.abody{padding-left:20px;padding-right:20px}
 .head h1{font-size:32px;line-height:1.25}.body p,.abody p{font-size:16px;line-height:1.5}
 .prod{min-height:0}.stage{min-height:300px}
 .poster{grid-template-columns:120px 1fr;gap:12px;padding:12px 20px}.poster img{width:120px}.poster small{font-size:11px}
 .ring{width:84px;height:84px;right:10px;top:10px}
 .belt span{font-size:12px}
 .pause{padding:0 12px}
 .foot{padding:20px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}.ring,.belt{animation:none}}
[hidden]{display:none!important}
.model-note{position:absolute;left:20px;right:20px;bottom:12px;font-size:12px;font-weight:300;line-height:1.5;background:#fff}