:root{color-scheme:light dark;--ink: #2f2934;--muted: #7f7185;--paper: #fff7fb;--surface: #fffdfd;--line: rgb(117 88 123 / 16%);--pink: #f3a5c4;--pink-soft: #ffe1ed;--lilac: #bca7df;--lilac-soft: #eee6ff;--mint: #8bcfbe;--slide-duration: .72s;--slide-ease: cubic-bezier(.22, 1, .36, 1);--spring: cubic-bezier(.18, .9, .24, 1.12);--radius-large: 2rem;--radius-medium: 1.15rem;--radius-pill: 999rem;--font-body: "Noto Sans", "Noto Sans CJK SC", "Noto Sans CJK JP", "Noto Sans SC", "Noto Sans JP", "PingFang SC", "Microsoft YaHei", sans-serif}html[data-theme=dark]{--ink: #f3edf7;--muted: #cbbdd1;--paper: #17111f;--surface: #221a2c;--line: rgb(239 220 255 / 16%);--pink: #f0a0bf;--pink-soft: #3d2433;--lilac: #c7b0ef;--lilac-soft: #312640;--mint: #9bd9c8}*,*:before,*:after{box-sizing:border-box}html{min-block-size:100%;overflow-x:clip;background:#f6efff}html[data-theme=dark]{background:var(--paper)}body{position:relative;min-block-size:100%;margin:0;overflow-x:clip;color:var(--ink);font-family:var(--font-body);text-rendering:optimizeLegibility}body:before{content:"";position:fixed;inset:0;z-index:-2;background-color:#f6efff;background-image:linear-gradient(90deg,#fff6fb2e,#f6efff52),url(/art/natsuki-background.png);background-position:center,center;background-repeat:no-repeat,no-repeat;background-size:auto,cover}html[data-theme=dark] body:before{background-color:var(--paper);background-image:linear-gradient(90deg,#100a19b3,#1b11289e),url(/art/natsuki-background.png);background-position:center,center;background-repeat:no-repeat,no-repeat;background-size:auto,cover}body:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 46% 46%,transparent 0 28rem,rgb(255 246 251 / 28%) 58rem),linear-gradient(180deg,#ffffff1a,#f8efff38)}html[data-theme=dark] body:after{background:radial-gradient(circle at 46% 42%,transparent 0 24rem,rgb(15 10 23 / 40%) 56rem),linear-gradient(180deg,#160d1f14,#0e09156b)}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}.page-shell{position:relative;isolation:isolate;inline-size:min(72rem,calc(100% - clamp(1rem,7%,5rem)));min-block-size:100dvh;margin-inline:auto;padding-block:clamp(1rem,4dvh,2.8rem);display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(1.1rem,3dvh,2.4rem)}.topbar{--topbar-shift: 0;--topbar-opacity: 1;position:sticky;inset-block-start:clamp(.75rem,2dvh,1.2rem);z-index:10;isolation:isolate;inline-size:100%;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:clamp(.35rem,1.4%,.72rem);padding:.34rem;border:.0625rem solid rgb(117 88 123 / 11%);border-radius:var(--radius-pill);background:#fffdfd8a;box-shadow:none;backdrop-filter:blur(1rem) saturate(1.04);-webkit-backdrop-filter:blur(1rem) saturate(1.04);opacity:var(--topbar-opacity);transform:translateY(var(--topbar-shift));transition:transform .42s var(--slide-ease),opacity .22s ease,background .18s ease,border-color .18s ease;will-change:transform,opacity}html[data-theme=dark] .topbar{border-color:#efdcff1c;background:#1c15268a}.page-shell[data-topbar-overlap=true] .topbar{border-color:#75587b26;background:#fffdfdc7}html[data-theme=dark] .page-shell[data-topbar-overlap=true] .topbar{border-color:#efdcff21;background:#1c1526c2}.page-shell[data-topbar-hidden=true] .topbar{--topbar-shift: calc(-100% - 1rem) ;--topbar-opacity: 0;pointer-events:none}.topbar:after{content:"";position:absolute;pointer-events:none;z-index:-1;inset-block-start:calc(100% + .08rem);inset-inline:clamp(1rem,4%,2.4rem);block-size:1.18rem;border-radius:0 0 var(--radius-pill) var(--radius-pill);background:linear-gradient(180deg,rgb(255 247 252 / 34%),transparent);filter:blur(.32rem);opacity:0;transition:opacity .18s ease}html[data-theme=dark] .topbar:after{background:linear-gradient(180deg,rgb(23 17 31 / 36%),transparent)}.page-shell[data-topbar-overlap=true] .topbar:after{opacity:1}.theme-toggle{inline-size:2.82rem;block-size:2.82rem;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:#6f5a77;cursor:pointer;padding:0;transition:color .18s ease,background .18s ease,transform .26s var(--spring)}.theme-toggle:hover,.theme-toggle:focus-visible{color:#4d4055;background:#ffe6f185;transform:scale(1.04)}html[data-theme=dark] .theme-toggle{color:#d8c6ee}html[data-theme=dark] .theme-toggle:hover,html[data-theme=dark] .theme-toggle:focus-visible{color:#fff6ff;background:#513a6175}.theme-toggle:focus-visible,.topnav a:focus-visible,.contact-card:focus-visible,.demo-button:focus-visible,.demo-code button:focus-visible,.link-list a:focus-visible{outline:.16rem solid rgb(188 167 223 / 70%);outline-offset:.18rem}.moon-icon{inline-size:1.35rem;block-size:1.35rem;fill:currentColor;transform:rotate(18deg);transform-origin:50% 50%;transition:transform .52s var(--slide-ease)}html[data-theme=dark] .moon-icon{transform:rotate(-28deg)}.topnav{--slider-pad: .18rem;position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--slider-pad);border-radius:var(--radius-pill);overflow:clip;background:transparent}.topnav-indicator{position:absolute;inset-block:var(--slider-pad);inset-inline-start:var(--slider-pad);inline-size:calc((100% - var(--slider-pad) * 2) / 2);border-radius:var(--radius-pill);background:#ffe6f1d1;transition:transform var(--slide-duration) var(--spring),background .18s ease}html[data-theme=dark] .topnav-indicator{background:#513a61d1}[data-active=find] .topnav-indicator{transform:translate(100%)}.topnav a{position:relative;z-index:1;display:grid;place-items:center;min-block-size:2.58rem;padding-inline:clamp(.85rem,4%,1.4rem);border-radius:var(--radius-pill);color:var(--muted);font-family:var(--font-body);font-size:.98rem;font-weight:500;letter-spacing:0;transition:color .18s ease,transform .26s var(--spring)}.topnav a:hover{color:var(--ink);transform:translateY(-.04rem)}.topnav a[aria-current=page]{color:var(--ink)}.card-stage{block-size:var(--active-panel-block-size, auto);display:grid;align-items:start;inline-size:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;transition:block-size var(--slide-duration) var(--slide-ease)}.card-viewport{inline-size:100%;overflow:visible}.card-track{display:flex;align-items:flex-start;inline-size:200vw;transform:translate(0);transition:transform var(--slide-duration) var(--spring);will-change:transform}[data-active=find] .card-track{transform:translate(-100vw)}.card-panel{flex:0 0 100vw;min-inline-size:0;display:grid;justify-items:center;align-items:start}.sample-card{position:relative;overflow:hidden;inline-size:min(72rem,calc(100vw - clamp(1rem,7vw,5rem)));min-inline-size:0;min-block-size:72dvh;display:grid;border:.0625rem solid rgb(255 255 255 / 46%);border-radius:var(--radius-large);box-shadow:0 1rem 2.6rem #55375517;background:#fffdff94;backdrop-filter:blur(1.35rem) saturate(1.08);-webkit-backdrop-filter:blur(1.35rem) saturate(1.08)}html[data-theme=dark] .sample-card{border-color:#f6e1ff24;box-shadow:0 1rem 2.6rem #0000003d;background:#1812219e}.sample-inner{position:relative;z-index:1;min-inline-size:0;display:grid;align-content:start;gap:clamp(1.35rem,2.5vw,2.1rem);padding:clamp(1.4rem,5%,4.4rem)}.sample-hero{display:grid;gap:1.12rem;align-content:start}.sample-kicker{margin:0;color:#9f7ca9;font-family:var(--font-body);font-size:.86rem;font-weight:600;letter-spacing:0;text-transform:uppercase}html[data-theme=dark] .sample-kicker{color:#d4b8df}.sample-title{max-inline-size:11em;margin:0;color:var(--ink);font-family:var(--font-body);font-size:clamp(2.45rem,7vw,4.2rem);font-weight:700;line-height:1.06;letter-spacing:-.03em}.sample-copy{max-inline-size:48rem;margin:0;color:var(--muted);font-size:1.12rem;font-weight:600;line-height:1.9}.sample-card-accent,.demo-toolbar{display:flex;flex-wrap:wrap;gap:.72rem}.sample-chip,.demo-status{display:inline-flex;align-items:center;min-block-size:2.08rem;border-radius:var(--radius-pill);font-family:var(--font-body);font-size:.9rem;font-weight:600}.sample-chip{padding-inline:.9rem;border:.0625rem solid rgb(126 96 132 / 11%);color:#765b7e;background:#ffffff75}html[data-theme=dark] .sample-chip{color:#e1cfe8}.demo-status{padding-inline:.78rem;color:#5d766d;background:#ddf7eca8}html[data-theme=dark] .demo-status{color:#c7f0e2;background:#49796b47}.demo-status--idle{color:#85708b;background:#eee6ffa8}html[data-theme=dark] .demo-status--idle{color:#dbcdf0;background:#71548b47}.demo-status--soft{color:#846270;background:#ffe6f1a8}html[data-theme=dark] .demo-status--soft{color:#f0c4d4;background:#8d486442}.hero-stats,.demo-grid,.preference-grid,.sample-meta{display:grid;gap:.82rem}.hero-stats{grid-template-columns:repeat(3,minmax(0,1fr));max-inline-size:48rem}.demo-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-inline-size:58rem}.demo-grid--four{grid-template-columns:repeat(4,minmax(0,1fr))}.preference-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.sample-meta{grid-template-columns:repeat(4,minmax(0,1fr));max-inline-size:58rem;margin:0}.demo-section{display:grid;gap:.9rem;inline-size:100%;max-inline-size:58rem;min-inline-size:0}.demo-section--split{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:stretch}.demo-section--split>*{min-inline-size:0}.demo-section--split .sample-meta{grid-template-columns:1fr}.section-heading{display:grid;gap:.32rem}.section-heading h2{margin:0;color:var(--ink);font-size:1.18rem;font-weight:700;line-height:1.35}.section-heading p{margin:0;color:#9a879e;font-size:.88rem;font-weight:700;line-height:1.7}.hero-stat,.demo-block,.demo-panel,.demo-table,.demo-notices p,.demo-timeline-item,.sample-meta div,.contact-card,.preference-card,.demo-code,.link-list,.action-demo{border:.0625rem solid rgb(126 96 132 / 10%);border-radius:var(--radius-medium);background:#ffffff57;backdrop-filter:blur(.55rem);-webkit-backdrop-filter:blur(.55rem)}html[data-theme=dark] .hero-stat,html[data-theme=dark] .demo-block,html[data-theme=dark] .demo-panel,html[data-theme=dark] .demo-table,html[data-theme=dark] .demo-notices p,html[data-theme=dark] .demo-timeline-item,html[data-theme=dark] .sample-meta div,html[data-theme=dark] .contact-card,html[data-theme=dark] .sample-chip,html[data-theme=dark] .preference-card,html[data-theme=dark] .demo-code,html[data-theme=dark] .link-list,html[data-theme=dark] .action-demo{border-color:#efdcff1c;background:#ffffff0f}.hero-stat,.demo-block,.demo-panel,.preference-card,.demo-code,.link-list,.action-demo,.sample-meta div,.contact-card{min-inline-size:0;padding:1rem}.hero-stat{display:grid;gap:.32rem}.hero-stat span,.demo-table span,.sample-meta dt,.preference-card span,.demo-code span,.contact-meta{color:#9a879e;font-size:.82rem;font-weight:700}html[data-theme=dark] .hero-stat span,html[data-theme=dark] .demo-table span,html[data-theme=dark] .sample-meta dt,html[data-theme=dark] .preference-card span,html[data-theme=dark] .demo-code span,html[data-theme=dark] .contact-meta{color:#cdb8d6}.hero-stat strong,.demo-table strong,.sample-meta dd{min-inline-size:0;color:var(--ink);font-size:.96rem;font-weight:700;line-height:1.55;overflow-wrap:anywhere}.demo-block h3,.preference-card h3,.contact-card h3,.demo-panel h2{margin:0;color:var(--ink);font-family:var(--font-body);font-size:1rem;font-weight:700;line-height:1.4}.demo-block p,.preference-card p,.contact-card p,.demo-panel p,.demo-timeline-item p,.demo-notices p{margin:0;color:var(--muted);font-size:.94rem;font-weight:600;line-height:1.7;overflow-wrap:anywhere}.demo-panel{display:grid;align-content:start;gap:.78rem}.demo-quote{display:grid;align-content:center;margin:0;padding:1rem 1.05rem 1rem 1.2rem;border-radius:var(--radius-medium);color:#6f6075;background:#ffffff3d;font-size:1.02rem;font-weight:700;line-height:1.8}html[data-theme=dark] .demo-quote{color:#d9cedf;background:#ffffff0d}.demo-list{display:grid;gap:.45rem;margin:0;padding:0;list-style:none}.demo-list li{position:relative;padding-inline-start:1.2rem;color:var(--muted);font-size:.95rem;font-weight:600;line-height:1.65;overflow-wrap:anywhere}.demo-list li:before{content:"";position:absolute;inset-block-start:.72em;inset-inline-start:0;inline-size:.42rem;aspect-ratio:1;border-radius:50%;background:#f3a5c4b8}html[data-theme=dark] .demo-list li:before{background:#f0a0bfc2}.demo-table{display:grid;overflow:hidden}.demo-table div{display:grid;grid-template-columns:minmax(7rem,.32fr) minmax(0,1fr);gap:.9rem;padding:.86rem 1rem}.demo-table div+div{border-block-start:.0625rem solid rgb(126 96 132 / 9%)}html[data-theme=dark] .demo-table div+div{border-block-start-color:#efdcff17}.demo-notices{display:grid;gap:.62rem;min-inline-size:0;inline-size:100%}.demo-notices p{min-inline-size:0;max-inline-size:100%;padding:.86rem 1rem}.demo-timeline{display:grid;gap:.72rem}.demo-timeline-item{display:grid;grid-template-columns:minmax(4.2rem,.24fr) minmax(0,1fr);gap:.85rem;align-items:start;padding:.92rem}.demo-timeline-item time{color:#8b718f;font-size:.86rem;font-weight:800;line-height:1.5}html[data-theme=dark] .demo-timeline-item time{color:#cdb8d6}.demo-timeline-item h3{margin:0 0 .28rem;color:var(--ink);font-size:1rem;font-weight:700;line-height:1.45}.demo-code{display:grid;gap:.6rem}.demo-code-head{min-inline-size:0;display:flex;align-items:center;justify-content:space-between;gap:.8rem}.demo-code button,.demo-button{min-block-size:2.1rem;border:.0625rem solid rgb(126 96 132 / 12%);border-radius:var(--radius-pill);background:#ffffff70;color:var(--ink);font:inherit;font-size:.86rem;font-weight:700;cursor:pointer;transition:transform .22s var(--spring),border-color .18s ease,background .18s ease,color .18s ease}html[data-theme=dark] .demo-code button,html[data-theme=dark] .demo-button{border-color:#efdcff1f;background:#ffffff14}.demo-code button{flex:0 0 auto;padding-inline:.78rem}.demo-code button:hover,.demo-code button:focus-visible,.demo-button:hover,.demo-button:focus-visible{transform:translateY(-.08rem);border-color:#7e608433;background:#fff9}html[data-theme=dark] .demo-code button:hover,html[data-theme=dark] .demo-code button:focus-visible,html[data-theme=dark] .demo-button:hover,html[data-theme=dark] .demo-button:focus-visible{border-color:#efdcff33;background:#ffffff1f}.demo-code button:active,.demo-button:active{transform:translateY(.02rem) scale(.98)}.demo-code pre{min-inline-size:0;max-inline-size:100%;margin:0;overflow:hidden}.demo-code code{display:block;min-inline-size:0;max-inline-size:100%;color:var(--ink);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88rem;font-weight:600;line-height:1.7;white-space:pre-wrap;overflow-wrap:anywhere}.link-list,.action-demo{display:grid;gap:.7rem}.link-list p,.action-demo p{margin:0;color:var(--muted);font-size:.94rem;font-weight:600;line-height:1.7;overflow-wrap:anywhere}.link-list strong{display:block;margin-block-end:.22rem;color:var(--ink)}.link-list a{color:#71527a;font-weight:800;text-decoration-line:underline;text-decoration-thickness:.08em;text-underline-offset:.18em;overflow-wrap:anywhere}html[data-theme=dark] .link-list a{color:#e6c9ef}.action-row{display:flex;flex-wrap:wrap;gap:.6rem}.demo-button{padding-inline:.9rem}.demo-button--primary{border-color:#ad99d657;background:#ebe5ffc2;color:#5f4e78}html[data-theme=dark] .demo-button--primary{border-color:#c7b0ef4d;background:#58447052;color:#eadfff}.demo-button:disabled{color:#7f7185a8;cursor:not-allowed}.demo-button:disabled:hover,.demo-button:disabled:focus-visible,.demo-button:disabled:active{transform:none;border-color:#7e60841f;background:#ffffff70}html[data-theme=dark] .demo-button:disabled:hover,html[data-theme=dark] .demo-button:disabled:focus-visible,html[data-theme=dark] .demo-button:disabled:active{border-color:#efdcff1f;background:#ffffff14}.sample-meta dt{margin:0 0 .38rem;font-family:var(--font-body)}.sample-meta dd{margin:0}.sample-meta code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em}.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.82rem;max-inline-size:58rem}.contact-card{display:grid;gap:.72rem}.contact-card--pending{color:var(--muted)}.contact-card-head{display:flex;align-items:center;justify-content:space-between;gap:.8rem}.contact-meta{line-height:1.45;overflow-wrap:anywhere}.contact-pill{flex:0 0 auto;padding:.22rem .56rem;border-radius:var(--radius-pill);color:#695270;background:var(--pink-soft);font-family:var(--font-body);font-size:.75rem;font-weight:700}html[data-theme=dark] .contact-pill{color:#f1c7d7;background:#6b324957}.contact-pill--muted{background:var(--lilac-soft)}html[data-theme=dark] .contact-pill--muted{color:#d7c9eb;background:#58447057}@media(max-width:60rem){.demo-grid--four,.sample-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-section--split,.preference-grid{grid-template-columns:1fr}}@media(max-width:48rem){body:before{background-image:linear-gradient(90deg,#fff6fb1a,#f6efff4d),url(/art/natsuki-background.png);background-position:center,center;background-repeat:no-repeat,no-repeat;background-size:auto,cover}html[data-theme=dark] body:before{background-image:linear-gradient(90deg,#100a19a8,#1b1128a3),url(/art/natsuki-background.png);background-position:center,center;background-repeat:no-repeat,no-repeat;background-size:auto,cover}.page-shell{inline-size:min(100% - 1rem,42rem);padding-block:.75rem 1rem;gap:.9rem}.topbar{gap:.44rem;padding:.34rem}.theme-toggle{inline-size:2.8rem;block-size:2.8rem}.topnav a{min-block-size:2.42rem;padding-inline:.54rem;font-size:.9rem}.sample-card{inline-size:min(100vw - 1rem,42rem);border-radius:1.35rem}.sample-inner{padding:1.35rem}.sample-copy{font-size:1rem;line-height:1.78}.hero-stats,.demo-grid,.demo-grid--four,.sample-meta,.contact-grid,.demo-timeline-item,.demo-table div{grid-template-columns:1fr}.demo-block,.hero-stat,.demo-panel,.preference-card,.demo-code,.link-list,.action-demo,.contact-card,.sample-meta div{padding:.88rem}.demo-quote{font-size:.96rem}}@media(max-width:26rem){.theme-toggle{inline-size:2.5rem;block-size:2.5rem}.topnav a,.sample-chip{font-size:.82rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}