.component-page .crumbs{font-size:var(--fs-xs);color:var(--muted);margin-bottom:var(--space-5);gap:var(--space-2);flex-wrap:wrap;align-items:center;display:flex}.component-page .crumbs a{text-decoration:none}.component-page .crumbs a:hover{color:var(--ink)}.component-page .c-head{padding:clamp(32px, 5vw, 56px) 0 var(--space-6)}.component-page .c-head-grid{grid-template-columns:200px 1fr;align-items:center;gap:clamp(24px,4vw,48px);display:grid}.component-page .c-art{aspect-ratio:1;border-radius:var(--radius-lg) var(--radius-lg) 56px var(--radius-lg);background:var(--teal-soft);color:var(--ink);place-items:center;display:grid;position:relative;overflow:hidden}.component-page .c-art svg{width:76%;height:76%}.component-page .c-art .wave{fill:none;stroke:var(--teal);stroke-width:2px;stroke-linecap:round;animation:wv 2.8s var(--ease) infinite;opacity:0}.component-page .c-art .wave.w2{animation-delay:.5s}@keyframes wv{0%{opacity:0}30%{opacity:.9}to{opacity:0}}.component-page .kind{font-size:var(--fs-xs);color:var(--teal);background:var(--teal-soft);margin-bottom:var(--space-3);border-radius:999px;align-items:center;gap:8px;padding:4px 12px;font-weight:600;display:inline-flex}.component-page .c-head h1{letter-spacing:-.035em;font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);font-weight:800;line-height:1.08}.component-page .c-head .lead{font-size:var(--fs-lg);color:var(--muted);margin:var(--space-3) 0 0;max-width:46ch}.component-page .facts{margin-top:var(--space-6);background:var(--line);border:1px solid var(--line);border-radius:var(--radius-md);grid-template-columns:repeat(4,1fr);gap:1px;display:grid;overflow:hidden}.component-page .facts div{background:var(--surface);padding:var(--space-4) var(--space-5)}.component-page .facts dt{font-size:var(--fs-xs);color:var(--muted)}.component-page .facts dd{margin:2px 0 0;font-weight:600}.component-page .c-layout{padding:var(--space-6) 0 var(--section);grid-template-columns:minmax(0,1fr) 300px;align-items:start;gap:clamp(28px,4vw,56px);display:grid}.component-page .sec{margin-bottom:var(--space-7);scroll-margin-top:90px}.component-page .sec h2{margin-bottom:var(--space-4);font-size:clamp(1.35rem,1.15rem + .8vw,1.75rem)}.component-page .sec>p{margin:0 0 var(--space-4);color:var(--muted)}.component-page .uses{gap:var(--space-3);grid-template-columns:repeat(3,1fr);display:grid}.component-page .use{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-4)}.component-page .use svg{width:26px;height:26px;color:var(--accent);margin-bottom:var(--space-2)}.component-page .use strong{font-weight:600;display:block}.component-page .use span{font-size:var(--fs-xs);color:var(--muted);margin-top:2px;line-height:1.6;display:block}.component-page .specs{gap:var(--space-2);display:grid}.component-page .spec{gap:var(--space-4);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px var(--space-5);grid-template-columns:170px 1fr auto;align-items:center;display:grid}.component-page .spec b{font-weight:600;font-size:var(--fs-sm)}.component-page .spec span{font-size:var(--fs-sm);color:var(--muted);line-height:1.55}.component-page .badge{white-space:nowrap;border-radius:999px;padding:3px 10px;font-size:.72rem;font-weight:600}.component-page .badge.must{background:var(--accent-soft);color:var(--accent-ink)}.component-page .badge.nice{background:var(--surface-2);color:var(--muted)}.component-page .steps{counter-reset:st;gap:0;margin:0;padding:0;list-style:none;display:grid;position:relative}.component-page .steps li{gap:var(--space-4);padding-bottom:var(--space-5);grid-template-columns:40px 1fr;display:grid;position:relative}.component-page .steps li:before{counter-increment:st;content:counter(st);background:var(--inverse-bg);width:40px;height:40px;color:var(--inverse-ink);z-index:1;border-radius:50%;place-items:center;font-weight:600;display:grid;position:relative}.component-page .steps li:not(:last-child):after{content:"";background:var(--line);width:2px;position:absolute;top:40px;bottom:0;right:19px}.component-page .steps strong{padding-top:8px;font-weight:600;display:block}.component-page .steps span{font-size:var(--fs-sm);color:var(--muted);margin-top:2px;line-height:1.6;display:block}.component-page .steps .time{color:var(--teal);margin-top:6px;font-size:.72rem;font-weight:600;display:inline-block}.component-page .place{gap:var(--space-3);grid-template-columns:1fr 1fr;display:grid}.component-page .place>div{border-radius:var(--radius-md);padding:var(--space-5)}.component-page .place .do{background:var(--teal-soft)}.component-page .place .dont{background:var(--accent-soft)}.component-page .place h3{margin-bottom:var(--space-3);align-items:center;gap:8px;font-size:1rem;font-weight:600;display:flex}.component-page .place h3 svg{width:20px;height:20px}.component-page .place .do h3 svg{color:var(--teal)}.component-page .place .dont h3 svg{color:var(--accent-ink)}.component-page .place ul{font-size:var(--fs-sm);gap:8px;margin:0;padding:0;list-style:none;display:grid}.component-page .place li{gap:8px;line-height:1.55;display:flex}.component-page .place li:before{content:"•";color:var(--muted)}.component-page .faq{gap:var(--space-2);display:grid}.component-page .faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);transition:border-color .2s var(--ease)}.component-page .faq details[open]{border-color:var(--line-strong)}.component-page .faq summary{cursor:pointer;padding:14px var(--space-5);font-weight:600;font-size:var(--fs-sm);justify-content:space-between;gap:var(--space-3);align-items:center;list-style:none;display:flex}.component-page .faq summary::-webkit-details-marker{display:none}.component-page .faq summary:after{content:"";border:solid var(--muted);width:9px;height:9px;transition:transform .3s var(--ease);border-width:0 2px 2px 0;flex:none;margin-top:-4px;transform:rotate(45deg)}.component-page .faq details[open] summary:after{margin-top:4px;transform:rotate(-135deg)}.component-page .faq .ans{padding:0 var(--space-5) var(--space-4);font-size:var(--fs-sm);color:var(--muted);animation:faq-in .3s var(--ease);line-height:1.65}@keyframes faq-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.component-page .works{gap:var(--space-2);flex-wrap:wrap;display:flex}.component-page .works span{border:1px solid var(--line);background:var(--surface);font-size:var(--fs-xs);border-radius:999px;align-items:center;gap:8px;padding:6px 14px;font-weight:500;display:inline-flex}.component-page .works i{border-radius:50%;width:8px;height:8px}.component-page .works .y{background:var(--teal)}.works .m{background:var(--mustard)}.component-page aside{gap:var(--space-3);display:grid;position:sticky;top:92px}.component-page .buy{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg) var(--radius-lg) 40px var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.component-page .buy small{font-size:var(--fs-xs);color:var(--muted);font-weight:600}.component-page .buy h3{margin:4px 0 var(--space-3);font-size:1.15rem;font-weight:600}.component-page .in-plan{font-size:var(--fs-xs);background:var(--teal-soft);color:var(--teal);border-radius:var(--radius-sm);margin-bottom:var(--space-3);align-items:center;gap:10px;padding:10px 12px;font-weight:600;display:flex}.component-page .in-plan svg{flex:none;width:18px;height:18px}.component-page .in-plan a{color:inherit;white-space:nowrap;margin-inline-start:auto}.component-page .buy-check{margin:0 0 var(--space-4);font-size:var(--fs-xs);color:var(--muted);gap:6px;padding:0;list-style:none;display:grid}.component-page .buy-check li{gap:8px;display:flex}.component-page .buy-check li:before{content:"✓";color:var(--teal);font-weight:700}.component-page .buy .btn{justify-content:center;width:100%}.component-page .buy .btn+.btn{margin-top:var(--space-2)}.component-page .buy .note{color:var(--muted);margin:var(--space-3) 0 0;font-size:.7rem;line-height:1.55}.component-page .mini-toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3);gap:2px;display:grid}.component-page .mini-toc a{font-size:var(--fs-sm);color:var(--muted);transition:all .2s var(--ease);border-radius:10px;padding:7px 12px;text-decoration:none}.component-page .mini-toc a:hover{color:var(--ink);background:var(--surface-2)}.component-page .mini-toc a.current{color:var(--ink);background:var(--surface-2);font-weight:600}.component-page .related{padding:var(--section) 0;border-top:1px solid var(--line)}.component-page .rel-head{justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-5);display:flex}.component-page .rel-head h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.9rem)}.component-page .rel-head a{font-size:var(--fs-sm);color:var(--teal);font-weight:600;text-decoration:none}.component-page .rel-grid{gap:var(--space-3);grid-template-columns:repeat(4,1fr);display:grid}.component-page .rel{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);transition:transform .3s var(--ease), box-shadow .3s var(--ease);flex-direction:column;gap:6px;text-decoration:none;display:flex}.component-page .rel:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.component-page .rel span{font-size:var(--fs-xs);color:var(--teal);font-weight:600}.component-page .rel span.g{color:var(--accent-ink)}.component-page .rel strong{font-weight:600;line-height:1.35}.component-page .rel small{padding-top:var(--space-2);font-size:var(--fs-xs);color:var(--muted);margin-top:auto}@media (max-width:1020px){.component-page .c-layout{grid-template-columns:1fr}.component-page aside{order:-1;position:static}.component-page .mini-toc{display:none}.component-page .rel-grid{grid-template-columns:1fr 1fr}}@media (max-width:720px){.component-page .c-head-grid{grid-template-columns:1fr}.component-page .c-art{width:140px}.component-page .facts{grid-template-columns:1fr 1fr}.component-page .uses,.component-page .place{grid-template-columns:1fr}.component-page .spec{gap:4px var(--space-3);grid-template-columns:1fr auto}.component-page .spec span{grid-area:2/1/auto/-1}.component-page .rel-grid{grid-template-columns:1fr}}