@layer components{.takt-slider{flex-direction:column;gap:.75rem;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:.875rem;font-weight:500}.takt-slider__value{font-variant-numeric:tabular-nums;color:var(--c-fg-muted);text-align:end;min-inline-size:2.5rem;font-size:.875rem}.takt-slider__track-wrapper{padding-block:.5rem;position:relative}.takt-slider__input{inline-size:100%;appearance:none;cursor:pointer;z-index:1;background:0 0;height:6px;position:relative}.takt-slider__input::-webkit-slider-thumb{appearance:none;background:var(--c-accent);cursor:pointer;border:none;border-radius:0;block-size:20px;inline-size:20px;margin-block-start:-7px}.takt-slider__input::-webkit-slider-thumb:hover{background:color-mix(in oklch, var(--c-accent) 110%, transparent)}.takt-slider__input::-webkit-slider-thumb:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}.takt-slider__input::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--c-accent) 0%, var(--c-accent) var(--slider-percent), var(--c-border-subtle) var(--slider-percent), var(--c-border-subtle) 100%);border:none;height:6px}.takt-slider__input::-moz-range-thumb{background:var(--c-accent);cursor:pointer;border:none;border-radius:0;block-size:20px;inline-size:20px;margin-block-start:-7px}.takt-slider__input::-moz-range-thumb:hover{background:color-mix(in oklch, var(--c-accent) 110%, transparent)}.takt-slider__input::-moz-range-thumb:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}.takt-slider__input::-moz-range-track{background:0 0;border:none}.takt-slider__input::-moz-range-progress{background:var(--c-accent);height:6px}.takt-slider__input:focus-visible{outline:none}.takt-slider__target{background:var(--c-accent-dim);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%);pointer-events:none;z-index:0;block-size:12px;inline-size:12px;position:absolute;inset-block-start:-4px;inset-inline-start:0;transform:translate(-50%)}}
@layer reset,base;@layer components{.game-intro{min-height:100dvh;padding:calc(var(--site-nav-gap) + 2rem) 2rem 2rem;background:var(--c-bg);flex-direction:column;justify-content:center;align-items:center;gap:2rem;display:flex}.game-intro__content{text-align:center;flex-direction:column;align-items:center;max-inline-size:28rem;display:flex}.game-intro__title{font-family:var(--font-takt-wordmark), ui-serif, Georgia, serif;letter-spacing:-.04em;color:var(--c-fg);margin:0 0 .5rem;font-size:3rem;font-weight:600;line-height:1.05}.game-intro__subtitle{color:var(--c-fg-muted);margin:0 0 1rem;font-size:1.125rem;font-weight:500;line-height:1.4}.game-intro__description{color:var(--c-fg-muted);margin:0 0 1.75rem;font-size:.9375rem;line-height:1.6}.game-intro__actions{flex-direction:column;align-items:center;gap:.75rem;display:flex}.game-intro__rounds{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--c-fg-muted);margin:0}.game-intro__start{letter-spacing:.02em;border:1px solid var(--c-accent);background:color-mix(in oklch, var(--c-accent) 10%, transparent);color:var(--c-accent-dim);cursor:pointer;min-height:44px;transition:background-color .18s var(--ease-out), color .18s var(--ease-out), transform .12s var(--ease-out);border-radius:8px;padding:.75rem 2rem;font-size:.875rem;font-weight:600}.game-intro__start:hover{background:color-mix(in oklch, var(--c-accent) 18%, transparent);color:var(--c-accent)}.game-intro__start:active{transform:scale(.97)}.game-intro__attribution{color:var(--c-fg-muted);border-block-start:1px solid var(--c-border-subtle);text-align:center;inline-size:100%;max-inline-size:28rem;padding-block-start:1rem;font-size:.8125rem}.game-intro__attribution a{color:var(--c-fg-muted);transition:color .18s var(--ease-out);text-decoration:none}.game-intro__attribution a:hover{color:var(--c-accent)}.game-round{min-height:100dvh;padding:calc(var(--site-nav-gap) + 1.5rem) 1.5rem 1.5rem;background:var(--c-bg);flex-direction:column;gap:1.25rem;display:flex}@media (max-width:767px){.game-round{padding-block-end:14rem}}@media (min-width:768px){.game-round{padding:calc(var(--site-nav-gap) + 1.5rem) 2.5rem 2rem;grid-template-rows:auto 1fr;grid-template-columns:minmax(0,1fr) 320px;align-items:start;gap:1.5rem 2.5rem;display:grid}}.game-round__header{border-block-end:1px solid var(--c-border-subtle);align-items:baseline;gap:.75rem;padding-block-end:1rem;display:flex}@media (min-width:768px){.game-round__header{grid-column:1/-1}}.game-round__count{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.07em;color:var(--c-fg-muted)}.game-round__font{color:var(--c-fg);font-size:1rem;font-weight:600}.game-round__challenge-badge{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent-dim);background:color-mix(in oklch, var(--c-accent) 12%, transparent);border:1px solid color-mix(in oklch, var(--c-accent) 22%, transparent);border-radius:6px;margin-inline-start:auto;padding:.2rem .5rem}.game-round__browser{min-height:0}.game-round__side{flex-direction:column;gap:1.25rem;min-width:0;display:flex}@media (max-width:767px){.game-round__side{z-index:100;padding:1rem 1.25rem calc(env(safe-area-inset-bottom,0px) + 1rem);background:color-mix(in oklch, var(--c-surface-raised) 85%, transparent);-webkit-backdrop-filter:blur(18px)saturate(1.2);border-block-start:1px solid color-mix(in oklch, var(--c-border-subtle) 55%, transparent);box-shadow:0 -8px 24px -6px color-mix(in oklch, var(--c-black) 12%, transparent);gap:1rem;position:fixed;inset-block-end:0;inset-inline:0}}@media (min-width:768px){.game-round__side{align-self:start;position:sticky;inset-block-start:4rem}}.game-round__preview-card{border:1px solid var(--c-border-subtle);background:var(--c-surface-card);box-shadow:var(--shadow-elevated);border-radius:12px;flex-direction:column;display:flex;overflow:hidden}.game-round__preview-toolbar{border-block-end:1px solid color-mix(in oklch, var(--c-border-subtle) 80%, transparent);background:color-mix(in oklch, var(--c-surface-card) 92%, var(--c-bg));justify-content:flex-end;align-items:center;padding:.65rem 1rem;display:flex}.game-round__challenge-pill{font-size:.625rem;font-weight:600;font-family:var(--font-martian-mono), monospace;letter-spacing:.04em;text-transform:uppercase;background:color-mix(in oklch, var(--c-accent) 14%, transparent);color:var(--c-accent-dim);border-radius:4px;padding:.2rem .5rem;display:inline-block}.game-round__composition{flex-direction:column;align-items:stretch;gap:0;display:flex}.game-round__composition--spacing .game-round__composition-heading{margin-block-end:0}.game-round__context{opacity:.4;transition:opacity .2s var(--ease-out)}.game-round__active{opacity:1}.game-round__spacing-gap{background:color-mix(in oklch, var(--c-accent) 18%, transparent);border:1px dashed color-mix(in oklch, var(--c-accent) 35%, transparent);border-radius:4px;flex-shrink:0;width:100%;min-height:4px}.game-round__meta{flex-direction:column;gap:.35rem;display:flex}@media (max-width:767px){.game-round__meta{display:none}}.game-round__meta-line{color:var(--c-fg-muted);margin:0;font-size:.8125rem;line-height:1.4}.game-round__meta-line strong{color:var(--c-fg);font-weight:600}.game-round__meta-key{font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-fg-muted);margin-inline-end:.35rem;font-size:.6875rem;font-weight:600}.game-round__meta-mono{font-family:var(--font-martian-mono), monospace;letter-spacing:.02em;color:var(--c-fg-muted);font-size:.6875rem}.game-round__preview-body{min-height:12rem;color:var(--c-fg);word-break:break-word;flex-direction:column;padding:1.25rem 1.5rem 1.5rem;display:flex;position:relative}@media (max-width:480px){.game-round__preview-body{padding:1rem 1.15rem 1.15rem}}.game-round__preview-body-inner{z-index:1;box-sizing:border-box;inline-size:100%;max-inline-size:min(100%,40rem);margin-inline:auto;position:relative}.game-round__composition-heading,.game-round__composition-body,.game-round__composition-caption{text-wrap:pretty;max-inline-size:100%}.game-round__composition-body{white-space:pre-line}.game-round__preview-body .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:0;border-radius:0;position:absolute;inset:0}.game-round__preview-body p{margin:0}.game-round__preview-body strong{margin-block-end:.5rem;display:block}.game-round__controls{flex-direction:column;gap:1.75rem;display:flex}.game-round__lock{letter-spacing:.02em;border:1px solid var(--c-accent);background:color-mix(in oklch, var(--c-accent) 10%, transparent);inline-size:100%;color:var(--c-accent-dim);cursor:pointer;min-height:44px;transition:background-color .18s var(--ease-out), color .18s var(--ease-out), transform .12s var(--ease-out);border-radius:8px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600}.game-round__lock:hover{background:color-mix(in oklch, var(--c-accent) 18%, transparent);color:var(--c-accent)}.game-round__lock:active{transform:scale(.97)}.game-round__reveal{background:var(--c-surface-raised);border:1px solid var(--c-border-subtle);border-radius:12px;flex-direction:column;gap:.75rem;padding:1rem 1.25rem;display:flex}@media (max-width:767px){.game-round__reveal{background:color-mix(in oklch, var(--c-surface-card) 50%, transparent);border-color:color-mix(in oklch, var(--c-border-subtle) 40%, transparent);gap:.5rem;padding:.75rem 1rem}}.game-round__optimal{font-size:.75rem;font-weight:600;font-family:var(--font-martian-mono), monospace;letter-spacing:.02em;color:var(--c-fg);font-variant-numeric:tabular-nums;flex-direction:column;gap:.35rem;display:flex}.game-round__optimal span{justify-content:space-between;gap:1rem;display:flex}.game-round__reasoning{color:var(--c-fg-muted);margin:0;font-size:.8125rem;line-height:1.55}@media (max-width:767px){.game-round__reasoning{display:none}}.game-results{min-height:100dvh;padding:calc(var(--site-nav-gap) + 2rem) 2rem 2.5rem;background:var(--c-bg);flex-direction:column;align-items:center;gap:1.5rem;display:flex}.game-results__score-card{background:var(--c-surface-card);border:1px solid var(--c-border-subtle);box-shadow:var(--shadow-elevated);border-radius:12px;flex-direction:column;align-items:center;gap:.75rem;inline-size:100%;max-inline-size:22rem;padding:2.5rem 3rem;display:flex}.game-results__rank-icon{color:var(--c-accent);font-size:2rem}.game-results__score{letter-spacing:-.04em;color:var(--c-fg);font-variant-numeric:tabular-nums;margin:0;font-size:3.5rem;font-weight:600;line-height:1}.game-results__score span{color:var(--c-fg-muted);font-size:1.25rem;font-weight:500}.game-results__rank{color:var(--c-accent-dim);margin:0;font-size:1rem;font-weight:600}.game-results__breakdown{width:100%;flex-direction:column;gap:.5rem;max-inline-size:28rem;display:flex}.game-results__breakdown h2{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--c-fg-muted);margin:0 0 .25rem}.game-results__round{background:var(--c-surface-raised);border:1px solid var(--c-border-subtle);border-radius:8px;flex-direction:column;gap:.35rem;padding:.85rem 1rem;display:flex}.game-results__round-header{color:var(--c-fg);flex-wrap:wrap;align-items:baseline;gap:.5rem .75rem;font-size:.8125rem;font-weight:600;display:flex}.game-results__round-challenge{font-size:.625rem;font-weight:600;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-accent-dim);background:color-mix(in oklch, var(--c-accent) 10%, transparent);border-radius:4px;padding:.1rem .35rem}.game-results__round-num{font-size:.625rem;font-family:var(--font-martian-mono), monospace;text-transform:uppercase;letter-spacing:.06em;color:var(--c-fg-muted);flex-shrink:0}.game-results__round-font{flex:1;min-width:0}.game-results__round-score{font-size:.875rem;font-weight:700;font-family:var(--font-martian-mono), monospace;color:var(--c-accent);font-variant-numeric:tabular-nums;flex-shrink:0}.game-results__round-detail{font-size:.6875rem;font-family:var(--font-martian-mono), monospace;color:var(--c-fg-muted);font-variant-numeric:tabular-nums;flex-direction:column;gap:.15rem;display:flex}.game-results__share{width:100%;flex-direction:column;gap:.65rem;max-inline-size:28rem;display:flex}.game-results__share h2{font-size:.6875rem;font-weight:600;font-family:var(--font-martian-mono), monospace;letter-spacing:.07em;text-transform:uppercase;color:var(--c-fg-muted);margin:0}.game-results__share-buttons{gap:.5rem;display:flex}@media (max-width:640px){.game-results__share-buttons{flex-direction:column}}.game-results__share-btn{border:1px solid var(--c-border-subtle);background:var(--c-surface-raised);color:var(--c-fg);cursor:pointer;min-height:44px;transition:border-color .18s var(--ease-out), background-color .18s var(--ease-out), transform .12s var(--ease-out);border-radius:8px;flex:1;padding:.6rem .75rem;font-size:.8125rem;font-weight:600}.game-results__share-btn: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))}.game-results__share-btn:active{transform:scale(.97)}.game-results__cta{width:100%;text-align:center;background:var(--c-surface-raised);border:1px solid var(--c-border-subtle);border-radius:12px;max-inline-size:28rem;padding:1.1rem 1.25rem}.game-results__cta p{color:var(--c-fg-muted);margin:0 0 .5rem;font-size:.8125rem}.game-results__cta-link{color:var(--c-accent);transition:color .18s var(--ease-out);font-size:.8125rem;font-weight:600;text-decoration:none}.game-results__cta-link:hover{color:var(--c-accent-dim)}.game-results__actions{width:100%;max-inline-size:28rem}.game-results__play-again{letter-spacing:.02em;border:1px solid var(--c-accent);background:color-mix(in oklch, var(--c-accent) 10%, transparent);width:100%;color:var(--c-accent-dim);cursor:pointer;min-height:44px;transition:background-color .18s var(--ease-out), color .18s var(--ease-out), transform .12s var(--ease-out);border-radius:8px;padding:.75rem 1.5rem;font-size:.875rem;font-weight:600}.game-results__play-again:hover{background:color-mix(in oklch, var(--c-accent) 18%, transparent);color:var(--c-accent)}.game-results__play-again:active{transform:scale(.97)}.game-results__footer{border-block-start:1px solid var(--c-border-subtle);color:var(--c-fg-muted);text-align:center;inline-size:100%;max-inline-size:28rem;margin-block-start:.25rem;padding-block-start:1rem;font-size:.8125rem}.game-results__footer p{margin:0}.game-results__footer a{color:var(--c-fg-muted);transition:color .18s var(--ease-out);font-weight:500;text-decoration:none}.game-results__footer a:hover{color:var(--c-accent)}}@layer utilities;