:root{--color-paper: oklch(98.5% .006 255);--color-paper-2: oklch(96.5% .009 255);--color-surface: oklch(99.5% .003 255);--color-ink: oklch(20% .018 258);--color-ink-2: oklch(34% .022 258);--color-muted: oklch(47% .022 258);--color-rule: oklch(88% .014 255);--color-rule-strong: oklch(66% .025 255);--color-accent: oklch(46% .205 258);--color-accent-ink: oklch(100% 0 0);--color-accent-soft: oklch(96.5% .02 258);--color-focus: oklch(49% .215 258);--color-error: oklch(48% .185 27);--color-error-soft: oklch(97% .018 27);--color-success: oklch(40% .12 151);--color-success-soft: oklch(98% .012 151);--color-overlay: oklch(20% .018 258 / .12);--font-display: "Noto Serif SC", "Songti SC", serif;--font-body: "Noto Sans SC", "Microsoft YaHei", sans-serif;--font-mono: "JetBrains Mono", "SFMono-Regular", monospace;--space-2xs: .25rem;--space-xs: .5rem;--space-sm: .75rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-md: 1.25rem;--text-lg: 1.5625rem;--text-xl: 1.953rem;--text-display: clamp(2rem, 5vw + .5rem, 3.25rem);--ease-out: cubic-bezier(.16, 1, .3, 1);--ease-in: cubic-bezier(.7, 0, .84, 0);--ease-in-out: cubic-bezier(.65, 0, .35, 1);--dur-micro: .12s;--dur-short: .22s;--dur-long: .42s;--rule-thin: 1px;--rule-strong: 2px;--radius-sm: .375rem;--radius-md: .625rem;--radius-lg: .875rem;--shadow-panel: 0 1px 2px var(--color-overlay);--z-base: 1;--z-sticky: 200}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow-x:clip;background:var(--color-paper);color:var(--color-ink)}body{font-family:var(--font-body);font-size:var(--text-base);line-height:1.6;padding-block-end:calc(6rem + env(safe-area-inset-bottom))}button,textarea,input{font:inherit}button{white-space:nowrap}button:focus-visible,textarea:focus-visible,input:focus-visible{outline:var(--rule-strong) solid var(--color-focus);outline-offset:2px}.topbar{display:flex;align-items:center;justify-content:space-between;min-height:4rem;padding-inline:max(var(--space-md),env(safe-area-inset-left));border-block-end:var(--rule-thin) solid var(--color-rule);background:var(--color-paper)}.wordmark{display:inline-flex;align-items:center;min-width:2.75rem;min-height:2.75rem;color:var(--color-ink);font-family:var(--font-display);font-size:var(--text-md);font-weight:700;letter-spacing:-.03em;text-decoration:none}.install-button,.text-button,.primary-button{min-height:2.75rem;border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-sm);cursor:pointer;transition:transform var(--dur-micro) var(--ease-out),opacity var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out)}.install-button,.text-button{padding-inline:var(--space-md);background:var(--color-surface);color:var(--color-ink)}.install-button[hidden]{display:none}.app-shell{width:min(100%,90rem);margin-inline:auto;padding:var(--space-xl) max(var(--space-md),env(safe-area-inset-left))}.intro{display:grid;gap:var(--space-sm);padding-block-end:var(--space-xl)}.intro h1{min-width:0;margin:0;font-family:var(--font-body);font-size:var(--text-display);font-style:normal;font-weight:700;letter-spacing:-.045em;line-height:1.12;overflow-wrap:anywhere}.intro p{max-width:60ch;margin:0;color:var(--color-muted)}.privacy-note{display:inline-flex;align-items:center;gap:var(--space-xs);width:fit-content;color:var(--color-success);font-size:var(--text-sm);font-weight:700}.privacy-note:before{width:.5rem;height:.5rem;border-radius:50%;background:var(--color-success);content:""}.workbench{display:grid;gap:var(--space-lg);align-items:start}.panel{min-width:0;border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-md);background:var(--color-surface);box-shadow:var(--shadow-panel)}.panel__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);min-height:3.75rem;padding:var(--space-sm) var(--space-md);border-block-end:var(--rule-thin) solid var(--color-rule)}.panel__header h2{margin:0;font-size:var(--text-md);font-weight:700;letter-spacing:-.02em}.panel__body{padding:var(--space-md)}.field{display:grid;gap:var(--space-xs)}.field+.field,.field+fieldset,fieldset+.field{margin-block-start:var(--space-lg)}.field label,fieldset legend{color:var(--color-ink-2);font-size:var(--text-sm);font-weight:700}.field input,.field textarea{width:100%;border:var(--rule-thin) solid var(--color-rule-strong);border-radius:var(--radius-sm);outline:var(--rule-strong) solid transparent;outline-offset:1px;background:var(--color-surface);color:var(--color-ink)}.field input{min-height:2.75rem;padding-inline:var(--space-sm)}.field textarea{min-height:17rem;padding:var(--space-sm);line-height:1.65;resize:vertical}.field input::placeholder,.field textarea::placeholder{color:var(--color-muted)}.field__help{min-height:1lh;margin:0;color:var(--color-muted);font-size:var(--text-sm)}.field[data-state=error] input,.field[data-state=error] textarea{border-color:var(--color-error);background:var(--color-error-soft)}.field[data-state=error] .field__help{color:var(--color-error)}.field[data-state=success] textarea{border-color:var(--color-success);background:var(--color-success-soft)}fieldset{min-width:0;margin:0;padding:0;border:0}.template-options{display:grid;gap:var(--space-xs);margin-block-start:var(--space-xs)}.template-option{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-sm);align-items:start;min-height:4.75rem;padding:var(--space-sm);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-ink);cursor:pointer}.template-option:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft)}.template-option input{width:1.125rem;height:1.125rem;margin-block-start:var(--space-2xs);accent-color:var(--color-accent)}.template-option strong,.template-option span{display:block}.template-option span{margin-block-start:var(--space-2xs);color:var(--color-muted);font-size:var(--text-sm);font-weight:400}.input-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs);margin-block-start:var(--space-md)}.text-button{min-width:0;padding-inline:var(--space-xs)}.preview-panel{min-height:35rem}.summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-xs);padding:var(--space-md);border-block-end:var(--rule-thin) solid var(--color-rule);background:var(--color-paper-2);color:var(--color-ink)}.summary__item{min-width:0}.summary__value{display:block;font-family:var(--font-mono);font-size:var(--text-lg);font-variant-numeric:tabular-nums;line-height:1.2}.summary__label{color:var(--color-muted);font-size:var(--text-xs)}.document-preview{padding:var(--space-lg) var(--space-md) var(--space-xl)}.preview-empty{display:grid;place-items:center;min-height:18rem;padding:var(--space-xl);color:var(--color-muted);text-align:center}.preview-empty p{max-width:28ch;margin:0}.document-title{margin:0 0 var(--space-xl);font-size:var(--text-xl);font-weight:700;letter-spacing:-.03em;line-height:1.25;overflow-wrap:anywhere}.preview-heading{margin:var(--space-xl) 0 var(--space-sm);color:var(--color-accent);font-weight:700;line-height:1.3}.preview-heading[data-level="1"]{font-size:var(--text-md)}.preview-heading[data-level="2"]{font-size:var(--text-base)}.preview-heading[data-level="3"]{font-size:var(--text-sm)}.preview-paragraph{margin:0 0 var(--space-sm);color:var(--color-ink-2)}.preview-table{margin-block:var(--space-md) var(--space-lg);border-block-start:var(--rule-thin) solid var(--color-rule-strong)}.preview-table__row{padding-block:var(--space-sm);border-block-end:var(--rule-thin) solid var(--color-rule)}.preview-table__row--header{display:none}.preview-table__cell{display:grid;grid-template-columns:minmax(5rem,.4fr) minmax(0,1fr);gap:var(--space-sm);padding-block:var(--space-2xs);overflow-wrap:anywhere}.preview-table__label{color:var(--color-muted);font-size:var(--text-sm);font-weight:700}.notice{margin:var(--space-md);padding:var(--space-sm);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-sm);background:var(--color-paper-2);color:var(--color-ink-2);font-size:var(--text-sm)}.notice[data-tone=error]{border-color:var(--color-error);background:var(--color-error-soft);color:var(--color-error)}.notice[data-tone=success]{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success)}.generate-bar{position:fixed;z-index:var(--z-sticky);inset-inline:0;inset-block-end:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;justify-content:space-between;gap:var(--space-md);padding:var(--space-sm) max(var(--space-md),env(safe-area-inset-right)) max(var(--space-sm),env(safe-area-inset-bottom));border-block-start:var(--rule-thin) solid var(--color-rule);background:var(--color-surface);color:var(--color-ink);box-shadow:0 -1px 2px var(--color-overlay)}.generate-bar__copy{min-width:0}.generate-bar__copy strong,.generate-bar__copy span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.generate-bar__copy span{color:var(--color-muted);font-size:var(--text-sm)}.primary-button{min-width:8rem;padding-inline:var(--space-lg);border-color:var(--color-accent);background:var(--color-accent);color:var(--color-accent-ink);font-weight:700}.primary-button:disabled,.text-button:disabled,.install-button:disabled{opacity:.5;cursor:not-allowed}.primary-button[data-state=loading]:before{display:inline-block;width:.875rem;height:.875rem;margin-inline-end:var(--space-xs);border:var(--rule-strong) solid var(--color-accent-ink);border-block-start-color:transparent;border-radius:50%;content:"";animation:spin .9s linear infinite;vertical-align:-.1em}.primary-button[data-state=success]{border-color:var(--color-success);background:var(--color-success);color:var(--color-accent-ink)}.primary-button[data-state=error]{border-color:var(--color-error);background:var(--color-error);color:var(--color-accent-ink)}.install-button[data-state=loading],.text-button[data-state=loading]{opacity:.7;cursor:wait}.install-button[data-state=error],.text-button[data-state=error]{border-color:var(--color-error);background:var(--color-error-soft);color:var(--color-error)}.install-button[data-state=success],.text-button[data-state=success]{border-color:var(--color-success);background:var(--color-success-soft);color:var(--color-success)}.foot-line{padding:var(--space-xl) max(var(--space-md),env(safe-area-inset-left));border-block-start:var(--rule-thin) solid var(--color-rule);color:var(--color-muted);font-size:var(--text-sm)}.foot-line p{width:min(100%,90rem);margin:0 auto}@media(hover:hover)and (pointer:fine){.install-button:hover,.text-button:hover{background:var(--color-paper-2)}.primary-button:hover:not(:disabled){transform:translateY(-1px)}.template-option:hover{background:var(--color-paper-2)}}.install-button:active,.text-button:active,.primary-button:active:not(:disabled){transform:translateY(1px)}@media(min-width:40rem){.app-shell{padding-block-start:var(--space-2xl)}.intro{grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);align-items:end}.intro p,.privacy-note{grid-column:2}.intro h1{grid-row:1 / span 2}.template-options{grid-template-columns:repeat(2,minmax(0,1fr))}.summary{grid-template-columns:repeat(4,minmax(0,1fr))}.preview-table__row{display:grid;grid-template-columns:repeat(var(--columns),minmax(0,1fr));padding-block:0}.preview-table__row--header{background:var(--color-paper-2);color:var(--color-ink);font-weight:700}.preview-table__cell{display:block;min-width:0;padding:var(--space-sm);border-inline-end:var(--rule-thin) solid var(--color-rule)}.preview-table__cell:last-child{border-inline-end:0}.preview-table__label{display:none}}@media(min-width:60rem){.app-shell{padding-inline:var(--space-xl)}.workbench{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}.preview-panel{position:sticky;inset-block-start:var(--space-md);max-height:calc(100dvh - 8rem);overflow:auto}}@media(pointer:coarse){.install-button,.text-button,.primary-button{min-height:3rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.15s!important;animation-iteration-count:1!important;transition-duration:.15s!important}}@keyframes spin{to{transform:rotate(360deg)}}