/* Homepage-only semantic colors. The cursor engine keeps its original geometry and timing. */
:root{--home-code:#131518;--home-code-ink:#e0e2e5;--home-code-muted:#a2adbf;--home-on-ink-muted:#b3bdcc;--home-logo:#43474e;--home-wire:#9da2a9;--home-track:#e1e3e6;--home-draft:#d9d9d9;--home-case-bg:#4b55df;--home-case-ink:#fff}
:root[data-theme=dark]{--home-code:#0b1017;--home-code-ink:#e0e7f1;--home-code-muted:#a2adbf;--home-on-ink-muted:#475569;--home-logo:#d1d9e5;--home-wire:#75849b;--home-track:#3e4858;--home-draft:#3d4758;--home-case-bg:#b3beff;--home-case-ink:#111833}
body{background:var(--paper);color:var(--ink)}
.intro-logo:after{color:var(--muted)}
.home-preferences{pointer-events:auto;isolation:isolate}
.nav-canvas>.home-preferences{position:absolute;left:245px;top:33px;z-index:121;width:auto}
.home-control-cursor{position:absolute;pointer-events:none!important;z-index:5;left:0;top:0;width:22px;height:28px;filter:drop-shadow(0 1px 1px #0004)}
.home-control-cursor svg{width:22px;height:28px}
.case-nav-link,.m-nav .m-case-nav{background:var(--home-case-bg)!important;color:var(--home-case-ink)!important;box-shadow:0 3px 12px #4b55df25!important}
.preview-action:focus-visible{outline-color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent)}
@media(max-width:699px),(prefers-reduced-motion:reduce){
 .mobile-site{background:var(--paper);color:var(--ink)}
 .m-nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;height:auto;min-height:112px;padding-top:12px;padding-bottom:12px;background:var(--paper);border-color:var(--line);gap:10px}
 .m-nav b{color:var(--ink)}
 .m-nav>a,.m-button,.m-plans a{background:var(--ink);color:var(--on-ink)}
 .m-nav b{grid-column:1;grid-row:1;order:initial;min-width:0;margin-right:0}
 .m-nav>.home-preferences{grid-column:2;grid-row:1;order:initial;justify-self:end;width:max-content;margin-left:0}
 .m-nav>a{grid-row:2;order:initial;display:flex;align-items:center;justify-content:center;min-width:0;min-height:44px;padding:10px 8px;white-space:nowrap}
 .m-nav>.m-case-nav{grid-column:1}
 .m-nav>a:not(.m-case-nav){grid-column:2}
 .m-section,.m-grid article,.m-steps article,.m-flow,.m-flow span,.m-plans article{border-color:var(--line)}
 .m-section p,.m-section small,.m-footer,.m-footer a{color:var(--muted)}
 .m-section h1,.m-section h2,.m-section h3,.m-section b,.m-contacts a{color:var(--ink)}
 .m-flow strong{background:var(--ink);color:var(--on-ink)}
 .m-flow small{color:var(--accent)}
 .m-plans article{background:var(--card)}
 .m-section pre{background:var(--home-code);color:var(--home-code-ink);border:1px solid var(--line)}
 .m-footer{flex-wrap:wrap;gap:22px}
 .m-nav:has(.home-preferences) b{white-space:nowrap}
 html[lang=ja] .m-section h1{font-size:clamp(30px,8.8vw,43px);line-height:1.24}
 html[lang=ja] .m-section h2{font-size:clamp(27px,7.6vw,36px);line-height:1.3}
}
@media(max-width:374px){
 .m-nav{padding-left:14px;padding-right:14px;gap:6px}
 .m-nav>a{font-size:10px;padding:10px 8px;white-space:nowrap}
 .m-nav b{font-size:16px}
}
@media(prefers-reduced-motion:reduce){.home-control-cursor{display:none}.home-preferences .preference-field{clip-path:none!important;opacity:1!important}}
.home-canvas-fallback #root{display:none}.home-canvas-fallback .mobile-site{display:block;max-width:700px;margin:auto;color:var(--ink);background:var(--paper)}
.home-canvas-fallback .m-section{padding:40px 24px;border-bottom:1px solid var(--line)}
.home-canvas-fallback .m-nav{display:flex;flex-wrap:wrap;gap:12px;padding:20px;background:var(--paper)}
.home-canvas-fallback .m-plans article{padding:20px;border:1px solid var(--line);margin:12px 0}

/* Hide a stale desktop canvas immediately when changing to a mobile or reduced-motion renderer. */
@media(max-width:699px),(prefers-reduced-motion:reduce){#root{display:none!important}}