@layer reset,tokens,typography,layout,components,sections,animations,responsive,a11y;@layer tokens{:root{--feat-rail:15.5rem;--feat-nav-h:77px;--feat-index-h:3.75rem}@media (min-width:769px){:root{--feat-nav-h:83px}}body{--feat-nav-offset:calc(var(--feat-nav-h) + var(--notice-h, 0px));--feat-anchor-offset:calc(var(--feat-nav-offset) + var(--feat-index-h) + var(--space-4))}@media (min-width:1100px){body{--feat-anchor-offset:calc(var(--feat-nav-offset) + var(--space-5))}}}@layer components{.feat-main{display:block;background:repeating-linear-gradient(0deg,var(--bg-grid) 0,var(--bg-grid) 1px,transparent 1px,transparent 64px),repeating-linear-gradient(90deg,var(--bg-grid) 0,var(--bg-grid) 1px,transparent 1px,transparent 64px),var(--bg-base)}.feat-tag{display:inline-block;padding:.2rem .45rem .15rem;border:1px solid var(--border-default);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.6875rem;font-weight:500;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;color:var(--text-secondary);background:var(--bg-elevated)}.feat-tag--new{color:var(--green);background:var(--green-glow);border-color:rgb(135 211 124 / .35)}.feat-tag--mobile{color:var(--sky);background:var(--sky-glow);border-color:rgb(34 167 240 / .3)}.feat-tag--ai{color:var(--text-primary);border-color:var(--border-strong)}.feat-tag--module{color:var(--amber);background:var(--amber-glow);border-color:rgb(255 182 39 / .3)}.feat-tag--usage{color:var(--text-secondary);background:#fff0;border-style:dashed;border-color:var(--border-strong)}.feat-chip{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--space-2) var(--space-4);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:#fff0;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast)}.feat-chip:hover{color:var(--text-primary);border-color:var(--border-strong)}.feat-chip.is-active{color:var(--text-inverse);background:var(--sky);border-color:var(--sky)}.feat-tool{display:inline-flex;align-items:center;min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-sm);background:#fff0;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary);transition:color var(--dur-fast),border-color var(--dur-fast)}.feat-tool:hover{color:var(--text-primary);border-color:var(--border-strong)}.feat-toolbar{display:grid;gap:var(--space-3);margin-bottom:var(--space-5);padding:var(--space-4);background:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--radius-md)}html:not(.js) .feat-toolbar,html:not(.js) [data-features-toggle-all]{display:none}.feat-search{position:relative}.feat-search__icon{position:absolute;top:50%;left:var(--space-4);width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--text-muted);stroke-width:2;stroke-linecap:round;pointer-events:none}.feat-search__input{width:100%;min-height:48px;padding:var(--space-3) 3rem var(--space-3) 2.9rem;background:var(--bg-input);border:1px solid var(--border-default);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--text-base);transition:border-color var(--dur-fast),box-shadow var(--dur-fast)}.feat-search__input::placeholder{color:var(--text-muted)}.feat-search__input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}.feat-search__clear{position:absolute;top:50%;right:2px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;transform:translateY(-50%);color:var(--text-secondary)}.feat-search__clear:hover{color:var(--text-primary)}.feat-search__clear svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round}.feat-toolbar__row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4)}.feat-filter{display:flex;flex-wrap:wrap;gap:var(--space-2)}.feat-toolbar__status{min-height:1.4em;margin-inline-start:auto;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-secondary)}.feat-legend{display:grid;gap:var(--space-2);margin-bottom:var(--space-6);font-size:var(--text-sm);color:var(--text-secondary)}.feat-legend__item{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--space-2) var(--space-3)}.feat-index{position:sticky;top:var(--feat-nav-offset);z-index:80;margin-inline:calc(50% - 50vw);padding-block:var(--space-2);padding-inline:max(var(--space-4), calc((100vw - 1200px) / 2));background:var(--bg-overlay);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-block:1px solid var(--border-subtle)}.feat-index__title,.feat-index__tools{display:none}.feat-index__list{display:flex;gap:var(--space-2);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none}.feat-index__list::-webkit-scrollbar{display:none}.feat-index__list>li{flex:0 0 auto;scroll-snap-align:start}.feat-index__link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-default);border-radius:var(--radius-sm);white-space:nowrap;font-size:var(--text-sm);color:var(--text-secondary);transition:color var(--dur-fast),border-color var(--dur-fast),background var(--dur-fast),opacity var(--dur-fast)}.feat-index__link:hover{color:var(--text-primary);border-color:var(--border-strong)}.feat-index__link.is-active{color:var(--text-primary);border-color:var(--sky);background:var(--sky-glow)}.feat-index__link.is-empty{opacity:.4}.feat-index__code,.feat-index__count{font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.04em}.feat-index__code{color:var(--amber)}.feat-index__count{color:var(--text-muted)}.feat{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2);padding:var(--space-5) 0 var(--space-5) var(--space-4);border-bottom:1px solid var(--border-subtle);scroll-margin-top:var(--feat-anchor-offset);transition:background var(--dur-fast)}.feat::before{content:'';position:absolute;inset-block:var(--space-4);inset-inline-start:0;width:2px;background:var(--border-default);transition:background var(--dur-fast)}.feat:hover::before,.feat:focus-within::before,.feat:has(.feat__more[open])::before,.feat:target::before,.feat.is-target::before{background:var(--sky)}.feat__code{font-family:var(--font-mono);font-size:var(--text-xs);font-variant-numeric:tabular-nums;letter-spacing:.08em;color:var(--text-muted)}.feat__body{min-width:0}.feat__head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3)}.feat__title{font-size:var(--text-xl);line-height:1.2}.feat__tags{display:flex;flex-wrap:wrap;gap:var(--space-2)}.feat__summary{max-width:68ch;margin-top:var(--space-2);color:var(--text-secondary);line-height:1.6}.feat__more{margin-top:var(--space-2)}.feat__toggle{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding-inline-end:var(--space-3);list-style:none;cursor:pointer;user-select:none;font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sky);transition:color var(--dur-fast)}.feat__toggle::-webkit-details-marker{display:none}.feat__toggle:hover{color:var(--text-primary)}.feat__toggle-icon{position:relative;flex:0 0 auto;width:12px;height:12px}.feat__toggle-icon::before,.feat__toggle-icon::after{content:'';position:absolute;inset:0;margin:auto;background:currentColor;border-radius:1px;transition:transform var(--dur-normal) var(--ease-out),opacity var(--dur-normal) var(--ease-out)}.feat__toggle-icon::before{width:12px;height:2px}.feat__toggle-icon::after{width:2px;height:12px}.feat__more[open] .feat__toggle-icon::after{transform:scaleY(0);opacity:0}.feat__panel{display:grid;gap:var(--space-4);margin-top:var(--space-2);padding:var(--space-4);background:var(--bg-raised);border:1px solid var(--border-subtle);border-radius:var(--radius-md)}.feat-media{margin:0}.feat-media__link{display:block;height:clamp(16rem, 46vw, 28rem);padding:var(--space-3);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:zoom-in;transition:border-color var(--dur-fast)}.feat-media__link:hover{border-color:var(--sky)}.feat-media__link img{display:block;width:100%;height:100%;object-fit:contain}.feat-media--video video{display:block;width:auto;max-width:100%;height:auto;max-height:min(72vh, 40rem);margin-inline:auto;background:#000;border:1px solid var(--border-default);border-radius:var(--radius-sm)}.feat__points{display:grid;gap:var(--space-2)}.feat__points li{display:flex;align-items:flex-start;gap:var(--space-3);color:var(--text-secondary);line-height:1.5}.feat__points li::before{content:'';flex:0 0 auto;width:16px;height:16px;margin-top:.25em;border:1.5px solid var(--green);border-radius:50%;background:var(--green-glow) url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 6.5L5 8.5L9 4' stroke='%2387D37C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat}.feat__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-5);font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em;color:var(--text-muted)}.feat__story,.feat__permalink{display:inline-flex;align-items:center;min-height:44px;transition:color var(--dur-fast)}.feat__story{color:var(--sky)}.feat__story::after{content:'\2192';margin-inline-start:var(--space-2);transition:transform var(--dur-fast) var(--ease-out)}.feat__story:hover{color:var(--text-primary)}.feat__story:hover::after{transform:translateX(3px)}.feat__permalink{color:var(--text-secondary)}.feat__permalink:hover{color:var(--text-primary)}.feat__permalink.is-copied{color:var(--green)}.feat__permalink.is-copied::before{content:'\2713';margin-inline-end:var(--space-2)}.feat__permalink.is-failed{color:var(--amber)}.feat-copy-buffer{position:fixed;top:0;left:0;width:1px;height:1px;padding:0;border:0;font-size:16px;opacity:0;pointer-events:none}.feat__thumb{display:none}.feat__thumb img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;object-position:top center;border:1px solid var(--border-default);border-radius:var(--radius-sm);transition:border-color var(--dur-fast)}.feat__thumb:hover img{border-color:var(--sky)}.feat__thumb--video{position:relative}.feat__thumb--video::before,.feat__thumb--video::after{content:'';position:absolute;top:50%;left:50%}.feat__thumb--video::before{width:2.5rem;height:2.5rem;transform:translate(-50%,-50%);border-radius:50%;background:var(--bg-overlay);border:1.5px solid var(--text-primary)}.feat__thumb--video::after{transform:translate(-35%,-50%);border-style:solid;border-width:.4rem 0 .4rem .65rem;border-color:#fff0 #fff0 #fff0 var(--text-primary)}.feat-empty{margin-top:var(--space-5);padding:var(--space-6) var(--space-5);border:1px dashed var(--border-strong);border-radius:var(--radius-md);text-align:center}.feat-empty__title{font-family:var(--font-display-alt);font-weight:700;font-size:var(--text-xl)}.feat-empty__body{margin-top:var(--space-2);color:var(--text-secondary)}.feat-empty__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3);margin-top:var(--space-5)}.feat-missing{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4) var(--space-6);margin-top:var(--space-8);padding:var(--space-5);background:var(--bg-card);border:1px solid var(--border-default);border-inline-start:3px solid var(--green);border-radius:var(--radius-md)}.feat-missing__text{flex:1 1 20rem;min-width:0}.feat-missing__label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:var(--space-2)}.feat-missing__title{font-size:var(--text-2xl)}.feat-missing__body{max-width:60ch;margin-top:var(--space-3);color:var(--text-secondary)}.feat-missing__button{flex:0 0 auto}.feat-lightbox{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:var(--space-5) var(--space-4);border:0;background:#fff0;color:var(--text-primary)}.feat-lightbox::backdrop{background:var(--bg-overlay)}.feat-lightbox[open]{display:grid;grid-template-rows:minmax(0,1fr) auto;justify-items:center;align-items:center;gap:var(--space-3)}.feat-lightbox__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);cursor:zoom-out}.feat-lightbox__caption{max-width:70ch;font-size:var(--text-sm);color:var(--text-secondary);text-align:center}.feat-lightbox__close{position:absolute;top:var(--space-3);right:var(--space-3);display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border-default);border-radius:var(--radius-sm);background:var(--bg-elevated);color:var(--text-primary);font-size:1.5rem;line-height:1}.feat-lightbox__close:hover{border-color:var(--border-strong)}}@layer sections{.feat-hero{padding:var(--space-7) 0 var(--space-6);border-bottom:1px solid var(--border-subtle)}.feat-hero__inner{display:grid;gap:var(--space-6);width:var(--container);margin-inline:auto}.feat-hero__label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:var(--space-3)}.feat-hero__title{font-size:var(--text-4xl);margin-bottom:var(--space-4)}.feat-hero__sub{max-width:58ch;color:var(--text-secondary);font-size:var(--text-lg)}.feat-stats{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px dashed var(--border-default)}.feat-stats__item{display:flex;flex-direction:column-reverse;gap:var(--space-1)}.feat-stats dt{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}.feat-stats dd{font-family:var(--font-display);font-weight:800;font-size:var(--text-3xl);line-height:1;font-variant-numeric:tabular-nums;color:var(--text-primary)}.feat-stats__item--date dd{font-family:var(--font-display-alt);font-weight:700;font-size:var(--text-xl);line-height:1.35}.feat-note{position:relative;align-self:start;padding:var(--space-5);background:var(--bg-raised);border:1px solid var(--border-default);border-radius:var(--radius-md)}.feat-note::before,.feat-note::after{content:'';position:absolute;width:12px;height:12px;border:1.5px solid var(--amber)}.feat-note::before{top:-1px;left:-1px;border-right:none;border-bottom:none}.feat-note::after{right:-1px;bottom:-1px;border-left:none;border-top:none}.feat-note__title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;line-height:1.4;letter-spacing:.14em;color:var(--amber);margin-bottom:var(--space-3)}.feat-note__body{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.65}.feat-note__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);margin-top:var(--space-3)}.feat-note__link{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;font-size:var(--text-sm);font-weight:600;color:var(--sky);text-decoration:underline;text-decoration-color:rgb(34 167 240 / .4);text-underline-offset:.25em;transition:color var(--dur-fast)}.feat-note__link:hover{color:var(--text-primary)}.feat-note__mark{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.08em;color:var(--amber)}.feat-latest{padding:var(--space-5) 0;background:var(--bg-raised);border-bottom:1px solid var(--border-subtle)}.feat-latest__inner{width:var(--container);margin-inline:auto}.feat-latest__title{font-family:var(--font-mono);font-size:var(--text-xs);font-weight:600;line-height:1.4;letter-spacing:.14em;color:var(--text-muted);margin-bottom:var(--space-3)}.feat-latest__list{display:grid;gap:var(--space-2) var(--space-5)}.feat-latest__link{display:grid;gap:var(--space-1);min-height:44px;padding-block:var(--space-2);padding-inline-start:var(--space-3);border-inline-start:2px solid var(--green);transition:border-color var(--dur-fast)}.feat-latest__date{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.06em;color:var(--green)}.feat-latest__name{font-family:var(--font-display-alt);font-weight:700;line-height:1.25;transition:color var(--dur-fast)}.feat-latest__link:hover{border-inline-start-color:var(--sky)}.feat-latest__link:hover .feat-latest__name{color:var(--sky)}.feat-layout{width:var(--container);margin-inline:auto;padding-bottom:var(--space-8)}.feat-content{min-width:0;padding-top:var(--space-5)}.feat-area{scroll-margin-top:var(--feat-anchor-offset)}.feat-area+.feat-area{margin-top:var(--space-7)}.feat-area__head{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:var(--space-2) var(--space-4);padding-bottom:var(--space-4)}.feat-area__head::after{content:'';position:absolute;inset-inline:0;bottom:0;height:2px;background:repeating-linear-gradient(90deg,var(--amber) 0 22px,transparent 22px 40px);opacity:.55}.feat-area__code{position:relative;padding:.35rem .6rem .25rem;border:1.5px solid var(--amber);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:var(--text-sm);font-weight:600;line-height:1;letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--amber);background:var(--amber-subtle)}.feat-area__title{font-size:var(--text-2xl)}.feat-area__intro{grid-column:1 / -1;max-width:68ch;color:var(--text-secondary)}.feat-cta{border-top:1px solid var(--border-subtle);background:var(--bg-raised);padding:var(--space-7) 0}.feat-cta__inner{width:var(--container-narrow);margin-inline:auto;text-align:center}.feat-cta__label{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:var(--space-3)}.feat-cta__title{font-size:var(--text-3xl);margin-bottom:var(--space-4)}.feat-cta__body{color:var(--text-secondary);margin-bottom:var(--space-5)}}@layer animations{@keyframes featPanelIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.feat__more[open]>.feat__panel{animation:featPanelIn 320ms var(--ease-out)}@keyframes featTarget{from{background:var(--sky-glow)}to{background:#fff0}}.feat.is-target{animation:featTarget 2.4s var(--ease-out)}}@layer responsive{@media (min-width:600px){.feat-latest__list{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:768px){.feat-hero{padding:var(--space-8) 0 var(--space-7)}.feat{grid-template-columns:4rem minmax(0,1fr);gap:var(--space-2) var(--space-4);padding-block:var(--space-5)}.feat__code{padding-top:.45rem}.feat--media{grid-template-columns:4rem minmax(0,1fr) 10.5rem}.feat__thumb{display:block;align-self:start;margin-top:.2rem}.feat--media:has(.feat__more[open]){grid-template-columns:4rem minmax(0,1fr)}.feat--media:has(.feat__more[open]) .feat__thumb{display:none}.feat__panel{padding:var(--space-5)}.feat-area__title{font-size:var(--text-3xl)}.feat-missing{padding:var(--space-6)}}@media (min-width:900px){.feat-hero__inner{grid-template-columns:minmax(0,1fr) minmax(18rem,24rem);gap:var(--space-7);align-items:end}.feat-note{align-self:end}.feat-latest__list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media (min-width:1100px){.feat-layout{display:grid;grid-template-columns:var(--feat-rail) minmax(0,1fr);column-gap:var(--space-7);align-items:start;padding-top:var(--space-6)}.feat-content{padding-top:0}.feat-index{top:calc(var(--feat-nav-offset) + var(--space-5));z-index:auto;max-height:calc(100vh - var(--feat-nav-offset) - var(--space-6));margin-inline:0;padding:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--border-strong) #fff0;background:none;backdrop-filter:none;-webkit-backdrop-filter:none;border:0}.feat-index__title{display:block;font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--sky);margin-bottom:var(--space-3)}.feat-index__list{flex-direction:column;gap:0;overflow:visible;border-inline-start:1px solid var(--border-subtle)}.feat-index__link{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;gap:var(--space-2);min-height:0;margin-inline-start:-1px;padding:.55rem var(--space-3);border:0;border-inline-start:2px solid #fff0;border-radius:0;white-space:normal;line-height:1.35}.feat-index__link:hover{border-inline-start-color:var(--border-strong)}.feat-index__link.is-active{background:none;border-inline-start-color:var(--sky)}.feat-index__tools{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border-subtle)}.feat-toolbar__toggle{display:none}}}@layer a11y{.feat-chip:focus-visible,.feat-tool:focus-visible,.feat-index__link:focus-visible,.feat-latest__link:focus-visible,.feat-note__link:focus-visible,.feat__toggle:focus-visible,.feat__story:focus-visible,.feat__permalink:focus-visible,.feat-media__link:focus-visible,.feat-search__clear:focus-visible,.feat-lightbox__close:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:var(--radius-sm)}.feat-search__input:focus-visible{outline:none;border-color:var(--sky);box-shadow:0 0 0 3px var(--sky-glow)}.feat-lightbox:focus-visible{outline:none}@media (prefers-reduced-motion:reduce){.feat__more[open]>.feat__panel,.feat.is-target{animation:none}.feat__story:hover::after{transform:none}}@media print{.feat-index,.feat-toolbar,.feat__thumb,.feat__toggle,.feat-cta,.mobile-cta{display:none}}}