:root{--bg:#f7f3eb;--paper:#fffdf8;--paper-strong:#fff;--ink:#22211f;--muted:#706a61;--line:#ded6c9;--red:#c93a35;--teal:#1d8177;--amber:#d88a23;--green:#2e7d48;--blue:#315f9f;--shadow:0 24px 70px #342d2421}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:linear-gradient(140deg, #c93a3514, transparent 34%), linear-gradient(320deg, #1d81771a, transparent 28%), var(--bg);color:var(--ink);margin:0;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Hiragino Sans,Yu Gothic,YuGothic,Noto Sans JP,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-shell{inline-size:min(1180px,100% - 32px);margin:0 auto;padding:18px 0 60px}.topbar{justify-content:space-between;align-items:center;gap:20px;min-height:48px;display:flex}.brand,.topbar nav,.hero-actions,.source-links{align-items:center;gap:12px;display:flex}.brand{font-weight:900}.brand-mark{border:2px solid var(--ink);background:linear-gradient(45deg, transparent 47%, var(--ink) 48% 52%, transparent 53%), linear-gradient(135deg, transparent 47%, var(--ink) 48% 52%, transparent 53%), var(--paper);width:30px;height:30px;transform:rotate(-5deg)}.topbar nav a{color:var(--muted);padding:8px 2px;font-size:.95rem;font-weight:800}.home-hero,.tool-hero{align-items:center;gap:34px;min-height:420px;padding:38px 0 34px;display:grid}.home-hero{grid-template-columns:minmax(0,1fr) 430px}.tool-hero{grid-template-columns:minmax(0,1fr) 260px;min-height:300px}.hero-copy,.tool-hero>div:first-child{max-width:760px}.eyebrow,.section-kicker{color:var(--red);margin:0 0 10px;font-size:.88rem;font-weight:900}h1,h2,h3,p{margin-top:0}h1{letter-spacing:0;max-width:9.4em;margin-bottom:18px;font-size:clamp(2.7rem,7vw,5.7rem);line-height:.98}.tool-hero h1{max-width:10em;font-size:clamp(2.5rem,6vw,4.9rem)}.hero-copy p:not(.eyebrow),.tool-hero p:not(.eyebrow){max-width:42rem;color:var(--muted);font-size:1.08rem;line-height:1.8}.hero-actions{flex-wrap:wrap;margin-top:26px}.hero-actions a{border:1px solid var(--ink);background:var(--ink);min-height:48px;color:var(--paper);border-radius:8px;justify-content:center;align-items:center;padding:0 18px;font-weight:900;display:inline-flex}.hero-actions a+a{color:var(--ink);background:0 0}.hero-media-card,.feature-tile,.hero-board{border:1px solid var(--line);box-shadow:var(--shadow);background:#fffdf8c7;border-radius:8px;display:grid}.hero-media-card,.hero-board a,.tool-card,.feature-tile,.input-panel,.output-panel,.info-band,.guide-band,.visual-band,.usage-band,.product-footer,.stats-strip,.category-block{border:1px solid var(--line);background:#fffdf8e0;border-radius:8px}.hero-media-card{min-height:420px;position:relative;overflow:hidden}.hero-media-card img,.visual-band-media img,.tool-hero-media img,.usage-media img{object-fit:cover;width:100%;height:100%;display:block}.hero-media-overlay{grid-template-columns:1fr 1fr;gap:10px;width:min(88%,360px);display:grid;position:absolute;bottom:18px;right:18px}.hero-media-overlay div{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fffdf8db;border:1px solid #ffffff59;border-radius:8px;padding:14px}.hero-media-overlay span{color:var(--teal);margin-bottom:7px;font-size:.82rem;font-weight:900;display:block}.hero-media-overlay strong{font-size:1rem;line-height:1.3}.feature-stack{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:26px;display:grid}.feature-tile{min-height:156px;padding:18px;transition:transform .16s,border-color .16s,box-shadow .16s}.feature-tile:hover{border-color:#1d817794;transform:translateY(-2px);box-shadow:0 14px 40px #1d81771f}.feature-tile span{color:var(--teal);margin-bottom:10px;font-size:.8rem;font-weight:900;display:block}.feature-tile strong{margin-bottom:10px;font-size:1.28rem;line-height:1.12;display:block}.feature-tile small{color:var(--muted);font-size:.9rem;line-height:1.6}.hero-board a{min-height:150px;padding:18px}.hero-board span,.tool-card span{color:var(--teal);margin-bottom:10px;font-size:.8rem;font-weight:900;display:block}.hero-board strong,.tool-card strong{margin-bottom:10px;font-size:1.35rem;line-height:1.15;display:block}.hero-board small,.tool-card small{color:var(--muted);font-size:.9rem;line-height:1.6}.stats-strip{grid-template-columns:repeat(3,1fr);gap:1px;margin-bottom:26px;display:grid;overflow:hidden}.stats-strip div{background:var(--paper);padding:22px}.stats-strip strong{font-size:2.3rem;line-height:1;display:block}.stats-strip span{color:var(--muted);font-weight:800}.section-title{margin:0 0 18px}.section-title h2,.info-band h2,.guide-band h2,.input-panel h2,.output-panel h2{letter-spacing:0;margin-bottom:0;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.12}.category-block{margin-bottom:16px;padding:22px}.category-heading{justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px;display:flex}.category-heading h3{margin-bottom:0;font-size:1.35rem}.category-heading span{color:var(--muted);font-weight:800}.tool-card-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.tool-card-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.tool-card{min-height:172px;padding:18px;transition:transform .16s,border-color .16s,box-shadow .16s}.tool-card:hover,.hero-board a:hover{border-color:#1d817794;transform:translateY(-2px);box-shadow:0 14px 40px #1d81771f}.guide-band,.info-band{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:24px;margin-top:20px;padding:26px;display:grid}.visual-band,.usage-band{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:18px;margin:0 0 26px;padding:18px;display:grid;overflow:hidden}.visual-band-copy,.usage-copy{padding:8px}.visual-band-copy p:not(.section-kicker),.usage-copy p:not(.section-kicker),.footer-cta p:not(.section-kicker),.footer-brand-block p{color:var(--muted);line-height:1.8}.visual-band-media,.usage-media,.tool-hero-media{background:#ece4d6;border-radius:8px;overflow:hidden}.signal-list,.usage-points{gap:10px;margin-top:22px;display:grid}.signal-list div,.usage-points article{background:#f6efe2;border-radius:8px;padding:14px}.signal-list strong,.usage-points strong{margin-bottom:6px;display:block}.signal-list span,.usage-points p{color:var(--muted);line-height:1.65}.guide-grid{grid-template-columns:repeat(3,1fr);gap:12px;display:grid}.guide-grid article{background:#f6efe2;border-radius:8px;min-height:170px;padding:18px}.guide-grid strong{background:var(--teal);color:#fff;border-radius:999px;place-items:center;width:34px;height:34px;margin-bottom:12px;display:grid}.guide-grid h3{margin-bottom:8px}.guide-grid p{color:var(--muted);line-height:1.7}.mini-diagram{aspect-ratio:1;justify-self:end;width:min(100%,250px);position:relative}.tool-hero-media{aspect-ratio:1.05;width:min(100%,340px);box-shadow:var(--shadow);justify-self:end}.mini-diagram span{border:2px solid #22211f42;position:absolute}.mini-diagram span:first-child{background:linear-gradient(150deg,#e7a94d,#c97728);inset:28% 20% 22% 12%}.mini-diagram span:nth-child(2){background:linear-gradient(150deg,#f3c06b,#d99037);inset:14% 10% 58% 26%;transform:skew(-34deg)}.mini-diagram span:nth-child(3){background:linear-gradient(150deg,#b85a30,#8d3b2b);inset:24% 4% 30% 72%;transform:skewY(-32deg)}.calculator-block{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);align-items:start;gap:18px;display:grid}.input-panel,.output-panel{padding:24px;box-shadow:0 18px 45px #53483a14}.tool-input-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px;display:grid}.field-card{border:1px solid var(--line);background:var(--paper-strong);border-radius:8px;grid-template-columns:1fr auto;align-items:center;gap:8px;min-width:0;padding:12px;display:grid}.field-card span{color:var(--muted);grid-column:1/-1;font-size:.86rem;font-weight:900}.field-card input{width:100%;min-width:0;color:var(--ink);background:0 0;border:0;outline:0;font-size:clamp(1.35rem,3vw,2rem);font-weight:900}.field-card em{color:var(--muted);font-style:normal;font-weight:900}.field-card:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px #1d817721}.output-list{gap:10px;margin-top:22px;display:grid}.output-item{background:#f6efe2;border-radius:8px;padding:14px}.output-item span,.output-item small{color:var(--muted);font-weight:800;display:block}.output-item strong{margin:5px 0;font-size:clamp(1.45rem,3vw,2.05rem);line-height:1.1;display:block}.output-item.tone-good{background:#2e7d481a}.output-item.tone-warn{background:#c93a351a}.info-band ul{color:var(--muted);margin:0;padding-left:1.2rem;line-height:1.8}.related-section{margin-top:26px}.product-footer{margin-top:30px;overflow:hidden;box-shadow:0 18px 45px #53483a14}.footer-cta,.footer-links,.footer-bottom{padding:24px 26px}.footer-cta{background:linear-gradient(135deg, #1d817714, transparent 44%), linear-gradient(320deg, #c93a3512, transparent 34%), var(--paper);grid-template-columns:minmax(0,1fr) 360px;gap:20px;display:grid}.footer-chip-grid{grid-template-columns:1fr 1fr;gap:10px;display:grid}.footer-chip-grid div{border:1px solid var(--line);background:#ffffff94;border-radius:8px;padding:16px}.footer-chip-grid strong{font-size:1.7rem;display:block}.footer-chip-grid span{color:var(--muted);font-weight:800}.footer-links{border-top:1px solid var(--line);grid-template-columns:1.3fr 1fr 1fr 1fr;gap:18px;display:grid}.footer-brand-block{max-width:30rem}.footer-links h3{margin-bottom:12px;font-size:1rem}.footer-links ul{margin:0;padding:0;list-style:none}.footer-links li+li{margin-top:10px}.footer-links li,.footer-links a,.footer-links span{color:var(--muted);line-height:1.6}.footer-links a:hover{color:var(--ink)}.footer-bottom{border-top:1px solid var(--line);color:var(--muted);flex-wrap:wrap;justify-content:space-between;gap:10px 18px;font-size:.92rem;font-weight:800;display:flex}@media (max-width:980px){.home-hero,.tool-hero,.calculator-block,.guide-band,.info-band,.visual-band,.usage-band,.footer-cta,.footer-links{grid-template-columns:1fr}.feature-stack,.hero-board,.tool-card-grid,.tool-card-grid.compact,.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mini-diagram,.tool-hero-media{justify-self:start;width:min(68vw,320px)}}@media (max-width:620px){.site-shell{inline-size:min(100% - 20px,1180px);padding-top:10px}.topbar{flex-direction:column;align-items:flex-start;gap:8px}.home-hero,.tool-hero{min-height:0;padding-top:28px}h1,.tool-hero h1{font-size:clamp(2.45rem,15vw,4rem)}.feature-stack,.hero-board,.tool-card-grid,.tool-card-grid.compact,.guide-grid,.stats-strip,.tool-input-grid,.hero-media-overlay,.footer-chip-grid{grid-template-columns:1fr}.input-panel,.output-panel,.info-band,.guide-band,.category-block,.visual-band,.usage-band,.footer-cta,.footer-links,.footer-bottom{padding:18px}.hero-media-card{min-height:300px}}
