@layer components{.bookpage{padding-block:var(--space-l) var(--space-2xl);background:var(--color-bg-band);min-block-size:80svh}.bookpage__h1{font-size:var(--step-4);text-align:center;letter-spacing:var(--tracking-display);text-wrap:balance}.bookpage__lede{text-align:center;max-inline-size:46ch;margin-inline:auto;margin-block:var(--space-xs) var(--space-l);text-wrap:pretty}.book__noscript{gap:var(--space-s);text-align:center;padding:var(--space-l);background:var(--color-surface-raised);border-radius:var(--radius-m);justify-items:center;display:grid}.book{gap:var(--space-m);padding:var(--space-m) var(--space-m) var(--space-l);background:var(--color-surface-raised);border-radius:var(--radius-m);box-shadow:var(--shadow-1);display:grid;position:relative}.book__bar{appearance:none;background:var(--color-rule);border:0;border-radius:2px;block-size:4px;inline-size:100%;overflow:hidden}.book__bar::-webkit-progress-bar{background:var(--color-rule)}.book__bar::-webkit-progress-value{background:var(--color-accent);transition:inline-size var(--dur-base) var(--ease-out)}.book__bar::-moz-progress-bar{background:var(--color-accent)}.book__crumbs{min-block-size:1.4em;font-size:var(--step--1);color:var(--color-fg-subtle);text-align:center}.book__crumbs:empty{display:none}.book__screen{gap:var(--space-m);border:0;min-inline-size:0;margin:0;padding:0;display:grid}.book__screen legend,.book__review h2{float:left;inline-size:100%;font-family:var(--font-display);font-weight:500;font-size:var(--step-3);line-height:var(--leading-tight);letter-spacing:var(--tracking-display);text-align:center;text-wrap:balance;padding-block-end:var(--space-2xs)}.book__screen legend:focus,.book__review h2:focus{outline:none}.book__hint{text-align:center;font-size:var(--step--1);text-wrap:pretty}.book__options{gap:var(--space-xs);display:grid}.book__options--grid{grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr))}.book__options--row{grid-template-columns:repeat(2,minmax(0,1fr))}.book__opt{cursor:pointer;display:block;position:relative}.book__opt input{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.book__opt>span{gap:var(--space-3xs);min-block-size:3.5rem;padding:var(--space-s) var(--space-m);border:1.5px solid var(--color-rule-strong);border-radius:var(--radius-m);background:var(--color-surface);color:var(--color-fg);transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);flex-direction:column;display:flex}.book__opt>span b{font-family:var(--font-display);font-weight:500;font-size:var(--step-1);line-height:var(--leading-snug)}.book__opt>span small{font-size:var(--step--1);color:var(--color-fg-muted)}.book__opt--small>span{min-block-size:var(--tap-min);padding:var(--space-xs);text-align:center;justify-content:center;align-items:center}.book__opt--small>span b{font-size:var(--step-0)}.book__opt input:checked+span{background:var(--color-selected);border-color:var(--color-accent);color:var(--color-fg)}.book__opt input:checked+span small{color:var(--color-fg)}.book__opt input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:2px}@media (hover:hover){.book__opt:hover>span{border-color:var(--color-fg)}}.book__chips{gap:var(--space-2xs);grid-template-columns:repeat(auto-fill,minmax(6.5rem,1fr));display:grid}.book__chip{cursor:pointer;display:block;position:relative}.book__chip input{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.book__chip>span{padding:var(--space-xs) var(--space-2xs);border:1.5px solid var(--color-rule-strong);border-radius:var(--radius-m);text-align:center;font-size:var(--step--1);background:var(--color-surface);transition:background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);flex-direction:column;align-items:center;gap:0;line-height:1.35;display:flex}.book__chip>span b{font-weight:var(--weight-strong)}.book__chip>span small{font-size:var(--step--2);color:var(--color-fg-subtle);white-space:nowrap}.book__chip--closed>span{opacity:.55;cursor:not-allowed}.book__chip input:checked+span{background:var(--color-selected);border-color:var(--color-accent);color:var(--color-fg)}.book__chip input:checked+span small{color:var(--color-fg)}.book__chip input:focus-visible+span{outline:3px solid var(--color-focus);outline-offset:2px}.book__field{gap:var(--space-3xs);font-weight:var(--weight-strong);display:grid}.book__field input,.book__field textarea{inline-size:100%;min-block-size:var(--tap-min);font:inherit;font-weight:var(--weight-body);color:var(--color-fg);background:var(--color-surface);border:1.5px solid var(--color-rule-strong);border-radius:var(--radius-s);padding:.6em .8em}.book__field textarea{resize:vertical}.book__field input:focus-visible,.book__field textarea:focus-visible{outline:3px solid var(--color-focus);outline-offset:1px;border-color:var(--color-fg)}.book__check{align-items:center;gap:var(--space-xs);min-block-size:var(--tap-min);cursor:pointer;display:flex}.book__check input{block-size:1.25rem;inline-size:1.25rem;accent-color:var(--color-accent)}.book__review{gap:var(--space-s)}.book__message{padding:var(--space-m);font-family:var(--font-body);font-size:var(--step-0);line-height:var(--leading-body);white-space:pre-wrap;overflow-wrap:anywhere;background:var(--color-bg-band-2);border-radius:var(--radius-m);border-inline-start:4px solid var(--color-accent)}.book__send-row{align-items:center;gap:var(--space-s);flex-wrap:wrap;display:flex}.book__error{min-block-size:1.4em;color:var(--color-warn-fg);font-weight:var(--weight-strong);text-align:center}.book__error:empty{display:none}.book__nav{z-index:2;justify-content:space-between;gap:var(--space-s);margin-inline:calc(-1 * var(--space-m));padding:var(--space-s) var(--space-m);background:var(--color-surface-raised);border-block-start:var(--border);border-end-end-radius:var(--radius-m);border-end-start-radius:var(--radius-m);margin-block-end:calc(-1 * var(--space-l));padding-block-end:calc(var(--space-s) + env(safe-area-inset-bottom));display:flex;position:sticky;inset-block-end:0}.book__nav [data-next]{margin-inline-start:auto}@media (height<=32em){.book__nav{margin-block-end:calc(-1 * var(--space-l));position:static}}.bookpage__foot{font-size:var(--step--1);text-align:center;text-wrap:pretty;max-inline-size:60ch;margin-block-start:var(--space-l);margin-inline:auto}@media (width>=48em){.book{padding:var(--space-l) var(--space-xl) var(--space-xl)}.book__nav{margin-inline:calc(-1 * var(--space-xl));padding-inline:var(--space-xl);margin-block-end:calc(-1 * var(--space-xl))}}}
