@layer components{.read-progress{z-index:60;pointer-events:none;height:3px;position:fixed;inset:0 0 auto}.read-progress span{background:var(--color-signal);transform-origin:0;height:100%;display:block;transform:scaleX(0)}.kit-page{max-width:820px;padding-top:40px}.kit-hero{border-bottom:1px solid var(--color-line);padding-bottom:32px}.kit-h1{letter-spacing:-.03em;font-size:clamp(2.1rem,5.5vw,3.25rem);line-height:1.08}.chips{flex-wrap:wrap;gap:8px;margin:24px 0 0;padding:0;list-style:none;display:flex}.chips li{border:1px solid var(--color-line);color:var(--color-mute);border-radius:999px;padding:5px 11px;font-size:.8125rem}.doc{color:var(--color-ink-2)}.doc section,.doc h2{scroll-margin-top:90px}.doc a{color:var(--color-ink);text-decoration-color:var(--color-signal)}.doc a:hover{color:var(--color-signal-dark)}.doc b,.doc strong{color:var(--color-ink);font-weight:650}.doc em{color:var(--color-signal-dark);font-style:normal}.doc code{background:var(--color-sand);color:var(--color-ink);border-radius:5px;padding:.12em .4em;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.875em}.toc{background:var(--color-sand);border-radius:16px;margin:32px 0 8px;padding:22px 24px}.toc>p{color:var(--color-mute);margin:0 0 12px;font-size:.875rem;font-weight:600}.toc ol{counter-reset:toc;gap:2px;margin:0;padding:0;list-style:none;display:grid}.toc a{color:var(--color-ink);border-radius:8px;align-items:baseline;gap:14px;margin:0 -10px;padding:7px 10px;text-decoration:none;transition:background-color .2s;display:flex}.toc a:before{counter-increment:toc;content:counter(toc, decimal-leading-zero);color:var(--color-mute);font-variant-numeric:tabular-nums;font-size:.8125rem;font-weight:600}.toc a:hover{background:#1213160d}.chapter{padding-top:64px}.chapter__num{color:var(--color-mute);margin:0 0 10px;font-size:.875rem;font-weight:600}.chapter h2,.prose-kit h2{letter-spacing:-.02em;margin:0 0 14px;font-size:clamp(1.6rem,3.6vw,2.1rem);line-height:1.15}.chapter h3,.chapter h4{margin:0;line-height:1.3}.chapter h3{font-size:1.2rem}.chapter h4,.flow__item h3,.step-doc h3{font-size:1.0625rem}.chapter>p{max-width:66ch;margin:0 0 12px}.layers,.pieces,.flow,.steps-doc{gap:10px;margin:26px 0 10px;display:grid}.layer,.piece,.flow__item,.step-doc,.note,.prompt,.ui,.checklist,.table-wrap{border:1px solid var(--color-line);background:var(--color-paper);border-radius:16px}.layer{grid-template-columns:150px minmax(0,1fr);align-items:center;gap:16px;padding:16px 18px;display:grid}@media (width<=560px){.layer{grid-template-columns:1fr}}.layer__name{color:var(--color-ink);font-weight:600;line-height:1.25}.layer__name span{color:var(--color-mute);margin-top:4px;font-size:.8125rem;font-weight:400;display:block}.layer__items{flex-wrap:wrap;gap:6px;display:flex}.layer__items b{background:var(--color-sand);color:var(--color-ink);border-radius:999px;padding:6px 11px;font-size:.875rem;font-weight:600}.layer--accent{background:#fffaf5;border-color:#ffd3ad}.layer--accent .layer__items b{background:var(--color-signal-soft);color:var(--color-signal-dark)}.piece{padding:22px}.piece__head{flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:14px;display:flex}.piece__icon{background:var(--color-sand);width:36px;height:36px;color:var(--color-ink-2);font-family:var(--font-display);border-radius:10px;flex:none;place-items:center;font-size:.875rem;font-weight:600;display:grid}.piece__where{border:1px solid var(--color-line);color:var(--color-mute);border-radius:999px;padding:3px 10px;font-size:.8125rem}.piece dl{gap:12px;margin:0;display:grid}.piece dt{color:var(--color-ink);margin-bottom:3px;font-size:.8125rem;font-weight:600}.piece dd{margin:0;font-size:.96875rem}.flow__item{grid-template-columns:36px minmax(0,1fr);gap:14px;padding:16px 18px;display:grid}.flow__n{background:var(--color-ink);width:36px;height:36px;color:var(--color-paper);border-radius:50%;place-items:center;font-weight:600;display:grid}.flow__item p{margin:4px 0 0;font-size:.96875rem}.flow__arrow{text-align:center;color:var(--color-mute);line-height:1}.steps-doc{counter-reset:step}.step-doc{padding:22px}.step-doc__head{align-items:center;gap:12px;margin-bottom:10px;display:flex}.step-doc__n{counter-increment:step;background:var(--color-ink);width:32px;height:32px;color:var(--color-paper);border-radius:50%;flex:none;place-items:center;font-weight:600;display:grid}.step-doc__n:before{content:counter(step)}.step-doc p{margin:0;font-size:.96875rem}.step-doc p+p{margin-top:10px}.ui{margin-top:14px;overflow:hidden}.ui__bar{border-bottom:1px solid var(--color-line);background:var(--color-sand);align-items:center;gap:6px;padding:10px 14px;display:flex}.ui__bar i{background:#d6d3cc;border-radius:50%;width:9px;height:9px}.ui__bar span{color:var(--color-mute);margin-left:8px;font-size:.78125rem}.ui__body{gap:8px;padding:14px;display:grid}.ui__row{background:var(--color-sand);border-radius:8px;align-items:center;gap:10px;padding:9px 12px;font-size:.875rem;display:flex}.ui__field{border:1px solid var(--color-line);color:var(--color-ink);border-radius:8px;padding:10px 12px;font-size:.875rem}.ui__btn{background:var(--color-signal);color:var(--color-ink);border-radius:8px;justify-self:start;padding:8px 14px;font-size:.875rem;font-weight:600}.note{background:#fffaf5;border-color:#ffd3ad;align-items:flex-start;gap:14px;margin:18px 0;padding:16px 18px;display:flex}.note__icon{background:var(--color-signal);width:24px;height:24px;color:var(--color-ink);border-radius:50%;flex:none;place-items:center;font-size:.8125rem;font-weight:700;display:grid}.note p{margin:0;font-size:.96875rem}.prompt{margin:16px 0;overflow:hidden}.prompt__bar{border-bottom:1px solid var(--color-line);background:var(--color-sand);color:var(--color-mute);justify-content:space-between;align-items:center;gap:10px;padding:8px 8px 8px 14px;font-size:.8125rem;display:flex}.prompt__copy,.code-copy{border:1px solid var(--color-line);background:var(--color-paper);min-height:32px;color:var(--color-ink);font:inherit;cursor:pointer;border-radius:8px;padding:0 12px;font-size:.8125rem;font-weight:600;transition:border-color .2s}.prompt__copy:hover,.code-copy:hover{border-color:var(--color-signal)}.prompt pre,.prose-kit pre{white-space:pre-wrap;word-break:break-word;color:var(--color-ink);margin:0;padding:16px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.875rem;line-height:1.6}.checklist{margin:16px 0;padding:16px 18px 16px 40px}.checklist li{margin:6px 0}.checklist li::marker{color:var(--color-signal-dark)}.table-wrap{margin:18px 0;overflow-x:auto}.doc table{border-collapse:collapse;width:100%;font-size:.9375rem}@media (width<=640px){.doc .table-wrap table{font-size:.8125rem}.doc .table-wrap th,.doc .table-wrap td{padding:9px 7px}}.doc th,.doc td{text-align:left;vertical-align:top;border-bottom:1px solid var(--color-line);padding:11px 14px}.doc th{color:var(--color-ink);background:var(--color-sand);font-weight:600}.doc .btn{color:var(--color-ink);text-decoration:none}.prose-kit{padding-top:24px}.prose-kit h2{margin-top:56px}.prose-kit h3{margin:32px 0 10px;font-size:1.2rem;line-height:1.3}.prose-kit p,.prose-kit ul,.prose-kit ol{max-width:68ch;margin:0 0 14px}.prose-kit ul,.doc .chapter>ul{padding-left:1.3rem;list-style:outside}.prose-kit ol,.doc .chapter>ol{padding-left:1.5rem;list-style:decimal}.prose-kit li{margin:6px 0}.prose-kit li::marker{color:var(--color-mute)}.prose-kit pre{background:var(--color-sand);border-radius:12px;margin:16px 0;padding-right:92px;position:relative}.prose-kit pre code{font-size:inherit;background:0 0;padding:0}.prose-kit .code-copy{position:absolute;top:8px;right:8px}.prose-kit hr{border:0;border-top:1px solid var(--color-line);margin:40px 0}.prose-kit blockquote{background:var(--color-sand);color:var(--color-ink-2);border-radius:12px;margin:16px 0;padding:12px 18px}.kit-end{border-top:1px solid var(--color-line);margin-top:72px;padding-top:28px}.more{gap:0;display:grid}.more li+li .more-row{border-top:1px solid var(--color-line)}.more-row{align-items:center;gap:14px;padding:16px 0;text-decoration:none;display:flex}.more-row:hover svg{color:var(--color-signal-dark)}.kit-n-sm{background:var(--color-sand);width:38px;height:38px;font-family:var(--font-display);color:var(--color-ink-2);border-radius:10px;flex:none;place-items:center;font-size:.875rem;font-weight:600;display:grid}.kit-cta{background:var(--color-sand);border-radius:16px;padding:28px}@media (width>=768px){.kit-cta{padding:40px}}}