:root{--bg:#faf9f7;--surface:#ffffff;--text:#1c1917;--text-sub:#57534e;--accent:#b91c1c;--accent-soft:#fef2f2;--border:#e7e5e4;--shadow:0 1px 3px rgb(0 0 0 / .06),0 8px 24px rgb(0 0 0 / .07);color-scheme:light dark;}@media (prefers-color-scheme:dark){:root{--bg:#171412;--surface:#221f1c;--text:#f5f5f4;--text-sub:#a8a29e;--accent:#f87171;--accent-soft:#3b1a1a;--border:#3a3532;--shadow:0 1px 3px rgb(0 0 0 / .4),0 8px 24px rgb(0 0 0 / .35)}}*{margin:0;padding:0;box-sizing:border-box;}body{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","BIZ UDPGothic",Meiryo,system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.8;}img{max-width:100%;height:auto;}a{color:var(--accent);}.navbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:.8rem 1.5rem;background:var(--surface);border-bottom:1px solid var(--border);}.navbar .brand{font-weight:800;}.lang-switcher select{background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:.5rem;padding:.4rem .6rem;font-size:.85rem;}.hero{min-height:80svh;display:grid;place-content:center;text-align:center;padding:4rem 1.5rem 3rem;background:radial-gradient(ellipse 80% 60% at 50% -10%,var(--accent-soft),transparent);}.hero .hanko{font-size:4.5rem;line-height:1;margin-bottom:1rem;}.hero h1{font-size:clamp(2rem,6vw,3.4rem);font-weight:800;letter-spacing:.02em;}.hero .tagline{font-size:clamp(1.05rem,2.5vw,1.4rem);color:var(--text-sub);margin:1rem auto 0;max-width:34em;}.hero .tagline strong{color:var(--accent);}.cta-row{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;margin-top:2.5rem;}.btn{display:inline-block;padding:.9rem 2.2rem;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease;}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow);}.btn-primary{background:var(--accent);color:#fff;}.btn-ghost{border:2px solid var(--border);color:var(--text);}.hero .no-signup{margin-top:1.2rem;font-size:.85rem;color:var(--text-sub);}section{max-width:800px;margin:0 auto;padding:4.5rem 1.5rem;}section>h2{font-size:clamp(1.5rem,4vw,2.1rem);text-align:center;margin-bottom:.6rem;}section>.lead{text-align:center;color:var(--text-sub);max-width:40em;margin:0 auto 3rem;word-break:auto-phrase;}h2 .accent{color:var(--accent);}.vs-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));gap:1.2rem;}.vs-card{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1.6rem;box-shadow:var(--shadow);}.vs-card .problem{color:var(--text-sub);font-size:.92rem;text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px;}.vs-card .solution{font-weight:700;margin-top:.5rem;}.vs-card .icon{font-size:1.8rem;margin-bottom:.5rem;display:block;}.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.2rem;counter-reset:step;}.step{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:2.4rem 1.6rem 1.6rem;box-shadow:var(--shadow);}.step::before{counter-increment:step;content:counter(step);position:absolute;top:-1rem;left:1.4rem;width:2.4rem;height:2.4rem;border-radius:50%;background:var(--accent);color:#fff;font-weight:800;display:grid;place-content:center;}.step h3{margin-bottom:.4rem;}.step p{color:var(--text-sub);font-size:.95rem;}.shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:1.5rem;}.shots figure{background:var(--surface);border:1px solid var(--border);border-radius:1rem;padding:1rem;box-shadow:var(--shadow);}.shots img{border-radius:.5rem;width:100%;}.shots figcaption{text-align:center;font-size:.9rem;color:var(--text-sub);margin-top:.6rem;}.tech-list{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;list-style:none;}.tech-list li{background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:.4rem 1.1rem;font-size:.9rem;}.code-row{display:flex;align-items:stretch;gap:.5rem;background:var(--surface);border:1px solid var(--border);border-radius:.6rem;padding:.3rem .3rem .3rem 1rem;max-width:40rem;margin:0 auto 1rem;overflow-x:auto;}.code-row code{flex:1;padding:.6rem 0;white-space:pre;font-size:.85rem;color:var(--text);}.copy-btn{flex-shrink:0;display:grid;place-content:center;width:2.4rem;border:none;background:transparent;color:var(--text-sub);border-radius:.4rem;cursor:pointer;}.copy-btn:hover{background:var(--accent-soft);color:var(--accent);}.copy-btn svg{width:1.1rem;height:1.1rem;}.copy-btn .check{display:none;color:#16a34a;}.copy-btn.copied .copy{display:none;}.copy-btn.copied .check{display:block;}footer{text-align:center;padding:3rem 1.5rem 4rem;color:var(--text-sub);font-size:.9rem;border-top:1px solid var(--border);}footer .cta-row{margin-top:0;margin-bottom:2rem;}@media (prefers-reduced-motion:no-preference){@supports ((animation-timeline:view()) and (animation-range:entry)){@keyframes rise{from{opacity:0;transform:translateY(2rem)}}.vs-card,.step,.shots figure{animation:rise auto ease-out backwards;animation-timeline:view();animation-range:entry 0% entry 60%}}}