:root{--ink:#24324a;--muted:#68798b;--sky:#69b9ff;--green:#67c587;--yellow:#ffd66b;--coral:#ff8a6b;--paper:#f7fbff;--line:#dce8f4;--white:#fff;--shadow:0 18px 50px rgba(36,50,74,.11)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:linear-gradient(180deg,#eff8ff 0%,#fff 46%,#f7fbff 100%);font-family:'Hiragino Sans','Yu Gothic',system-ui,sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}.skip-link{position:absolute;left:-9999px;top:0}.skip-link:focus{left:16px;top:16px;z-index:4;padding:10px 14px;background:#fff;border-radius:12px;box-shadow:var(--shadow)}
.kanji-header,.kanji-footer,main{width:min(calc(100% - 48px),1180px);margin:0 auto}.kanji-header{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}.brand img{display:block;width:164px;height:auto}.kanji-header nav,.kanji-footer nav{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:.82rem}.kanji-header nav a:hover,.kanji-header nav a:focus-visible,.kanji-footer nav a:hover,.kanji-footer nav a:focus-visible{color:var(--coral)}.header-link{color:var(--ink);font-weight:800}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:clamp(36px,7vw,100px);align-items:center;padding:90px 0 112px}.eyebrow{margin:0 0 18px;color:var(--coral);font:800 .67rem/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}.hero h1{margin:0 0 28px;font-size:clamp(3.7rem,7.2vw,7.2rem);line-height:.93;letter-spacing:-.1em;font-weight:750}.hero h1 em,.intro h2 em,.fields h2 em,.screens h2 em,.closing h2 em{color:var(--coral);font-style:normal}.lead{max-width:34rem;margin:0;color:var(--muted);font-size:1.03rem;line-height:1.95}.actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 22px}.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 20px;border-radius:999px;font-size:.86rem;font-weight:800;transition:transform .18s,background .18s}.button:hover,.button:focus-visible{transform:translateY(-2px)}.button.primary{background:var(--coral);color:#fff;box-shadow:5px 5px 0 var(--yellow)}.button.primary:hover,.button.primary:focus-visible{background:var(--ink)}.button.secondary{border:1px solid var(--line);background:#fff}.note{margin:0;color:var(--muted);font-size:.76rem;line-height:1.7}.hero-visual{position:relative;min-height:455px;border-radius:28px;background:linear-gradient(145deg,#dff1ff,#f6fbff 55%,#fff0d4);overflow:hidden;box-shadow:var(--shadow)}.hero-visual:before,.hero-visual:after{content:'';position:absolute;border-radius:50%;filter:blur(1px)}.hero-visual:before{width:230px;height:230px;right:-45px;top:-55px;background:rgba(105,185,255,.42)}.hero-visual:after{width:210px;height:210px;left:-72px;bottom:-50px;background:rgba(103,197,135,.32)}.hero-card{position:absolute;z-index:1;background:#fff;border:1px solid rgba(36,50,74,.09);box-shadow:0 14px 30px rgba(36,50,74,.12)}.hero-card-main{left:16%;top:14%;width:58%;padding:28px 30px 30px;border-radius:24px;transform:rotate(-4deg)}.card-label{display:block;color:var(--coral);font-size:.74rem;font-weight:800}.hero-card-main strong{display:block;margin:18px 0 8px;font-size:clamp(7rem,14vw,10rem);line-height:.8;color:var(--ink);letter-spacing:-.15em}.card-reading{color:var(--muted);font-size:.82rem}.hero-card-small{width:43%;padding:18px;border-radius:18px}.hero-card-small span{display:block;margin-bottom:14px;color:var(--muted);font-size:.72rem}.hero-card-small strong{font-size:1rem}.hero-card-sky{right:7%;bottom:18%;background:#e9f6ff;transform:rotate(5deg)}.hero-card-yellow{left:9%;bottom:9%;background:#fff5d5;transform:rotate(-7deg)}.hero-stamp{position:absolute;z-index:2;right:11%;top:12%;display:grid;place-items:center;width:92px;height:92px;border-radius:50%;background:var(--coral);color:#fff;font-weight:900;text-align:center;line-height:1.15;transform:rotate(9deg)}
.section-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(42px,8vw,120px);padding:108px 0;border-top:1px solid var(--line)}.section-grid h2{margin:0;font-size:clamp(2.6rem,5vw,5.6rem);line-height:.98;letter-spacing:-.09em}.intro-copy>p,.section-copy{max-width:36rem;color:var(--muted);font-size:1rem;line-height:1.95}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:38px}.steps article{padding:18px 16px;border:1px solid var(--line);background:#fff;border-radius:16px}.steps span{display:block;margin-bottom:28px;color:var(--coral);font:800 .7rem/1 ui-monospace,monospace}.steps h3{margin:0 0 10px;font-size:1.05rem}.steps p{margin:0;color:var(--muted);font-size:.83rem;line-height:1.75}.fields{background:rgba(255,214,107,.13);border-top:0;padding-left:clamp(20px,5vw,72px);padding-right:clamp(20px,5vw,72px);margin-left:calc((min(100vw,1180px) - 100vw)/2);margin-right:calc((min(100vw,1180px) - 100vw)/2);padding-top:96px;padding-bottom:96px}.field-list{border-top:1px solid var(--line)}.field-list article{display:grid;grid-template-columns:54px 1fr 24px;gap:20px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}.field-number{color:var(--coral);font:800 .7rem/1 ui-monospace,monospace}.field-list h3{margin:0 0 7px;font-size:1.38rem}.field-list p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.7}.field-list b{color:var(--coral);font-size:1.25rem}.screens{align-items:center}.screen-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:end}.screen-gallery figure{margin:0;padding:10px 10px 12px;border:1px solid var(--line);background:#fff;box-shadow:0 12px 28px rgba(36,50,74,.08)}.screen-gallery figure:nth-child(2){transform:translateY(-24px)}.screen-gallery img{display:block;width:100%;height:auto;border-radius:7px}.screen-gallery figcaption{margin-top:9px;color:var(--muted);font:800 .62rem/1 ui-monospace,monospace;letter-spacing:.1em}.text-link{display:inline-flex;margin-top:28px;padding-bottom:6px;border-bottom:1px solid var(--ink);font-weight:800;font-size:.86rem}.closing{padding:112px clamp(20px,6vw,86px);background:var(--ink);color:#fff;text-align:center}.closing .eyebrow{color:var(--yellow)}.closing h2{margin:0 0 20px;font-size:clamp(3.4rem,7vw,7rem);line-height:.9;letter-spacing:-.1em}.closing p:not(.eyebrow){max-width:34rem;margin:0 auto 32px;color:#c9d6df;line-height:1.9}.closing .button{background:var(--yellow);color:var(--ink);box-shadow:none}.kanji-footer{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:28px 0 36px}.kanji-footer strong{display:block;font-size:.9rem}.kanji-footer span{display:block;margin-top:5px;color:var(--muted);font:700 .62rem/1 ui-monospace,monospace;letter-spacing:.1em}.kanji-footer small{color:var(--muted);font-size:.7rem}
@media(max-width:760px){.kanji-header,.kanji-footer,main{width:min(calc(100% - 32px),1180px)}.kanji-header{padding:16px 0}.brand img{width:140px}.kanji-header nav{gap:12px;font-size:.7rem}.kanji-header nav a:not(.header-link){display:none}.hero{grid-template-columns:1fr;gap:32px;padding:54px 0 66px}.hero h1{font-size:clamp(3.3rem,14vw,5.4rem)}.lead{font-size:.94rem}.hero-visual{min-height:340px}.hero-card-main{left:13%;top:13%;width:62%;padding:22px}.hero-card-main strong{font-size:7rem}.hero-stamp{width:76px;height:76px;font-size:.82rem}.section-grid{grid-template-columns:1fr;gap:34px;padding:68px 0}.fields{margin-left:-16px;margin-right:-16px;padding:68px 24px}.steps{grid-template-columns:1fr;gap:10px;margin-top:26px}.steps article{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:start}.steps span{grid-row:span 2;margin:3px 0 0}.steps h3{margin-bottom:5px}.screen-gallery{gap:8px}.screen-gallery figure{padding:7px 7px 9px}.screen-gallery figure:nth-child(2){transform:translateY(-14px)}.closing{padding:70px 24px}.closing h2{font-size:clamp(3.3rem,14vw,5.2rem)}.kanji-footer{align-items:flex-start;flex-direction:column}.kanji-footer nav{flex-wrap:wrap;gap:12px;font-size:.76rem}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.button{transition:none}}