@layer reset,base;@layer components{.playground{background-color:var(--c-bg);min-height:100dvh;color:var(--c-fg);flex-direction:column;display:flex}.playground__layout{flex:auto;grid-template-columns:minmax(280px,380px) 1fr;gap:0;min-height:0;display:grid;overflow:hidden}@media (max-width:1200px){.playground__layout{grid-template-rows:auto 1fr;grid-template-columns:1fr}}.playground__config{border:1px solid color-mix(in oklch, var(--c-border-subtle) 88%, transparent);background-color:var(--c-surface-raised);border-radius:12px;flex-direction:column;align-self:stretch;min-height:0;margin:16px;padding:0;display:flex;overflow:hidden;box-shadow:0 8px 20px -4px #00000014,0 20px 40px -10px #0000000f}@media (max-width:1200px){.playground__config{max-block-size:min(50vh,28rem);margin:16px}}.playground__config-scroll{min-height:0;padding:calc(var(--site-nav-gap) + 1.5rem) 1.5rem 1rem;flex:1;overflow-y:auto}.playground__attribution{border-block-start:1px solid var(--c-border-subtle);color:var(--c-fg-muted);flex-shrink:0;margin-top:auto;padding:1rem 1.5rem 1.25rem;font-size:.8125rem}.playground__attribution p{margin:0}.playground__attribution a{color:var(--c-fg-muted);transition:color .18s var(--ease-out);text-decoration:none}.playground__attribution a:hover{color:var(--c-accent)}.playground__preview{padding:calc(var(--site-nav-gap) + 1.75rem) 2rem 2rem;background-color:var(--c-bg);flex-direction:column;min-height:0;display:flex;overflow-y:auto}.playground__export{border-block-start:1px solid var(--c-border-subtle);scroll-margin-top:var(--site-nav-gap);background-color:var(--c-surface-raised);flex-shrink:0;min-block-size:280px;max-block-size:48vh;padding:0 2rem 2rem;overflow-y:auto}.config-panel{padding-block-end:.5rem}.config-section{flex-direction:column;gap:1.1rem;margin-block-end:2rem;display:flex}.config-section:last-child{margin-block-end:0}.config-panel>.config-section:first-child{z-index:2;position:relative}.config-section--stagger{animation:config-section-in .45s var(--ease-out) both}.config-section--stagger:first-child{animation-delay:0s}.config-section--stagger:nth-child(2){animation-delay:50ms}.config-section--stagger:nth-child(3){animation-delay:.1s}@keyframes config-section-in{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.config-section__title{font-family:var(--font-martian-mono), ui-monospace, monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--c-fg-muted);margin:0;font-size:.6875rem;font-weight:600}.config-preset-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;display:grid}.config-preset-btn{border:1px solid var(--c-border-subtle);cursor:pointer;text-align:left;transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);background-color:#0000;border-radius:8px;flex-direction:column;align-items:flex-start;gap:.2rem;padding:.65rem .75rem;display:flex;position:relative;overflow:hidden}.config-preset-btn:hover{border-color:color-mix(in oklch, var(--c-accent) 45%, var(--c-border-subtle))}.config-preset-btn:active{transform:scale(.97)}--active.config-preset-btn{border-color:color-mix(in oklch, var(--c-accent) 55%, var(--c-border-subtle))}.config-preset-btn__indicator{background-color:color-mix(in oklch, var(--c-accent) 12%, transparent);z-index:0;pointer-events:none;border-radius:7px;position:absolute;inset:0}.config-preset-btn__name,.config-preset-btn__ratio{z-index:1;position:relative}.config-preset-btn__name{color:var(--c-fg);font-size:.75rem;font-weight:600}.config-preset-btn__ratio{color:var(--c-fg-muted);font-size:.6875rem;font-family:var(--font-martian-mono)}.config-preset-more{font-size:.75rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent-dim);cursor:pointer;transition:color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);background:0 0;border:none;border-radius:6px;align-self:flex-start;margin-block:.25rem 0;padding:.35rem .5rem}.config-preset-more:hover{background-color:color-mix(in oklch, var(--c-accent) 8%, transparent);color:var(--c-accent)}.config-preset-more:active{transform:scale(.97)}.config-advanced{border:1px solid var(--c-border-subtle);background-color:color-mix(in oklch, var(--c-bg) 40%, transparent);border-radius:10px;margin-block-start:.5rem;overflow:hidden}.config-advanced__summary{font-size:.8125rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--c-fg-muted);cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .18s var(--ease-out), background-color .18s var(--ease-out);justify-content:space-between;align-items:center;gap:.75rem;padding:.85rem 1rem;list-style:none;display:flex}.config-advanced__summary::-webkit-details-marker{display:none}.config-advanced__summary:hover{color:var(--c-fg);background-color:color-mix(in oklch, var(--c-accent) 5%, transparent)}.config-advanced__chevron{block-size:.5rem;inline-size:.5rem;transition:transform .2s var(--ease-out);border-block-end:2px solid;border-inline-end:2px solid;transform:rotate(-45deg)translateY(-2px)}.config-advanced[open] .config-advanced__chevron{transform:rotate(45deg)}.config-advanced__body{border-block-start:1px solid var(--c-border-subtle);padding:0 1rem 1.1rem}.config-toggle{align-items:center;gap:.75rem;display:flex}.config-toggle__input{cursor:pointer;width:1.25rem;height:1.25rem;accent-color:var(--c-accent)}.config-toggle__label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-size:.9rem;display:flex}.config-toggle__badge{font-size:.6rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;background-color:color-mix(in oklch, var(--c-accent-secondary) 18%, transparent);color:var(--c-accent-secondary);border-radius:3px;padding:.2rem .45rem;display:inline-block}.preview{flex-direction:column;flex:1;gap:0;display:flex}.preview__specimen{grid-template-columns:1fr;gap:1.75rem;display:grid}@media (min-width:900px){.preview__specimen{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}.preview__steps{flex-direction:column;gap:0;max-block-size:calc(100dvh - 3.5rem);padding:.25rem .25rem 0 0;display:flex;position:sticky;top:1rem;overflow-y:auto}.preview__step{border-block-end:1px solid color-mix(in oklch, var(--c-border-subtle) 85%, transparent);margin-block-end:1.35rem;padding-block-end:1.35rem}.preview__step:last-child{border-block-end:none;margin-block-end:0;padding-block-end:0}.preview__step-body{grid-template-columns:1fr;gap:.45rem;display:grid}.preview__step-name{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--c-fg-muted)}.preview__step-sample{font-weight:500;display:block}.preview__step-values{color:var(--c-fg-muted);font-size:.75rem;font-family:var(--font-martian-mono)}.preview__article-wrap{border-radius:12px;min-height:0;position:relative}.preview__article{background-color:var(--c-surface-card);box-shadow:var(--shadow-elevated);z-index:1;border-radius:12px;flex-direction:column;padding:0 1.75rem 2rem;display:flex;position:relative}@media (max-width:640px){.preview__article{padding:0 1.25rem 1.75rem}}.preview__article-body{flex:1;min-height:0;position:relative}.preview__article-toolbar{border-block-end:1px solid color-mix(in oklch, var(--c-border-subtle) 80%, transparent);flex-wrap:wrap;align-items:flex-end;gap:1rem 2rem;margin-block-end:.25rem;padding:1rem 0;display:flex}.preview__toolbar-cluster{flex-wrap:wrap;align-items:center;gap:.5rem .75rem;min-width:0;display:flex}.preview__toolbar-label{letter-spacing:.04em;text-transform:uppercase;color:var(--c-fg-muted);flex:none;font-size:.6875rem;font-weight:600}.preview__segmented{vertical-align:middle;border:1px solid var(--c-border-subtle);background-color:color-mix(in oklch, var(--c-bg) 35%, var(--c-surface-card));border-radius:8px;gap:0;padding:2px;display:inline-flex}.preview__segment-btn{min-inline-size:2.75rem;color:var(--c-fg-muted);cursor:pointer;transition:background-color .15s var(--ease-out), color .15s var(--ease-out), transform .1s var(--ease-out);background:0 0;border:none;border-radius:6px;padding:.35rem .75rem;font-family:inherit;font-size:.8125rem;font-weight:600;position:relative}.preview__segment-btn:hover{color:var(--c-fg)}.preview__segment-btn:active{transform:scale(.98)}.preview__segment-btn:focus-visible{outline:2px solid color-mix(in oklch, var(--c-accent) 65%, transparent);outline-offset:2px}.preview__segment-btn.preview__segment-btn--active{background-color:color-mix(in oklch, var(--c-accent) 12%, var(--c-surface-popover));color:var(--c-fg);box-shadow:0 1px 0 color-mix(in oklch, var(--c-black) 6%, transparent)}.preview__article-inner{z-index:1;padding-block-start:1.25rem;position:relative}.preview__article blockquote{margin:0}.sample-article :is(h2,h3,p,blockquote){text-wrap:pretty}.rhythm-overlay{background-image:repeating-linear-gradient(to bottom, transparent, transparent calc(var(--rhythm-unit) - 2px), color-mix(in oklch, var(--c-accent) 22%, transparent) calc(var(--rhythm-unit) - 2px), color-mix(in oklch, var(--c-accent) 22%, transparent) var(--rhythm-unit));pointer-events:none;z-index:2;border-radius:12px;position:absolute;inset:0}.export{flex-direction:column;gap:1rem;height:100%;padding-block-start:1.25rem;display:flex}.export__tabs{border-block-end:1px solid var(--c-border-subtle);gap:.25rem;padding-block-end:0;display:flex;overflow-x:auto}.export__tab{font-size:.8125rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-fg-muted);cursor:pointer;white-space:nowrap;transition:color .18s var(--ease-out);background:0 0;border:none;padding:.65rem 1rem .85rem;position:relative}.export__tab:hover,--active.export__tab{color:var(--c-fg)}.export__tab:active{transform:scale(.97)}.export__tab-label{z-index:1;position:relative}.export__tab-indicator{inset-inline:.35rem;background-color:var(--c-accent);z-index:0;border-radius:999px;height:2px;position:absolute;bottom:.15rem}.export__content{flex:1;min-height:0;overflow-y:auto}.code-block{background-color:var(--lightningcss-light,color-mix(in oklch, var(--c-code-bg) 50%, white))var(--lightningcss-dark,color-mix(in oklch, var(--c-code-bg) 50%, var(--c-black)));border:1px solid color-mix(in oklch, var(--c-border-subtle) 35%, transparent);border-radius:10px;position:relative;overflow:hidden}.code-block__content :is(pre.shiki,pre){background-color:#0000!important;background-image:none!important}.code-block__copy{background-color:color-mix(in oklch, var(--c-code-fg-soft) 14%, transparent);color:var(--c-code-fg-soft);border:1px solid color-mix(in oklch, var(--c-code-fg-soft) 22%, transparent);font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;transition:background-color .18s var(--ease-out), transform .12s var(--ease-out);z-index:10;border-radius:6px;padding:.4rem .75rem;position:absolute;top:.65rem;right:.65rem}.code-block__copy:hover{background-color:color-mix(in oklch, var(--c-code-fg-soft) 22%, transparent)}.code-block__copy:active{transform:scale(.97)}.code-block__content{padding:1.35rem;font-size:.8125rem;line-height:1.55;overflow-x:auto}.code-block__content pre,.code-block__content code{font-family:var(--font-martian-mono), monospace;color:inherit}.font-selector{position:relative}.font-selector__trigger{background-color:var(--c-surface-card);border:1px solid var(--c-border-subtle);text-align:left;cursor:pointer;width:100%;transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);border-radius:8px;justify-content:space-between;align-items:center;gap:.75rem;padding:.85rem 1rem;display:flex}.font-selector__trigger:hover{border-color:color-mix(in oklch, var(--c-accent) 35%, var(--c-border-subtle))}.font-selector__trigger:hover .font-selector__chevron{color:var(--c-fg)}.font-selector__trigger:active{transform:scale(.99)}.font-selector__trigger[aria-expanded=true]{border-color:color-mix(in oklch, var(--c-accent) 45%, var(--c-border-subtle))}.font-selector__trigger[aria-expanded=true] .font-selector__chevron{color:var(--c-accent-dim);transform:rotate(180deg)}.font-selector__label{text-align:start;gap:.35rem;min-width:0;display:grid}.font-selector__chevron{color:var(--c-fg-muted);transition:color .18s var(--ease-out), transform .2s var(--ease-out);flex-shrink:0;justify-content:center;align-items:center;line-height:0;display:flex}.font-selector__chevron-icon{display:block}.font-selector__name{color:var(--c-fg);font-size:.9rem;font-weight:600;display:block}.font-selector__category{color:var(--c-fg-muted);font-size:.78rem;display:block}.font-selector__dropdown{z-index:100;background-color:var(--c-surface-popover);border:1px solid var(--c-border-subtle);box-shadow:0 1px 0 color-mix(in oklch, var(--c-black) 5%, transparent), 0 22px 50px -18px color-mix(in oklch, var(--c-black) 22%, transparent);transform-origin:top;border-radius:10px;position:absolute;top:calc(100% + .45rem);left:0;right:0;overflow:hidden}.font-selector__search{border:none;border-block-end:1px solid var(--c-border-subtle);width:100%;color:var(--c-fg);background-color:#0000;padding:.7rem 1rem;font-size:.875rem}.font-selector__search::placeholder{color:var(--c-fg-muted)}.font-selector__search:focus{background-color:color-mix(in oklch, var(--c-accent) 5%, transparent);outline:none}.font-selector__list{max-block-size:280px;overflow-y:auto}.font-selector__option{text-align:left;cursor:pointer;width:100%;transition:background-color .15s var(--ease-out);background:0 0;border:none;gap:.2rem;padding:.75rem 1rem;display:grid}.font-selector__option:hover{background-color:color-mix(in oklch, var(--c-accent) 8%, transparent)}.font-selector__option:active{transform:scale(.99)}--selected.font-selector__option{background-color:color-mix(in oklch, var(--c-accent) 12%, transparent)}.font-selector__option-name{color:var(--c-fg);font-size:.9rem;font-weight:600;display:block}.font-selector__option-style{color:var(--c-fg-muted);font-size:.78rem;display:block}.metrics-vis{padding:.75rem 0 0}.metrics-vis__svg{width:100%;height:auto;display:block}.metrics-vis__text{fill:var(--c-fg);font-weight:400}.metrics-vis__label{font-size:11px;font-weight:500;font-family:var(--font-martian-mono), monospace}.takt-slider{flex-direction:column;gap:.65rem;display:flex}.takt-slider__header{justify-content:space-between;align-items:baseline;gap:1rem;display:flex}.takt-slider__label{color:var(--c-fg);font-size:.9rem;font-weight:500}.takt-slider__value{color:var(--c-fg-muted);font-size:.75rem;font-family:var(--font-martian-mono), monospace;font-weight:500}.takt-slider__track-wrapper{align-items:center;height:28px;display:flex;position:relative}.takt-slider__input{appearance:none;background:linear-gradient(to right, var(--c-accent) 0%, var(--c-accent) var(--slider-percent,50%), var(--c-border-subtle) var(--slider-percent,50%), var(--c-border-subtle) 100%);cursor:pointer;border:none;border-radius:3px;width:100%;height:6px}.takt-slider__input::-webkit-slider-thumb{appearance:none;background-color:var(--c-accent);border:2px solid var(--c-bg);cursor:pointer;width:16px;height:16px;box-shadow:0 2px 8px color-mix(in oklch, var(--c-accent) 28%, transparent);transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);border-radius:50%}.takt-slider__input::-webkit-slider-thumb:hover{box-shadow:0 4px 12px color-mix(in oklch, var(--c-accent) 35%, transparent);transform:scale(1.15)}.takt-slider__input::-webkit-slider-thumb:active{transform:scale(.95)}.takt-slider__input::-moz-range-thumb{background-color:var(--c-accent);border:2px solid var(--c-bg);cursor:pointer;width:16px;height:16px;box-shadow:0 2px 8px color-mix(in oklch, var(--c-accent) 28%, transparent);transition:transform .15s var(--ease-out), box-shadow .15s var(--ease-out);border-radius:50%}.takt-slider__input::-moz-range-thumb:hover{box-shadow:0 4px 12px color-mix(in oklch, var(--c-accent) 35%, transparent);transform:scale(1.15)}.takt-slider__input::-moz-range-thumb:active{transform:scale(.95)}.takt-slider__input:focus{outline:none}.takt-slider__input:focus::-webkit-slider-thumb{box-shadow:0 0 0 3px color-mix(in oklch, var(--c-accent) 18%, transparent), 0 2px 8px color-mix(in oklch, var(--c-accent) 28%, transparent)}.takt-slider__input:focus::-moz-range-thumb{box-shadow:0 0 0 3px color-mix(in oklch, var(--c-accent) 18%, transparent), 0 2px 8px color-mix(in oklch, var(--c-accent) 28%, transparent)}.takt-slider__target{background-color:var(--c-accent-secondary);width:2px;height:16px;left:var(--slider-percent,50%);pointer-events:none;position:absolute;transform:translate(-50%)}}@layer utilities;
@layer reset,base;@layer components{.mobile-landing{display:none}@media (max-width:767px){.mobile-landing{display:flex}.playground{display:none}}.mobile-landing{min-height:100dvh;padding:calc(var(--site-nav-gap) + 2rem) 1.5rem 2.5rem;background:var(--c-bg);color:var(--c-fg);flex-direction:column;align-items:center;gap:2rem}.mobile-landing__hero{text-align:center;flex-direction:column;align-items:center;gap:.5rem;inline-size:100%;max-inline-size:28rem;display:flex}.mobile-landing__wordmark{font-family:var(--font-takt-wordmark), ui-serif, Georgia, serif;letter-spacing:-.04em;color:var(--c-fg);margin:0;font-size:3rem;font-weight:600;line-height:1.05}.mobile-landing__tagline{color:var(--c-fg-muted);margin:0;font-size:1.0625rem;font-weight:500;line-height:1.4}.mobile-landing__about{text-align:center;inline-size:100%;max-inline-size:28rem}.mobile-landing__description{color:var(--c-fg-muted);margin:0;font-size:.9375rem;line-height:1.6}.mobile-landing__section-title{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), ui-monospace, monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--c-fg-muted);margin:0 0 .75rem}.mobile-landing__specimen{inline-size:100%;max-inline-size:28rem}.mobile-landing__specimen-card{border:1px solid var(--c-border-subtle);background:var(--c-surface-card);box-shadow:var(--shadow-elevated);border-radius:12px;flex-direction:column;gap:0;display:flex;overflow:hidden}.mobile-landing__specimen-step{border-block-end:1px solid color-mix(in oklch, var(--c-border-subtle) 60%, transparent);flex-direction:column;gap:.3rem;padding:1rem 1.25rem;display:flex}.mobile-landing__specimen-step:last-child{border-block-end:none}.mobile-landing__step-name{font-size:.625rem;font-weight:600;font-family:var(--font-martian-mono), ui-monospace, monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent-dim)}.mobile-landing__step-sample{color:var(--c-fg);overflow-wrap:break-word;font-weight:500;display:block}.mobile-landing__step-values{font-size:.6875rem;font-family:var(--font-martian-mono), ui-monospace, monospace;color:var(--c-fg-muted);letter-spacing:.01em}.mobile-landing__desktop-cta{text-align:center;background:var(--c-surface-raised);border:1px solid var(--c-border-subtle);border-radius:12px;inline-size:100%;max-inline-size:28rem;padding:1.1rem 1.25rem}.mobile-landing__desktop-cta p{color:var(--c-fg-muted);margin:0;font-size:.875rem;line-height:1.55}.mobile-landing__desktop-cta strong{color:var(--c-fg)}.mobile-landing__nav{inline-size:100%;max-inline-size:28rem}.mobile-landing__nav-cards{flex-direction:column;gap:.5rem;display:flex}.mobile-landing__nav-card{background:var(--c-surface-raised);border:1px solid var(--c-border-subtle);min-height:44px;transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);border-radius:10px;flex-direction:column;gap:.25rem;padding:.85rem 1.15rem;text-decoration:none;display:flex}.mobile-landing__nav-card:hover{border-color:color-mix(in oklch, var(--c-accent) 45%, var(--c-border-subtle));background:color-mix(in oklch, var(--c-accent) 5%, var(--c-surface-raised))}.mobile-landing__nav-card:active{transform:scale(.98)}.mobile-landing__nav-card-title{color:var(--c-fg);font-size:.9rem;font-weight:600}.mobile-landing__nav-card-desc{color:var(--c-fg-muted);font-size:.8125rem}.mobile-landing__footer{border-block-start:1px solid var(--c-border-subtle);inline-size:100%;max-inline-size:28rem;color:var(--c-fg-muted);text-align:center;margin-block-start:.25rem;padding-block-start:1rem;font-size:.8125rem}.mobile-landing__footer p{margin:0}.mobile-landing__footer a{color:var(--c-fg-muted);transition:color .18s var(--ease-out);text-decoration:none}.mobile-landing__footer a:hover{color:var(--c-accent)}}@layer utilities;