@layer reset,tokens,base;@layer components{.kn-player{--kn-bg:var(--md-sys-color-surface-container);--kn-edge:var(--md-sys-color-on-surface);--kn-rope:var(--md-sys-color-tertiary-fixed-dim);--kn-work:var(--md-sys-color-primary-fixed-dim);--kn-now:color-mix(in srgb, var(--md-sys-color-primary) 80%, var(--md-sys-color-surface-container-lowest));--kn-done:color-mix(in srgb, var(--md-sys-color-primary-fixed-dim) 35%, var(--kn-bg));--kn-arrow:var(--md-sys-color-tertiary);--kn-obj:color-mix(in srgb, var(--md-sys-color-on-surface) 22%, var(--kn-bg));--kn-obj-line:var(--md-sys-color-outline);--kn-ground:var(--md-sys-color-outline-variant);gap:16px;min-width:0;display:grid;container-type:inline-size}.kn-modes{width:100%;display:flex}.kn-modes>.vc-btn{flex:1 1 0}@container (width<=440px){.kn-modes>.vc-btn{--_pad:8px}.kn-modes>.vc-btn>.vc-icon{display:none}}.kn-view{gap:12px;min-width:0;display:grid}.kn-view[hidden]{display:none}.kn-stage{border-radius:var(--md-sys-shape-corner-extra-large);background:var(--kn-bg);touch-action:pan-y;-webkit-user-select:none;user-select:none;margin:0;padding:8px;overflow:hidden}.kn-art svg{width:100%;height:min(50svh,460px);display:block}.kn-counter{color:var(--md-sys-color-on-surface-variant);margin:0}.kn-sentence{text-wrap:pretty;min-height:2lh;margin:0;font-weight:600}.kn-nav{grid-template-columns:1fr 1fr;gap:8px;display:grid}.kn-nav>.vc-btn{width:100%}.kn-slider{height:48px;display:block}.kn-controls{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.kn-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,156px),1fr));gap:12px;margin:0;padding:0;list-style:none;display:grid}.kn-list-item{cursor:pointer;border-radius:var(--md-sys-shape-corner-large);background:var(--kn-bg);width:100%;min-height:48px;color:var(--md-sys-color-on-surface);font:inherit;text-align:start;border:0;gap:8px;padding:8px;display:grid}.kn-list-item[aria-current=step]{box-shadow:inset 0 0 0 2px var(--md-sys-color-primary)}.kn-list-item:focus-visible{outline:3px solid var(--md-sys-color-secondary);outline-offset:2px}.kn-list-art svg{width:100%;height:168px;display:block}.kn-list-text{gap:4px;display:grid}.kn-list-n{color:var(--md-sys-color-on-surface-variant)}.kn-rope-edge{stroke:var(--kn-edge)}.kn-rope{stroke:var(--kn-rope)}.kn-rope-work{stroke:var(--kn-work)}.kn-rope-now{stroke:var(--kn-now)}.kn-rope-done{stroke:var(--kn-done)}.kn-arrow{fill:var(--kn-arrow)}.kn-objects>rect,.kn-objects>ellipse{fill:var(--kn-obj);stroke:var(--kn-obj-line);stroke-width:1.5px}.kn-objects>.kn-obj-ground{fill:var(--kn-ground);stroke:none}.kn-objects>.kn-obj-ring{fill:none;stroke:var(--kn-obj-line);stroke-width:3px}.kn-objects>.kn-obj-line{fill:var(--kn-obj-line);stroke:none}:root[data-theme=dark] .kn-player{--kn-edge:color-mix(in srgb, var(--md-sys-color-outline) 70%, var(--kn-bg));--kn-rope:var(--md-sys-color-tertiary);--kn-work:var(--md-sys-color-primary);--kn-now:var(--md-sys-color-primary-fixed);--kn-done:color-mix(in srgb, var(--md-sys-color-primary) 30%, var(--kn-bg));--kn-arrow:var(--md-sys-color-tertiary-fixed);--kn-obj:color-mix(in srgb, var(--md-sys-color-on-surface) 18%, var(--kn-bg))}}@layer layout,utilities;@media (prefers-color-scheme:dark){@layer components{:root:not([data-theme=light]) .kn-player{--kn-edge:color-mix(in srgb, var(--md-sys-color-outline) 70%, var(--kn-bg));--kn-rope:var(--md-sys-color-tertiary);--kn-work:var(--md-sys-color-primary);--kn-now:var(--md-sys-color-primary-fixed);--kn-done:color-mix(in srgb, var(--md-sys-color-primary) 30%, var(--kn-bg));--kn-arrow:var(--md-sys-color-tertiary-fixed);--kn-obj:color-mix(in srgb, var(--md-sys-color-on-surface) 18%, var(--kn-bg))}}}