:root{--mat:#dde4e1;--mat-line:#c6d1cd;--ink:#152124;--ink-2:#24363a;--ink-soft:#4f6164;--card:#f7f9f8;--card-2:#e9eeec;--rule:#c6d1cd;--rule-2:#9fb0ab;--accent:#b83a22;--on-accent:#fff;--valley:#2b62c4;--mountain:#b83a22;--font-display:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif;--font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--mat:#1a2324;--mat-line:#26383a;--ink:#e9f0ee;--ink-2:#cfdad8;--ink-soft:#9aadad;--card:#222d2e;--card-2:#1e2829;--rule:#344546;--rule-2:#4a5f60;--accent:#ef6a45;--on-accent:#1a1210;--valley:#7fa8f5;--mountain:#f08467;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}:root[data-theme=dark]{--mat:#1a2324;--mat-line:#26383a;--ink:#e9f0ee;--ink-2:#cfdad8;--ink-soft:#9aadad;--card:#222d2e;--card-2:#1e2829;--rule:#344546;--rule-2:#4a5f60;--accent:#ef6a45;--on-accent:#1a1210;--valley:#7fa8f5;--mountain:#f08467;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0}body{background:var(--mat);color:var(--ink);font-family:var(--font-display);-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.5}a{color:inherit}img{max-width:100%;height:auto;display:block}h1,h2{text-wrap:balance}:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.site-header{padding:calc(12px + env(safe-area-inset-top)) max(5%, 16px) 12px;border-bottom:1px solid var(--rule);justify-content:space-between;align-items:center;gap:16px;display:flex}.wordmark{align-items:baseline;gap:10px;min-height:44px;font-size:20px;font-weight:700;text-decoration:none;display:flex}.wordmark [lang=ja]{font-size:26px}.site-header nav a{align-items:center;min-height:44px;font-weight:500;text-decoration:none;display:inline-flex}.home,.model{max-width:1280px;margin:0 auto;padding:0 max(5%,16px) 64px}.hero{flex-wrap:wrap;align-items:center;gap:40px;padding:48px 0 40px;display:flex}.hero-copy{flex-direction:column;flex:360px;gap:20px;display:flex}.eyebrow{font:400 13px var(--font-mono);letter-spacing:.06em;color:var(--ink-soft);margin:0}.hero h1{margin:0;font-size:clamp(38px,6vw,56px);line-height:1.08}.lede{max-width:46ch;color:var(--ink-2);margin:0;font-size:19px}.actions{flex-wrap:wrap;gap:12px;display:flex}.btn{border:1px solid var(--rule-2);border-radius:10px;align-items:center;min-height:48px;padding:0 22px;font-weight:500;text-decoration:none;display:inline-flex}.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}.hero-img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--rule);border-radius:16px;flex:400px;min-width:0;max-width:620px}.section{flex-direction:column;gap:20px;padding-top:24px;display:flex}.section h2{margin:0;font-size:26px}.grid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr));gap:20px;display:grid}.tile{background:var(--card);border:1px solid var(--rule);border-radius:14px;flex-direction:column;text-decoration:none;display:flex;overflow:hidden}.tile img{aspect-ratio:4/3;object-fit:cover;width:100%}.tile.planned{background:var(--card-2);border-style:dashed;border-color:var(--rule-2)}.tile-blank{aspect-ratio:4/3;color:var(--ink-soft);justify-content:center;align-items:center;display:flex}.tile-body{flex-direction:column;gap:4px;padding:14px 16px 16px;display:flex}.tile-title{justify-content:space-between;align-items:baseline;gap:8px;font-size:18px;font-weight:700;display:flex}.tile-title [lang=ja]{color:var(--ink-soft);font-size:15px;font-weight:500}.meta{font:400 13px var(--font-mono);color:var(--ink-soft)}.model{flex-direction:column;gap:16px;padding-top:16px;display:flex}.model-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 24px;display:flex}.crumb{min-height:44px;font:400 13px var(--font-mono);color:var(--ink-soft);align-items:center;display:inline-flex}.model-head h1{margin:0;font-size:clamp(28px,5vw,40px);line-height:1.1}.model-head h1 [lang=ja]{color:var(--ink-soft);font-size:.7em;font-weight:500}.facts{font:400 13px var(--font-mono);flex-wrap:wrap;gap:24px;margin:0;display:flex}.facts div{flex-direction:column;gap:2px;display:flex}.facts dt{color:var(--ink-soft)}.facts dd{margin:0;font-size:16px;font-weight:500}.viewer{flex-wrap:wrap;align-items:flex-start;gap:20px;display:flex}.stage-card{background:var(--card);border:1px solid var(--rule);border-radius:16px;flex-direction:column;flex:999 560px;min-width:0;display:flex;overflow:hidden}.stage{background:var(--mat);height:clamp(320px,58svh,640px);position:relative}.stage canvas{touch-action:none;cursor:grab;width:100%;height:100%;display:block;position:absolute;inset:0}.stage canvas:active{cursor:grabbing}.stage-note{text-align:center;color:var(--ink-2);pointer-events:none;justify-content:center;align-items:center;margin:0;padding:24px;display:flex;position:absolute;inset:0}.hint{font:400 12px var(--font-mono);color:var(--ink-2);background:var(--card);border:1px solid var(--rule);pointer-events:none;border-radius:999px;margin:0;padding:6px 12px;position:absolute;top:12px;left:12px}.stage-tools{flex-direction:column;align-items:flex-end;gap:8px;display:flex;position:absolute;top:12px;right:12px}.swatches{background:var(--card);border:1px solid var(--rule);border-radius:999px;gap:8px;padding:6px;display:flex}.swatches button{cursor:pointer;border:0;border-radius:50%;width:28px;height:28px;padding:0;box-shadow:inset 0 0 0 1px #0000002e}.swatches button[aria-pressed=true]{outline:2px solid var(--ink);outline-offset:2px}.ghost{font:500 12px var(--font-mono);color:var(--ink);background:var(--card);border:1px solid var(--rule);cursor:pointer;border-radius:999px;padding:8px 12px}.inset{pointer-events:none;align-items:flex-end;gap:10px;display:flex;position:absolute;bottom:12px;left:12px}.inset>svg{background:var(--card);border:1px solid var(--rule);border-radius:6px;width:84px;height:84px}.legend{font:400 11px var(--font-mono);color:var(--ink-2);flex-direction:column;gap:3px;display:flex}.legend b{color:var(--ink);letter-spacing:.04em;font-weight:500}.legend span{align-items:center;gap:6px;display:flex}.legend svg{width:26px;height:6px}.card{border-top:1px solid var(--rule);flex-direction:column;gap:8px;padding:6px 16px 16px;display:flex}.bar{cursor:pointer;touch-action:none;gap:2px;padding:10px 0 8px;display:flex}.bar i{background:var(--rule);border-radius:3px;flex:1;height:5px;display:block;overflow:hidden}.bar i b{background:var(--accent);width:0;height:100%;display:block}.card-head{align-items:baseline;gap:10px;display:flex}.count{font:500 13px var(--font-mono);color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}.card h2{margin:0;font-size:20px;line-height:1.25}.step-text{max-width:62ch;min-height:4.5em;margin:0}.controls{gap:8px;display:flex}.controls button{border:1px solid var(--rule-2);min-height:48px;color:var(--ink);font:500 16px var(--font-display);cursor:pointer;background:0 0;border-radius:10px;flex:1}.controls button.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);flex:1.6;font-weight:700}.controls button:disabled{opacity:.45;cursor:default}.steps{background:var(--card);border:1px solid var(--rule);border-radius:16px;flex:280px;min-width:0;padding:16px 8px 8px}.steps h2{font:500 13px var(--font-mono);letter-spacing:.06em;color:var(--ink-soft);margin:0 12px 8px}.steps ol{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.steps button{width:100%;min-height:44px;color:var(--ink);font:400 16px var(--font-display);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;align-items:center;gap:12px;padding:0 12px;display:flex}.steps button[aria-current=step]{background:var(--ink);color:var(--card);font-weight:700}.steps .n{font:400 13px var(--font-mono);width:2ch}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}@media (max-width:520px){.hint{top:60px}}
