.difficulty{display:grid;gap:8px;--diff-c0: var(--chip);--diff-c1: #7b9be5;--diff-c2: var(--primary);--diff-c3: #22366a;--diff-deep: var(--mark-dot);--diff-tide: var(--diff-c0);--bar-min: 30px;--bar-range: 64px}:root[data-theme=rose] .difficulty{--diff-c0: var(--chip);--diff-c1: #e28fa9;--diff-c2: var(--primary);--diff-c3: #582537;--diff-deep: var(--mark-dot)}:root[data-theme=dark] .difficulty{--diff-deep: var(--accent)}@media(prefers-color-scheme:dark){:root:not([data-theme]) .difficulty{--diff-deep: var(--accent)}}:root .difficulty[data-few=true]{--bar-min: 40px;--bar-range: 50px;--diff-c0: color-mix(in oklch, var(--chip), var(--diff-c1) 45%)}.diff-title{margin:0;font:700 var(--fs-caption)/1.3 var(--body);letter-spacing:.02em;color:var(--muted)}.diff-record{margin:0;font:700 var(--fs-small)/1.3 var(--body);color:var(--ink-2)}.diff-record b{color:var(--ink)}.diff-track{position:relative;display:grid;grid-auto-rows:auto;grid-template-rows:auto auto;column-gap:3px;row-gap:6px;margin:0 auto;padding:26px 0 0;width:100%;box-sizing:border-box}.diff-tide{grid-column:1 / -1;grid-row:1;position:relative;pointer-events:none}.diff-tide-fill{position:absolute;left:0;bottom:0;height:10px;width:var(--w, 0%);overflow:visible;border-radius:0 var(--r-sm) var(--r-sm) 0;background:color-mix(in oklch,var(--diff-tide) 55%,transparent);transition:width .5s var(--ease-tide)}.diff-tide.is-hidden .diff-tide-fill{width:0%}.diff-tide-crest{position:absolute;left:0;right:0;top:-1px;width:100%;height:6px;overflow:visible;color:color-mix(in oklch,var(--diff-tide) 20%,white 55%)}.diff-tide-crest path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}.diff-col{position:relative;z-index:1;grid-row:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;padding:0;border:0;border-radius:var(--r-sm);background:none;font:inherit;color:var(--ink);cursor:pointer;transition:transform .2s var(--ease-out)}.diff-col[aria-checked=true]{transform:translateY(-6px)}.diff-badge{position:relative;z-index:1;display:grid;place-items:center;width:30px;height:30px;border-radius:var(--r-pill);background:var(--surface);box-shadow:var(--shadow-soft);color:var(--ink-2);font:800 var(--fs-caption)/1 var(--body);transition:box-shadow .2s var(--ease-out),transform .2s var(--ease-out)}.diff-num{line-height:1}.diff-mark{position:absolute;right:-3px;bottom:-3px;width:15px;height:15px;display:grid;place-items:center;border-radius:var(--r-pill);background:var(--surface);box-shadow:0 0 0 2px var(--surface)}.diff-mark-beaten{background:var(--ok-dot)}.diff-mark-beaten:before{content:"\2713";font:800 9px/1 var(--body);color:#fff}.diff-mark-played:before{content:"";width:6px;height:6px;border-radius:var(--r-pill);background:var(--muted)}.diff-bar{width:32px;max-width:100%;height:calc(var(--bar-min) + var(--t) * var(--bar-range));border-radius:var(--r-sm) var(--r-sm) 4px 4px;background:color-mix(in oklch,color-mix(in oklch,color-mix(in oklch,var(--diff-c0),var(--diff-c1) calc(clamp(0,var(--tf, 0) * 3,1)*100%)),var(--diff-c2) calc(clamp(0,var(--tf, 0) * 3 - 1,1)*100%)),var(--diff-c3) calc(clamp(0,var(--tf, 0) * 3 - 2,1)*100%));box-shadow:0 0 0 0 transparent;transition:height .2s var(--ease-out),box-shadow .2s var(--ease-out)}:root[data-theme=dark] .diff-bar{background:color-mix(in oklch,color-mix(in oklch,var(--chip),var(--link) calc(min(var(--t),.5)*200%)),var(--accent) calc(max(var(--t) - .5,0)*200%))}@media(prefers-color-scheme:dark){:root:not([data-theme]) .diff-bar{background:color-mix(in oklch,color-mix(in oklch,var(--chip),var(--link) calc(min(var(--t),.5)*200%)),var(--accent) calc(max(var(--t) - .5,0)*200%))}}.diff-col[aria-checked=true] .diff-badge{color:var(--ink);box-shadow:0 0 0 2.5px var(--ink) inset,var(--lift)}.diff-col[aria-checked=true] .diff-bar{box-shadow:0 0 0 2.5px var(--ink) inset}.diff-col[data-deepest=true] .diff-bar{background:var(--diff-deep);box-shadow:0 0 0 2px color-mix(in oklch,var(--diff-deep) 70%,black 15%) inset}.diff-col[data-deepest=true][aria-checked=true] .diff-bar{background:var(--diff-deep);box-shadow:0 0 0 2.5px var(--ink) inset,0 0 0 3px color-mix(in oklch,var(--diff-deep) 35%,transparent),0 0 20px 2px color-mix(in oklch,var(--diff-deep) 65%,transparent)}.diff-label{grid-row:2;margin:0;max-width:100%;text-align:center;word-break:keep-all;overflow-wrap:normal;font:700 var(--fs-small)/1.25 var(--body);color:var(--ink-2)}.diff-word{display:inline-block}.diff-col[aria-checked=true]+.diff-label{color:var(--ink);font-weight:800}.diff-recommended{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);padding:2px 7px;border-radius:var(--r-pill);background:var(--citron);color:var(--on-citron);font:800 var(--fs-caption)/1.5 var(--body);letter-spacing:.03em;white-space:nowrap}.diff-hint{margin:0;min-height:calc(var(--fs-small) * 1.5);font-size:var(--fs-small);line-height:1.5;color:var(--ink-2)}@media(prefers-reduced-motion:reduce){.diff-col,.diff-badge,.diff-bar,.diff-tide-fill{transition:none!important}}