:root { --ink:#20241f; --muted:#5c6153; --line:rgba(32,36,31,.14); --lcd:#8fa084; --lcd-dark:#57684c; --paper:#e7e5dc; --white:#fff; --soft:#eae6dd; --shadow:0 24px 70px rgba(32,36,31,.16); --serif:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:var(--lcd-dark); text-underline-offset:3px; }
a:focus-visible, summary:focus-visible { outline:2px solid var(--lcd-dark); outline-offset:3px; border-radius:4px; }
.cta-card a:focus-visible { outline-color:#fff; }
img { display:block; max-width:100%; height:auto; }
.container { width:min(1040px,calc(100% - 40px)); margin:0 auto; }
.nav { position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(255,255,255,.65); background:rgba(231,229,220,.88); backdrop-filter:blur(20px); }
.nav-inner { min-height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { color:var(--ink); font-family:var(--serif); font-size:21px; font-weight:700; letter-spacing:.02em; text-decoration:none; }
.nav-links { display:flex; align-items:center; gap:22px; font-size:14px; }
.nav-links a { color:var(--muted); text-decoration:none; }
.nav-links a:hover { color:var(--ink); }
.hero { padding:86px 0 76px; background:radial-gradient(circle at 82% 22%,rgba(143,160,132,.2),transparent 28%),linear-gradient(145deg,#ece9df 0%,#f3f1e9 55%,#e9e6da 100%); }
.breadcrumbs { margin:0 0 34px; color:var(--muted); font-size:13px; }
.breadcrumbs a { color:inherit; }
.hero-grid { display:grid; grid-template-columns:1.15fr .7fr; gap:70px; align-items:center; }
.eyebrow { margin:0 0 16px; color:var(--lcd-dark); font-size:13px; font-weight:750; letter-spacing:.14em; text-transform:uppercase; }
h1 { margin:0; font-family:var(--serif); font-weight:700; font-size:clamp(40px,5.6vw,66px); line-height:1.16; letter-spacing:-.045em; }
.lead { margin:26px 0 0; color:var(--muted); font-size:clamp(17px,2vw,20px); line-height:1.9; }
.hero-image { width:min(330px,100%); justify-self:center; }
.hero-image img { border-radius:24px; box-shadow:var(--shadow); }
main section { padding:82px 0; }
main section + section { border-top:1px solid var(--line); }
.article { width:min(760px,calc(100% - 40px)); margin:0 auto; }
h1,h2 { text-wrap:balance; }
h2 { font-family:var(--serif); font-weight:700; }
h2 { margin:0 0 22px; font-size:clamp(29px,4vw,42px); line-height:1.3; letter-spacing:-.035em; }
h3 { margin:36px 0 12px; font-size:21px; letter-spacing:-.015em; }
p { margin:0 0 18px; color:var(--muted); font-size:16px; line-height:1.95; }
strong { color:var(--ink); }
blockquote { margin:24px 0; padding:4px 0 4px 20px; border-left:4px solid var(--lcd); }
blockquote p:last-child { margin-bottom:0; }
.formula { margin:26px 0; padding:25px 28px; border:1px solid var(--line); border-radius:20px; background:var(--white); font-size:clamp(20px,3vw,28px); font-weight:750; line-height:1.55; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.example-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:30px; }
.example { padding:26px; border:1px solid var(--line); border-radius:22px; background:var(--white); }
.example h3 { margin:0 0 10px; font-size:18px; }
.example .answer { margin:16px 0 0; color:var(--lcd-dark); font-size:27px; font-weight:800; font-variant-numeric:tabular-nums; }
.key-sequence { margin:16px 0 0; padding-top:15px; border-top:1px solid var(--line); color:var(--muted); font-size:14px; line-height:1.8; }
code { padding:.12em .38em; border-radius:6px; color:var(--ink); background:#eeece3; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.92em; }
.focus { padding:34px; border-radius:26px; background:var(--ink); color:#fff; }
.focus h2,.focus strong { color:#fff; }
.focus p { color:#b7b9ad; }
.focus .formula { border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:#fff; }
.note { margin-top:22px; padding:18px 20px; border-left:4px solid var(--lcd); border-radius:0 12px 12px 0; background:var(--soft); color:var(--muted); font-size:14px; line-height:1.8; }
.quick-answer { margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.quick-answer .label { margin:0 0 10px; color:var(--lcd-dark); font-size:12px; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
.quick-answer .quick-formula { margin:0 0 12px; font-size:clamp(18px,2.4vw,22px); font-weight:800; letter-spacing:-.02em; line-height:1.5; font-variant-numeric:tabular-nums; }
.quick-answer .quick-formula strong { color:var(--lcd-dark); }
.quick-answer .quick-keys { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.quick-answer .quick-keys code { color:var(--ink); }
.quick-jump { display:flex; flex-wrap:wrap; gap:8px 10px; margin:16px 0 0; padding:0; list-style:none; }
.quick-jump a { display:inline-block; padding:7px 13px; border:1px solid var(--line); border-radius:999px; color:var(--lcd-dark); background:rgba(255,255,255,.6); font-size:13px; font-weight:650; text-decoration:none; }
.quick-jump a:hover { background:#fff; color:var(--ink); }
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:30px; }
.related-card { display:block; padding:22px; border:1px solid var(--line); border-radius:20px; background:var(--white); text-decoration:none; color:inherit; transition:box-shadow .2s ease,transform .2s ease; }
.related-card:hover { border-color:var(--lcd-dark); box-shadow:0 12px 30px rgba(32,36,31,.14); transform:translateY(-2px); }
.related-card h3 { margin:0 0 8px; font-size:17px; }
.related-card p { margin:0; color:var(--muted); font-size:14px; line-height:1.7; }
.cta-meta { position:relative; z-index:1; margin:16px 0 0; color:rgba(255,255,255,.85); font-size:14px; font-weight:650; }
.cta { padding-top:28px; }
.cta-card { position:relative; overflow:hidden; padding:46px; border-radius:28px; color:#fff; background:linear-gradient(135deg,#2c322a,#57684c 62%,#8fa084); box-shadow:var(--shadow); }
.cta-card::after { content:"C"; position:absolute; right:10px; bottom:-90px; color:rgba(255,255,255,.08); font-size:270px; font-weight:800; line-height:1; }
.cta-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; margin:0 0 26px; color:#fff; font-family:var(--serif); font-size:24px; font-weight:700; line-height:1.2; }
.cta-icon { width:1em; height:1em; flex-shrink:0; border-radius:22%; }
.cta-card h2 { position:relative; z-index:1; margin-bottom:14px; color:#fff; }
.cta-card p { position:relative; z-index:1; max-width:650px; color:rgba(255,255,255,.8); }
.app-store-link { position:relative; z-index:1; display:inline-flex; margin-top:8px; transition:transform .2s ease; }
.app-store-link img { display:block; width:auto; height:54px; }
.app-store-link:hover { transform:translateY(-2px); }
footer { padding:42px 0 58px; color:var(--muted); font-size:13px; }
.footer-inner { display:flex; justify-content:space-between; gap:20px; }
.footer-links { display:flex; flex-wrap:wrap; gap:18px; }
@media (max-width:760px) { .nav-links a:not(:last-child) { display:none; } .brand-tagline { display:none; } .hero { padding:40px 0 40px; } .hero-grid { grid-template-columns:1fr; gap:26px; } .hero-image { width:min(220px,58%); } .quick-answer { margin-top:24px; padding-top:20px; } main section { padding:62px 0; } .example-grid { grid-template-columns:1fr; } .focus { padding:26px; } .cta-card { padding:34px 25px; } .related-grid { grid-template-columns:1fr; } .footer-inner { flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition-duration:.01ms !important; animation-duration:.01ms !important; } }