.tutorial-backdrop{position:fixed;z-index:20;inset:0;display:grid;overflow:auto;overscroll-behavior:contain;place-items:center;padding:var(--space-6, 1.5rem);background:#1018139e}.tutorial-dialog{max-height:min(100%,44rem);width:min(100%,38rem);overflow:auto;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg, 1.5rem);box-shadow:var(--shadow-soft)}.tutorial-dialog__header,.tutorial-dialog__footer{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4, 1rem);padding:var(--space-6, 1.5rem) var(--space-8, 2rem)}.tutorial-dialog__header{border-bottom:1px solid var(--color-border)}.tutorial-dialog__eyebrow{margin:0 0 var(--space-2, .5rem);color:var(--color-accent);font-size:var(--text-xs, .75rem);font-weight:800;letter-spacing:.12em;text-transform:uppercase}.tutorial-dialog h2{margin:0;font-size:clamp(1.7rem,5vw,2.4rem)}.tutorial-dialog__close,.tutorial-button{min-height:2.75rem;font-weight:750;cursor:pointer}.tutorial-dialog__close{display:grid;width:2.75rem;flex:0 0 auto;place-items:center;color:var(--color-ink-muted);background:transparent;border:1px solid var(--color-border);border-radius:50%;font-size:1.5rem}.tutorial-progress{display:flex;gap:var(--space-2, .5rem);padding:var(--space-5, 1.25rem) var(--space-8, 2rem) 0}.tutorial-progress__dot{width:100%;height:.35rem;background:var(--color-border);border-radius:var(--radius-pill, 999px)}.tutorial-progress__dot--active{background:var(--color-accent)}.tutorial-dialog__body{min-height:13rem;padding:var(--space-6, 1.5rem) var(--space-8, 2rem);font-size:var(--text-lg, 1.125rem);line-height:var(--leading-copy, 1.65)}.tutorial-dialog__prompt{padding:var(--space-4, 1rem);color:var(--color-ink-muted);background:var(--color-surface-muted);border-inline-start:.25rem solid var(--color-accent);font-size:var(--text-md, 1rem)}.tutorial-practice{display:flex;align-items:center;gap:var(--space-5, 1.25rem);margin-top:var(--space-5, 1.25rem)}.tutorial-practice__grid{display:grid;width:7rem;height:7rem;flex:0 0 auto;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);color:var(--color-ink);background:var(--color-surface-raised);border:.15rem solid var(--color-border-strong)}.tutorial-practice__grid span{display:grid;place-items:center;border-inline-end:1px solid var(--color-border);border-block-end:1px solid var(--color-border);font-weight:800}.tutorial-practice__caption{margin:0;color:var(--color-ink-muted);font-size:var(--text-sm, .875rem)}.tutorial-dialog__footer{align-items:center;border-top:1px solid var(--color-border)}.tutorial-dialog__navigation{display:flex;gap:var(--space-3, .75rem);margin-inline-start:auto}.tutorial-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2, .5rem);padding:var(--space-3, .75rem) var(--space-5, 1.25rem);border:1px solid transparent;border-radius:var(--radius-pill, 999px)}.tutorial-button:disabled{cursor:not-allowed;opacity:.45}.tutorial-button--primary{color:var(--color-surface);background:var(--color-accent)}.tutorial-button--secondary{color:var(--color-ink);background:transparent;border-color:var(--color-border-strong)}.tutorial-button--quiet{padding-inline:0;color:var(--color-ink-muted);background:transparent}@media(max-width:36rem){.tutorial-dialog__header,.tutorial-dialog__footer,.tutorial-dialog__body,.tutorial-progress{padding-inline:var(--space-5, 1.25rem)}.tutorial-dialog__footer{align-items:stretch;flex-direction:column-reverse}.tutorial-dialog__navigation{margin-inline-start:0}.tutorial-dialog__navigation .tutorial-button{flex:1}.tutorial-practice{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){.tutorial-dialog *,.tutorial-dialog *:before,.tutorial-dialog *:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.flow-screen{box-sizing:border-box;display:grid;gap:1.25rem;width:min(100%,42rem);margin:0 auto;padding:clamp(1.5rem,5vw,4rem);color:var(--color-text, #172126);background:var(--color-surface, #fffdf8);border:1px solid color-mix(in srgb,currentColor 14%,transparent);border-radius:1.5rem}.flow-screen__eyebrow{margin:0;color:var(--color-accent, #087f75);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.flow-screen h1{margin:0;font-size:clamp(2rem,5vw,3.25rem);line-height:1.05}.flow-screen__intro{max-width:34rem;margin:0;color:color-mix(in srgb,currentColor 72%,transparent);line-height:1.6}.flow-back{justify-self:start;padding:.4rem 0;color:inherit;background:none;border:0;cursor:pointer}.flow-screen__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem}.flow-screen__header h1{min-width:0}.flow-back--icon{display:grid;width:2.75rem;height:2.75rem;padding:0;place-items:center;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:50%;font-size:1.25rem}.flow-screen__help{min-height:2.75rem;white-space:nowrap}.flow-screen--selection{gap:.7rem;padding:clamp(1rem,3vw,2rem)}.flow-screen--selection .flow-picker{gap:.55rem}.flow-screen--selection .flow-picker__options{gap:.45rem}.flow-screen--selection .flow-choice{padding:.55rem .45rem}.flow-screen--selection .flow-picker--puzzles{gap:.65rem}.flow-screen--selection .puzzle-list{gap:.45rem}.flow-screen--selection .puzzle-choice{padding:.6rem .75rem}.flow-screen--selection .flow-actions--primary{margin-top:0}.flow-picker{display:grid;gap:.75rem;padding:0;border:0}.flow-picker legend{margin-bottom:.25rem;font-weight:700}.flow-picker__options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem}.flow-choice{display:grid;flex:1 1 7.5rem;justify-items:center;gap:.35rem;min-width:0;padding:.7rem .9rem;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:.8rem;cursor:pointer;text-align:center}.flow-choice[aria-pressed=true]{color:#fff;background:var(--color-accent, #087f75);border-color:var(--color-accent, #087f75)}.flow-actions{display:flex;flex-wrap:wrap;gap:.75rem}.flow-actions--primary{margin-top:.5rem}.flow-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(8rem,1fr));gap:.75rem;margin:.5rem 0}.flow-summary div{padding:.9rem;background:color-mix(in srgb,currentColor 6%,transparent);border-radius:.8rem}.flow-summary dt{font-size:.72rem;opacity:.68;text-transform:uppercase;letter-spacing:.08em}.flow-summary dd{margin:.3rem 0 0;font-weight:700;text-transform:capitalize}.flow-screen .button{min-height:3rem}.flow-start{justify-self:start;min-width:10rem}.flow-picker--puzzles{gap:1rem}.puzzle-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.6rem;margin:0;padding:0;list-style:none}.puzzle-list__item{min-width:0}.puzzle-choice{display:grid;width:min(100%,5rem);aspect-ratio:1;min-height:0;justify-self:center;min-width:0;padding:0;place-items:center;color:inherit;background:transparent;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:50%;cursor:pointer;font-size:clamp(1rem,2.5vw,1.5rem);font-weight:800}.puzzle-choice:hover:not(:disabled),.puzzle-choice:focus-visible{border-color:var(--color-accent, #087f75)}.puzzle-choice__number{display:block}.puzzle-list__item--available .puzzle-choice,.puzzle-list__item--in-progress .puzzle-choice{color:#79521a;background:#fff4d9;border-color:#e3b866}.puzzle-list__item--completed .puzzle-choice{color:#155d3a;background:#eef8f1;border-color:#79c693}.puzzle-list__item--locked .puzzle-choice{color:color-mix(in srgb,currentColor 62%,transparent);background:color-mix(in srgb,currentColor 4%,transparent);cursor:not-allowed}.puzzle-choice:disabled{opacity:.82}@media(max-width:40rem){.flow-screen{border-radius:1rem}.flow-screen{padding:1.25rem}.flow-screen--selection{padding:1rem}.flow-screen__header{gap:.5rem}.flow-screen__header h1{font-size:clamp(1.5rem,7vw,2rem)}.flow-screen__help{padding-inline:.7rem;font-size:.75rem}.flow-screen--selection .flow-picker__options{grid-template-columns:repeat(3,minmax(0,1fr))}.flow-screen--selection .flow-choice{padding-inline:.35rem;font-size:.8rem}.flow-actions .button,.flow-start{width:100%}}@media(max-width:22rem){.flow-choice{font-size:.7rem}.puzzle-choice{width:min(100%,4rem)}}.loop-edge{cursor:pointer;outline:none}.loop-edge[aria-disabled=true]{cursor:default}.loop-edge:focus-visible .loop-edge__hit-target{stroke:var(--color-focus, #b75e34);stroke-width:3.25rem;stroke-opacity:.32}.loop-edge__hit-target{fill:none;stroke:transparent;stroke-linecap:round;stroke-width:2.75rem;pointer-events:stroke;touch-action:none}.loop-edge__guide{fill:none;stroke:var(--loop-board-grid, var(--color-border-strong, #b7c0b3));stroke-linecap:round;stroke-width:.12rem;pointer-events:none}.loop-edge__line{fill:none;stroke:var(--color-loop, #b75e34);stroke-linecap:round;stroke-width:var(--edge-width, .25rem);pointer-events:none;transition:stroke var(--transition-fast, .14s ease),stroke-width var(--transition-fast, .14s ease)}.loop-edge__hint-line{fill:none;stroke:var(--color-hint, #7658c7);stroke-linecap:round;stroke-dasharray:.45rem .3rem;stroke-width:var(--edge-width, .25rem);pointer-events:none}.loop-edge--fixed .loop-edge__line{stroke:var(--color-loop-fixed, #3b6a56);stroke-width:var(--edge-width-fixed, .35rem)}.loop-edge__x{fill:none;stroke:var(--color-ink-subtle, #8b928a);pointer-events:none}.loop-edge__x-icon{display:block;overflow:visible;stroke-linecap:round}.loop-edge__x--hint{stroke:var(--color-hint, #7658c7)}.loop-edge--fixed .loop-edge__hit-target,.loop-edge--fixed .loop-edge__guide{pointer-events:none}.loop-board{--loop-board-grid: var(--color-border-strong, #b7c0b3);--loop-board-cell: var(--color-surface, #fffdf8);--loop-board-clue: var(--color-ink, #20251f);width:min(100%,58rem);margin-inline:auto}.loop-board__viewport{width:100%;overflow:visible;border:1px solid var(--color-border, #d8ddd4);border-radius:var(--radius-md, 1rem);background:var(--loop-board-cell);box-shadow:var(--shadow-card, 0 .5rem 1.5rem rgb(33 40 32 / 6%));container-type:inline-size}.loop-board__svg{display:block;width:100%;height:auto;aspect-ratio:var(--loop-board-ratio, 1 / 1);overflow:visible;touch-action:manipulation;-webkit-user-select:none;user-select:none}.loop-board__cell rect{fill:var(--loop-board-cell);stroke:var(--loop-board-grid);stroke-width:1;vector-effect:non-scaling-stroke}.loop-board__clue{fill:var(--loop-board-clue);font-family:var(--font-body, system-ui, sans-serif);font-size:2.25rem;font-weight:700;pointer-events:none}.loop-board__dot{fill:var(--color-ink, #20251f);pointer-events:none}@container (max-width: 32rem){.loop-board__clue{font-size:2rem}}@media(min-width:48rem){.loop-board{width:min(100%,64rem)}.loop-board__clue{font-size:2.5rem}}@media(min-width:80rem){.loop-board{width:min(100%,70rem)}}@media(prefers-reduced-motion:reduce){.loop-edge__line{transition:none}}.game-play{--game-play-gap: clamp(.4rem, 1.5vh, 1rem);--game-play-board-size: min(100%, max(0px, calc(100dvh - 23.0625rem) ));display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:var(--game-play-gap);width:min(100%,68rem);min-height:0;margin:0 auto;overflow:hidden;padding:clamp(.75rem,2vw,1.5rem)}.game-play .loop-board{align-self:center;justify-self:center;width:var(--game-play-board-size);height:auto;max-width:100%;min-width:0;aspect-ratio:1 / 1}.game-play__board-wrap{position:relative;align-self:center;justify-self:center;width:var(--game-play-board-size);max-width:100%;min-width:0;aspect-ratio:1 / 1}.game-play__board-wrap .loop-board{width:100%;height:100%}.game-play .loop-board__viewport{height:100%;max-height:100%}.game-play .loop-board__svg{height:100%}.app-shell:has(.game-play) .app-content{padding-block:clamp(.25rem,1.5vh,1rem)}.app-shell:has(.game-play) .app-footer{display:none}.app-shell:has(.flow-screen--selection) .app-content{padding-block:clamp(.25rem,1.5vh,1rem)}.app-shell:has(.flow-screen--selection) .app-footer{display:none}.game-play__header{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem}.game-play__meta{min-width:0;margin:0;overflow:hidden;text-align:center;text-overflow:ellipsis;white-space:nowrap}.game-play__stats{display:inline-flex;align-items:center;justify-content:flex-end;gap:.4rem;margin:0;color:var(--color-muted, #667085);font-size:.9rem;text-align:right;white-space:nowrap}.game-play__timer{display:inline-flex;align-items:center;gap:.3rem;font-variant-numeric:tabular-nums}.game-play__timer-icon{width:1rem;height:1rem;stroke-width:2.25}.game-play__controls{display:flex;flex-wrap:wrap;gap:.65rem;justify-content:center;margin-top:1.25rem}.game-play .game-play__controls .game-play__icon-button{width:2.75rem;height:2.75rem;min-height:2.75rem;padding:0;gap:0;border-radius:50%;line-height:1}.game-play__icon{display:block;flex:0 0 auto;width:1.4rem;height:1.4rem;stroke-width:2.25}.game-play__next-button{color:var(--color-surface, #fff);background:var(--color-accent, #39745f);border-color:var(--color-accent, #39745f)}.game-play__feedback{min-height:3rem;margin-top:1rem;color:var(--color-muted, #667085);text-align:center}.game-play__feedback p{margin:.5rem 0}.game-play__completion-layer{position:absolute;z-index:2;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.game-play__success{display:inline-flex;align-items:center;gap:.65rem;min-width:max-content;padding:.75rem 1rem;color:var(--color-accent, #39745f);font:inherit;background:var(--color-surface, #fffdf8);border:2px solid var(--color-accent, #39745f);border-radius:999px;box-shadow:0 .75rem 2rem #20251f2e;cursor:pointer;font-weight:800;animation:game-play-success-in .5s ease-out both}.game-play__success:hover{background:var(--color-surface, #fffdf8)}.game-play__success:focus-visible{outline:3px solid var(--color-focus, #b85d35);outline-offset:4px}.game-play__success-icon{display:grid;width:2.75rem;height:2.75rem;place-items:center;color:var(--color-surface, #fff);background:var(--color-accent, #39745f);border-radius:50%;animation:game-play-success-pop .65s cubic-bezier(.16,1,.3,1) both}.game-play__success-check{width:1.4rem;height:1.4rem;stroke-width:2.75}@keyframes game-play-success-in{0%{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}@keyframes game-play-success-pop{0%{opacity:0;transform:scale(.5)}65%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@media(prefers-reduced-motion:reduce){.game-play__success,.game-play__success-icon{animation:none}}@media(max-width:40rem){.game-play{--game-play-gap: .75rem;--game-play-board-size: min(100%, max(0px, calc(100dvh - 14rem) ));grid-template-rows:auto auto auto auto;align-content:start;padding:.75rem}.game-play .flow-screen__intro{font-size:var(--text-sm, .875rem)}.game-play__controls{gap:.4rem;margin-top:0}.game-play__controls .button{min-height:2.5rem;padding:.5rem .75rem}.game-play .game-play__controls .game-play__icon-button{width:2.5rem;height:2.5rem;min-height:2.5rem;padding:0}.game-play__header{gap:.35rem}.game-play__meta{font-size:.68rem;letter-spacing:.08em}.game-play__stats{font-size:.75rem}.game-play__feedback{min-height:0;margin-top:0}}:root{color-scheme:light;--color-canvas: #f7f5f0;--color-surface: #fffdf8;--color-surface-muted: #eeece6;--color-surface-raised: #ffffff;--color-ink: #20251f;--color-ink-muted: #697066;--color-ink-subtle: #8b928a;--color-border: #d8ddd4;--color-border-strong: #b7c0b3;--color-accent: #3b6a56;--color-accent-strong: #285440;--color-accent-soft: #d9e7dc;--color-focus: #b75e34;--color-loop: #b75e34;--color-loop-fixed: #3b6a56;--color-hint: #7658c7;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-display: "Fraunces", Georgia, serif;--text-xs: .75rem;--text-sm: .875rem;--text-md: 1rem;--text-lg: 1.125rem;--text-xl: clamp(2.5rem, 7vw, 5.25rem);--leading-tight: 1.05;--leading-copy: 1.65;--edge-width: .25rem;--edge-width-fixed: .35rem;--edge-dash: .2rem .45rem;--radius-sm: .5rem;--radius-md: 1rem;--radius-lg: 1.5rem;--radius-pill: 999px;--shadow-soft: 0 1.5rem 4rem rgb(33 40 32 / 8%);--shadow-card: 0 .5rem 1.5rem rgb(33 40 32 / 6%);--transition-fast: .14s ease}:root{font-family:var(--font-body);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{block-size:100%;min-width:320px;background:var(--color-canvas);overflow:hidden;scroll-behavior:smooth}body{block-size:100%;min-width:320px;min-height:100%;margin:0;color:var(--color-ink);background:var(--color-canvas);overflow:hidden}#root{block-size:100%;min-height:0}button,a{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit}button:focus-visible,a:focus-visible{outline:.2rem solid var(--color-focus);outline-offset:.2rem}.app-shell{display:flex;height:100dvh;min-height:100svh;flex-direction:column;overflow:hidden;background:radial-gradient(circle at 75% 8%,color-mix(in srgb,var(--color-accent-soft) 72%,transparent),transparent 30rem),var(--color-canvas);transition:background-color var(--transition-fast),color var(--transition-fast)}.app-header,.app-content,.app-footer{width:min(100% - (var(--space-8) * 2),76rem);margin-inline:auto}.app-header{display:flex;align-items:center;gap:var(--space-8);min-height:5rem;padding-block:var(--space-4)}.app-header>.icon-button{margin-inline-start:auto}.brand{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--color-ink);font-size:1.25rem;font-weight:800;letter-spacing:-.04em;text-decoration:none}.brand__mark{display:grid;width:1.75rem;height:1.75rem;place-items:center;color:var(--color-surface);background:var(--color-accent);border-radius:50%;font-size:1.75rem;line-height:1}.app-nav{display:flex;gap:var(--space-6);margin-inline:auto}.app-nav__link{position:relative;padding:var(--space-2) 0;color:var(--color-ink-muted);font-size:var(--text-sm);text-decoration:none}.app-nav__link--button{border:0;background:transparent;cursor:pointer}.app-nav__link:hover,.app-nav__link--active{color:var(--color-ink)}.app-nav__link--active:after{position:absolute;right:0;bottom:0;left:0;height:.15rem;background:var(--color-accent);border-radius:var(--radius-pill);content:""}.icon-button{display:grid;width:2.75rem;height:2.75rem;padding:0;place-items:center;color:var(--color-ink-muted);background:transparent;border:1px solid var(--color-border);border-radius:50%;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast)}.icon-button:hover{color:var(--color-ink);background:var(--color-surface-muted)}.app-content{display:flex;min-height:0;flex-direction:column;flex:1;overflow:hidden;padding-block:var(--space-12) var(--space-16)}.hero-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(18rem,.8fr);align-items:center;gap:var(--space-12);padding:clamp(var(--space-8),8vw,var(--space-16));background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.eyebrow{margin:0 0 var(--space-3);color:var(--color-accent);font-size:var(--text-xs);font-weight:800;letter-spacing:.16em;line-height:1.3;text-transform:uppercase}h1,h2,p{margin-top:0}h1,h2{color:var(--color-ink);font-family:var(--font-display);font-weight:500}h1{max-width:12ch;margin-bottom:var(--space-6);font-size:var(--text-xl);letter-spacing:-.055em;line-height:var(--leading-tight)}h2{margin-bottom:var(--space-3);font-size:1.45rem;letter-spacing:-.035em}.hero-panel__description{max-width:37rem;margin-bottom:var(--space-8);color:var(--color-ink-muted);font-size:var(--text-lg);line-height:var(--leading-copy)}.hero-panel__actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.button{display:inline-flex;min-height:3rem;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border:1px solid transparent;border-radius:var(--radius-pill);cursor:pointer;font-size:var(--text-sm);font-weight:750;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--transition-fast)}.button:hover{transform:translateY(-.1rem)}.button--primary{color:var(--color-surface);background:var(--color-accent)}.button--primary:hover{background:var(--color-accent-strong)}.button--secondary{color:var(--color-ink);background:transparent;border-color:var(--color-border-strong)}.button--secondary:hover{background:var(--color-surface-muted)}.progress-note{display:flex;align-items:center;gap:var(--space-2);margin:var(--space-6) 0 0;color:var(--color-ink-subtle);font-size:var(--text-xs)}.progress-note__dot{width:.45rem;height:.45rem;background:var(--color-accent);border-radius:50%}.loop-preview{position:relative;width:min(100%,22rem);aspect-ratio:1;margin-inline:auto;padding:13%;isolation:isolate}.loop-preview__glow{position:absolute;inset:5%;z-index:-1;background:var(--color-accent-soft);border-radius:42% 58% 54% 46%/58% 43% 57% 42%;transform:rotate(-16deg)}.loop-preview__grid{display:grid;width:100%;height:100%;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);border:1px solid color-mix(in srgb,var(--color-accent) 28%,transparent);border-radius:var(--radius-md)}.loop-preview__cell{display:grid;place-items:center;color:var(--color-accent);border-right:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent);border-bottom:1px solid color-mix(in srgb,var(--color-accent) 22%,transparent);font-family:var(--font-display);font-size:clamp(1rem,3vw,1.75rem)}.loop-preview__cell:nth-child(4n){border-right:0}.loop-preview__cell:nth-last-child(-n+4){border-bottom:0}.loop-preview__line{position:absolute;inset:13%;width:74%;height:74%;overflow:visible}.loop-preview__line path{fill:none;stroke:var(--color-loop);stroke-linecap:round;stroke-linejoin:round;stroke-width:5}.settings-backdrop{position:fixed;z-index:15;inset:0;display:grid;overflow:auto;place-items:start end;padding:var(--space-6);background:#1018136b}.settings-panel{width:min(100%,28rem);max-height:min(100%,44rem);overflow:auto;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-soft)}.settings-panel__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-4);padding:var(--space-6);border-bottom:1px solid var(--color-border)}.settings-panel__header h2{margin-bottom:0}.settings-panel__close{display:grid;width:2.75rem;height:2.75rem;flex:0 0 auto;place-items:center;color:var(--color-ink-muted);background:transparent;border:1px solid var(--color-border);border-radius:50%;cursor:pointer;font-size:1.5rem}.settings-panel__body{display:grid;gap:var(--space-6);padding:var(--space-6)}.settings-panel__group{min-inline-size:0;margin:0;padding:0;border:0}.settings-panel__group legend{padding:0;font-weight:800}.settings-panel__hint{margin:var(--space-2) 0 var(--space-4);color:var(--color-ink-muted);font-size:var(--text-sm);line-height:var(--leading-copy)}.settings-panel__options{display:grid;gap:var(--space-2)}.settings-panel__option{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-md);cursor:pointer}.settings-panel__option:has(input:checked){border-color:var(--color-accent);background:var(--color-accent-soft)}.settings-panel__option input{width:1.15rem;height:1.15rem;flex:0 0 auto;accent-color:var(--color-accent)}.settings-panel__option span{display:grid;gap:var(--space-1)}.settings-panel__option small{color:var(--color-ink-muted);font-size:var(--text-xs);line-height:1.4}.accessibility-settings{display:grid;gap:var(--space-3);min-inline-size:min(100%,20rem);padding:var(--space-4);color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}.accessibility-settings legend{padding-inline:var(--space-2);font-weight:800}.accessibility-settings__option{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);cursor:pointer}.accessibility-settings__option:hover{background:var(--color-surface-muted)}.accessibility-settings__option input{width:1.25rem;height:1.25rem;flex:0 0 auto;accent-color:var(--color-accent)}.accessibility-settings__option span{display:grid;gap:.2rem}.accessibility-settings__option small{color:var(--color-ink-muted);font-size:var(--text-xs)}.accessibility-settings :focus-visible,.accessibility-settings__option:has(input:focus-visible){outline:.2rem solid var(--color-focus);outline-offset:.2rem}:root[data-reduced-motion=true] *,:root[data-reduced-motion=true] *:before,:root[data-reduced-motion=true] *:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}.feature-card{padding:var(--space-6);background:color-mix(in srgb,var(--color-surface) 72%,transparent);border:1px solid var(--color-border);border-radius:var(--radius-md)}.feature-card__icon{display:inline-grid;width:2.25rem;height:2.25rem;margin-bottom:var(--space-5);place-items:center;color:var(--color-accent);background:var(--color-accent-soft);border-radius:50%;font-size:1.2rem}.feature-card p{margin-bottom:0;color:var(--color-ink-muted);font-size:var(--text-sm);line-height:var(--leading-copy)}.app-footer{display:flex;justify-content:space-between;gap:var(--space-4);padding-block:var(--space-6);color:var(--color-ink-subtle);font-size:var(--text-xs)}@media(max-width:720px){.app-header,.app-content,.app-footer{width:min(100% - (var(--space-5) * 2),76rem)}.app-header,.app-nav{gap:var(--space-4)}.app-nav__link{font-size:var(--text-xs)}.hero-panel{grid-template-columns:1fr;gap:var(--space-8);padding:var(--space-8) var(--space-6)}.loop-preview{width:min(100%,18rem)}.mode-panel{align-items:flex-start;flex-direction:column;padding-top:var(--space-8)}.mode-picker{justify-content:flex-start}.feature-grid{grid-template-columns:1fr}.app-footer{align-items:flex-start;flex-direction:column}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}