:root{--paper:#f4f2ec;--paper-2:#eceae2;--ink:#16150f;--ink-2:#5c5a50;--ink-3:#6f6d62;--line:rgba(22,21,15,.16);--line-strong:rgba(22,21,15,.42);--accent:#de3c24;--accent-text:#c5311b;--max:1200px;--measure:680px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;font-feature-settings:"palt"}*{box-sizing:border-box;min-width:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}body{margin:0;background:var(--paper);color:var(--ink);font-family:Archivo,Noto Sans JP,-apple-system,BlinkMacSystemFont,Hiragino Kaku Gothic ProN,sans-serif;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;width:100%;overflow-wrap:break-word}h1,h2,h3{overflow-wrap:anywhere;word-break:normal}::selection{background:var(--accent);color:#fff}a{color:inherit;text-decoration:none}strong,b{font-weight:700;color:var(--ink)}.frame{max-width:var(--max);margin:0 auto;padding:0 28px}@media(max-width:640px){.frame{padding:0 20px}}.mark{display:inline-grid;grid-template-columns:repeat(2,9px);grid-auto-rows:9px;gap:3px;vertical-align:middle}.mark i{display:block;width:9px;height:9px;background:var(--ink)}.mark i:first-child{background:var(--accent)}.site-head{border-bottom:1px solid var(--line)}.site-head .frame{display:flex;align-items:center;justify-content:space-between;padding-top:22px;padding-bottom:22px}.brand{display:flex;align-items:center;gap:12px}.brand .word{font-weight:800;letter-spacing:.01em;font-size:18px;color:var(--ink)}.brand .tag{display:block;font-weight:500;font-size:10.5px;letter-spacing:.16em;color:var(--ink-3);text-transform:uppercase;margin-top:2px}.head-note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3)}@media(max-width:560px){.head-note{display:none}}.site-foot{border-top:1px solid var(--line);margin-top:80px}.site-foot .frame{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:40px;padding-bottom:64px;font-size:12.5px;color:var(--ink-3);letter-spacing:.02em}.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent-text);font-weight:600}.kicker{display:block;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);font-weight:600}h1{font-weight:800;letter-spacing:-.02em;line-height:1.04;margin:0;font-size:clamp(40px,8vw,92px)}h2{font-weight:800;letter-spacing:-.015em;line-height:1.12;margin:0}h3{font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0}.grad{color:var(--accent)}.dim{color:var(--ink-2)}p{margin:1em 0}.hero{padding:72px 0 36px}.hero .eyebrow{margin-bottom:26px;display:block}.hero h1{font-size:clamp(27px,6.6vw,76px);line-height:1.08}.hero-foot{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:end;margin-top:44px;padding-top:24px;border-top:1px solid var(--line)}.hero-foot .lead{font-size:17px;color:var(--ink-2);max-width:46ch}.hero-foot .count{font-size:13px;letter-spacing:.04em;color:var(--ink-3);text-align:right;align-self:end}@media(max-width:640px){.hero-foot{grid-template-columns:1fr}.hero-foot .count{text-align:left}}.index{margin:64px 0 0;border-top:1px solid var(--line-strong)}.index-row{display:grid;grid-template-columns:64px 1fr auto;gap:28px;align-items:baseline;padding:34px 0;border-bottom:1px solid var(--line);transition:padding .25s ease}.index-row .no{font-size:14px;font-weight:700;color:var(--ink-3);letter-spacing:.02em}.index-row .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-text);font-weight:600;display:block;margin-bottom:10px}.index-row h3{font-size:clamp(24px,4.2vw,40px);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--ink)}.index-row .desc{margin:12px 0 0;color:var(--ink-2);font-size:15.5px;max-width:52ch}.index-row .arrow{font-size:22px;color:var(--ink-3);align-self:center;transition:transform .25s ease,color .25s ease}.index-row:hover{padding-left:14px}.index-row:hover .arrow{transform:translate(6px);color:var(--accent)}.index-row:hover h3{color:var(--accent)}@media(max-width:640px){.index-row{grid-template-columns:1fr;gap:6px;padding:26px 0}.index-row .arrow{display:none}}.article-head{padding:64px 0 0;max-width:18ch}.article-head.full{max-width:none}.article-head .eyebrow{display:block;margin-bottom:22px}.article-head h1{font-size:clamp(34px,6.5vw,72px);max-width:none}.deck{font-size:clamp(18px,2.4vw,22px);line-height:1.55;color:var(--ink-2);font-weight:500;max-width:30ch;margin:26px 0 0}.meta-row{display:flex;gap:0;flex-wrap:wrap;margin:36px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.meta-row .chip{font-size:12px;letter-spacing:.04em;color:var(--ink-2);padding:14px 22px 14px 0;border-right:0}.meta-row .chip+.chip{padding-left:22px;border-left:1px solid var(--line)}.article-body{margin:56px auto 0;max-width:var(--measure)}.article-body>*{max-width:var(--measure)}.article-body h2{font-size:clamp(26px,4.4vw,40px);margin:80px 0 24px;padding-top:32px;border-top:2px solid var(--ink)}.article-body h3{font-size:20px;margin:40px 0 12px;color:var(--ink)}.article-body p{color:#2a2920}.article-body strong{color:var(--ink)}.article-body a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.article-body ul:not(.check),.article-body ol{padding-left:1.2em}.article-body li{margin:.4em 0}.article-body code{font-family:SF Mono,ui-monospace,Menlo,monospace}.article-body :not(pre)>code{background:var(--paper-2);border:1px solid var(--line);padding:1px 6px;border-radius:4px;font-size:.88em}.article-body>:is(.grid,.demo,table){width:min(94vw,980px);max-width:980px;margin-left:50%;transform:translate(-50%)}@media(max-width:1040px){.article-body>:is(.grid,.demo,table){width:100%;margin-left:0;transform:none}}.back{display:inline-block;margin:72px 0 0;padding-top:24px;border-top:1px solid var(--line);width:100%;color:var(--ink-2);font-size:14px;font-weight:600;letter-spacing:.02em}.back:hover{color:var(--accent)}.grid{display:grid;gap:0;margin:26px 0}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}@media(max-width:680px){.g2,.g3{grid-template-columns:1fr}}.grid .card{border:1px solid var(--line);margin:-.5px}.card{background:transparent;padding:24px}.card h4{margin:0 0 8px;font-size:15px;font-weight:700;color:var(--ink)}.card p{margin:4px 0;font-size:14px;color:var(--ink-2);line-height:1.7}.demo{border:1px solid var(--line);overflow:hidden;margin:26px 0;background:var(--paper)}.demo .canvas{height:200px;display:flex;align-items:center;justify-content:center;position:relative}.demo .label{padding:14px 18px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--line);background:var(--paper);letter-spacing:.01em}.demo .txt{font-weight:700;font-size:22px;position:relative;z-index:2}.grid.g2 .demo,.grid.g3 .demo{margin:0;border-right-width:0}.grid.g2 .demo:last-child,.grid.g3 .demo:last-child{border-right-width:1px}@media(max-width:680px){.grid.g2 .demo,.grid.g3 .demo{border-right-width:1px;margin-bottom:-1px}}table{width:100%;border-collapse:collapse;font-size:14.5px}th,td{text-align:left;padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6}th{color:var(--ink-3);font-weight:600;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--ink)}td strong{color:var(--ink)}tr:hover td{background:#de3c2408}pre{background:var(--ink);color:#e9e7df;border-radius:0;padding:20px;overflow:auto;font-size:13px;line-height:1.7;margin:22px 0;border-left:3px solid var(--accent)}pre code{color:#e9e7df}.note{border-left:3px solid var(--accent);background:transparent;padding:6px 0 6px 18px;margin:24px 0;font-size:15px;color:var(--ink-2)}.note b{color:var(--ink)}ul.check{list-style:none;padding:0;margin:18px 0}ul.check li{padding:13px 0 13px 32px;position:relative;border-bottom:1px solid var(--line);font-size:15.5px}ul.check li:before{content:"";position:absolute;left:0;top:20px;width:11px;height:11px;background:var(--accent)}.src{font-size:13px;color:var(--ink-3);margin-top:14px}.src a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}.badge{font-size:10.5px;padding:2px 7px;border:1px solid var(--line);margin-right:7px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}.b-primary{color:var(--accent);border-color:#de3c2466}.b-blog{color:var(--ink-3)}.chip{display:inline-block}.jn-thumb{display:block;overflow:hidden;background:var(--paper-2);border:1px solid var(--line)}.jn-thumb svg{display:block;width:100%;height:100%}@media(prefers-reduced-motion:no-preference){.jn-thumb.is-anim svg .jn-spin{transform-box:fill-box;transform-origin:center;animation:jn-spin 26s linear infinite}.jn-thumb.is-anim svg .jn-breathe{transform-box:fill-box;transform-origin:center;animation:jn-breathe 6.5s ease-in-out infinite}.jn-thumb.is-anim svg .jn-float{animation:jn-float 6s ease-in-out infinite}.index-row:hover .jn-thumb.is-anim svg .jn-spin,.article-key:hover .jn-thumb.is-anim svg .jn-spin{animation-duration:7s}.index-row:hover .jn-thumb.is-anim svg .jn-breathe{animation-duration:3.2s}}@keyframes jn-spin{to{transform:rotate(360deg)}}@keyframes jn-breathe{0%,to{transform:scale(1)}50%{transform:scale(1.09)}}@keyframes jn-float{0%,to{transform:translateY(-5px)}50%{transform:translateY(5px)}}.index-row{grid-template-columns:150px 1fr auto;align-items:center}.idx-thumb{width:150px;aspect-ratio:3/2}.index-row:hover .idx-thumb{border-color:var(--accent)}@media(max-width:640px){.index-row{grid-template-columns:1fr;gap:14px}.idx-thumb{width:100%;aspect-ratio:16/6}}.article-key{display:block;width:min(620px,100%);aspect-ratio:3/2;margin:32px 0 0}@media(max-width:640px){.article-key{aspect-ratio:16/10}}@media(prefers-reduced-motion:no-preference){.anim .article-body .demo{opacity:0;transform:translateY(16px) scale(.985);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}.anim .article-body .demo.is-in{opacity:1;transform:none}.anim .article-body .grid.g2>.demo:nth-child(2){transition-delay:.16s;position:relative}.anim .article-body .grid.g2>.demo:nth-child(2):after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translate(-135%)}.anim .article-body .grid.g2>.demo:nth-child(2).is-in:after{animation:jn-sweep 1s ease .45s 1 forwards}}@keyframes jn-sweep{0%{transform:translate(-135%)}to{transform:translate(135%)}}@media(prefers-reduced-motion:no-preference){.jn-thumb.is-anim svg .jn-shadow{animation:jn-shadow 5s ease-in-out infinite}.jn-thumb.is-anim svg .jn-radius{animation:jn-radius 4.5s ease-in-out infinite}.jn-thumb.is-anim svg .jn-snap{animation:jn-snap 3.4s ease-in-out infinite}.jn-thumb.is-anim svg .jn-press{transform-box:fill-box;transform-origin:center;animation:jn-press 3s ease infinite}.jn-thumb.is-anim svg .jn-line{transform-box:fill-box;transform-origin:left center;animation:jn-line 3.6s ease-in-out infinite}.jn-thumb.is-anim svg .jn-travel{animation:jn-travel 2.6s ease-in-out infinite alternate}.jn-thumb.is-anim svg .jn-caret{animation:jn-caret 1.1s steps(1) infinite}.index-row:hover .jn-thumb.is-anim svg .jn-press{animation-duration:1.4s}.index-row:hover .jn-thumb.is-anim svg .jn-snap{animation-duration:2s}}@keyframes jn-shadow{0%,to{transform:translate(0)}50%{transform:translate(9px,9px)}}@keyframes jn-radius{0%,to{rx:6px}50%{rx:40px}}@keyframes jn-snap{0%,35%{transform:translate(14px)}55%,to{transform:translate(0)}}@keyframes jn-press{0%,72%,to{transform:scale(1)}84%{transform:scale(.92)}}@keyframes jn-line{0%{transform:scaleX(.15)}60%,to{transform:scaleX(1)}}@keyframes jn-travel{0%{transform:translate(0)}to{transform:translate(206px,-104px)}}@keyframes jn-caret{0%,49%{opacity:1}50%,to{opacity:0}}:where(a,button,[tabindex],summary):focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}.index-row:focus-visible{outline:3px solid var(--accent);outline-offset:-3px;padding-left:14px}.index-row:focus-visible h3{color:var(--accent)}.skip{position:absolute;left:12px;top:-60px;z-index:1000;background:var(--ink);color:#fff;padding:10px 16px;font-weight:700;font-size:14px;border-radius:6px;transition:top .15s}.skip:focus{top:12px}main:focus{outline:none}.b-secondary,.b-course{color:var(--ink-2);border-color:var(--line-strong)}.article-body :is(h2,h3){scroll-margin-top:24px}.filters{display:flex;flex-wrap:wrap;gap:8px;margin:56px 0 0}.chip-f{font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line-strong);background:transparent;color:var(--ink-2);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.02em;transition:background .15s,color .15s,border-color .15s}.chip-f span{font-size:11px;color:var(--ink-3)}.chip-f:hover{border-color:var(--ink)}.chip-f.is-on{background:var(--ink);color:#fff;border-color:var(--ink)}.chip-f.is-on span{color:#fff9}.filters+.index{margin-top:24px}.no-match{padding:40px 0;text-align:center}.index-row .when{color:var(--ink-3);margin-top:14px;font-size:13px}.toc{margin:32px 0 0;border:1px solid var(--line);padding:20px 24px;background:var(--paper)}.toc-h{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:12px}.toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:32px}@media(max-width:640px){.toc ol{columns:1}}.toc li{margin:0 0 8px;break-inside:avoid;font-size:14.5px;line-height:1.45}.toc a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid transparent}.toc a:hover{color:var(--accent-text);border-bottom-color:var(--accent-text)}