@property --gap{syntax:"<length>";inherits:false;initial-value:8px}@layer components{.cover{isolation:isolate;aspect-ratio:16/10;border-radius:calc(var(--radius-surface) * var(--corner-scale));corner-shape:var(--corner-shape);background:var(--color-surface-tray);color:var(--color-text-strong);font:var(--font-weight-control) .84375rem/1 var(--font-family-sans);-webkit-user-select:none;user-select:none;pointer-events:none;font-style:normal;display:block;position:relative;overflow:hidden;container-type:inline-size;&:after{content:"";z-index:1;border-radius:inherit;corner-shape:inherit;box-shadow:inset 0 0 0 .5px var(--color-line-hair), inset 0 1px 2px -1px var(--color-shade-2);pointer-events:none;position:absolute;inset:0;@media (forced-colors:active){outline-offset:-1px;outline:1px solid canvastext}}}.cover-art{z-index:0;width:240px;height:150px;translate:-50% -50%;scale:min(1, tan(atan2(100cqw, 240px)));place-content:center;place-items:center;display:grid;position:absolute;top:50%;left:50%}.cover[data-pending] .cover-art:before{content:"";border-radius:calc(var(--radius-control) * var(--corner-scale));corner-shape:var(--corner-shape);outline:1px dashed var(--color-line-strong);outline-offset:-1px;width:72px;height:48px}.cover-stack,.cover-line{gap:var(--gap);min-width:0;display:flex}.cover-stack{flex-direction:column}.cover-line{align-items:center}.cover-sheet,.cover-float,.cover-well,.cover-control,.cover-row,.cover-media{box-sizing:border-box;border-radius:calc(var(--r) * var(--corner-scale));corner-shape:var(--corner-shape);position:relative}.cover-sheet{--r:var(--radius-surface);background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);box-shadow:var(--shadow-raised)}.cover-float{--r:var(--radius-surface);background:var(--color-surface-floating);box-shadow:var(--shadow-floating)}.cover-well{--r:var(--radius-control);background:var(--color-surface-inset);box-shadow:var(--shadow-pressed);&.cover-focus{background:var(--color-surface-raised);box-shadow:inset 0 0 0 .5px var(--color-line-mark), 0 0 0 .5px var(--color-line-mark), 0 0 0 3.5px light-dark(oklch(22% .002 265/.09),oklch(100% 0 none/.11))}}.cover-media{--r:calc(var(--radius-surface) - 4px);background:linear-gradient(160deg, color-mix(in oklch, var(--color-text-strong) 5%, transparent), color-mix(in oklch, var(--color-text-strong) 13%, transparent));box-shadow:inset 0 0 0 .5px var(--color-line-contour)}.cover-control{--r:var(--radius-control);--glyph:16px;background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);height:38px;box-shadow:var(--shadow-raised);flex:none;justify-content:center;align-items:center;gap:8px;padding:0 16px;display:inline-flex;&.cover-control-sm{--r:var(--radius-control-sm);--glyph:14px;gap:6px;height:32px;padding:0 12px}&.cover-square{aspect-ratio:1;padding:0}&.cover-quiet{box-shadow:none;color:var(--color-text-body);background:0 0}&.cover-pressed{background:var(--color-surface-inset);box-shadow:var(--shadow-pressed);color:var(--color-text-strong)}&.cover-ink{background:light-dark(oklch(20.5% .003 265),oklch(92% .0032 265)) linear-gradient(light-dark(oklch(31% .0026 265),oklch(98.8% 0 none)),light-dark(oklch(20.5% .003 265),oklch(92% .0032 265)));box-shadow:inset 0 .5px light-dark(oklch(100% 0 none/.3),oklch(100% 0 none)),inset 0 1px light-dark(oklch(100% 0 none/.1),oklch(100% 0 none)),inset 0 -1px 2px -1px light-dark(oklch(0% 0 none/.5),oklch(0% 0 none/.2)),0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.55)),0 1px 2px -1px light-dark(oklch(18% 0 none/.3),oklch(0% 0 none/.55)),0 2px 4px -2px light-dark(oklch(18% 0 none/.2),oklch(0% 0 none/.4)),0 4px 8px -4px light-dark(oklch(18% 0 none/.14),oklch(0% 0 none/.34))}}.cover-ink{--cover-bar:color-mix(in oklch, var(--color-text-inverse) 92%, transparent);background:var(--color-surface-inverse);color:var(--color-text-inverse)}.cover-row{--r:var(--radius-control-sm);--glyph:16px;height:32px;color:var(--color-text-muted);align-items:center;gap:10px;padding:0 8px;display:flex;&.cover-row-active{background:var(--color-surface-chip);color:var(--color-text-strong)}}.cover-bar{background:var(--cover-bar,var(--color-line-mark));border-radius:999px;flex:none;height:6px;display:block;&.cover-bar-strong{background:var(--cover-bar,color-mix(in oklch, var(--color-text-strong) 74%, transparent))}&.cover-bar-faint{background:var(--cover-bar,var(--color-line-strong))}}.cover-rule{background:var(--color-line-divider);flex:none;align-self:stretch;height:1px;display:block;&.cover-rule-upright{width:1px;height:auto;margin:8px 4px}}.cover-glyph{width:var(--glyph,16px);height:var(--glyph,16px);fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}.cover-caret{background:var(--color-text-strong);border-radius:1px;flex:none;width:1.5px;height:16px;display:block}.cover-switch{background:var(--color-surface-inset);width:36px;height:22px;box-shadow:var(--shadow-pressed), inset 0 0 0 .5px var(--color-line-contour);border-radius:999px;flex:none;display:block;position:relative;&:before{content:"";width:16px;height:16px;box-shadow:0 0 0 .5px var(--color-line-strong), 0 1px 2px -.5px var(--color-shade-1), 0 2px 4px -1px var(--color-shade-2);background:linear-gradient(oklch(100% 0 none),oklch(96.5% .0011 265));border-radius:999px;position:absolute;top:3px;left:3px}&.cover-switch-on{background:var(--color-surface-inverse);box-shadow:inset 0 1px 2px oklch(0% 0 none/.3),0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.5));&:before{background:linear-gradient(light-dark(oklch(100% 0 none),oklch(26% .0024 265)),light-dark(oklch(96.5% .0011 265),oklch(20% .002 265)));translate:14px;box-shadow:0 0 0 .5px oklch(0% 0 none/.3),0 1px 2px -.5px oklch(0% 0 none/.35),0 2px 4px -1px oklch(0% 0 none/.25)}}}.cover-tab{align-self:stretch;align-items:center;display:flex;&.cover-tab-current{box-shadow:inset 0 -2px 0 var(--color-text-strong)}}.cover-link{align-items:center;gap:3px;display:flex;position:relative;&:after{content:"";background:var(--color-text-strong);height:1px;position:absolute;inset:auto 0 -6px}}.cover-fade{mask-image:linear-gradient(#0000,#000 34% 66%,#0000)}.cover-thumb{background:var(--color-line-mark);border-radius:999px;width:3px;display:block;position:absolute}.cover-scrim{background:var(--color-surface-scrim);position:absolute;inset:-100vmax}.cover-flat{--r:var(--radius-control-lg);background:var(--color-surface-raised);box-shadow:var(--shadow-flat);&.cover-chosen{box-shadow:inset 0 1px 0 var(--color-highlight), 0 0 0 .5px var(--color-text-strong), 0 0 0 1px color-mix(in oklab, var(--color-text-strong) 22%, transparent), 0 1px 2px -1px var(--color-shade-1), 0 2px 4px -2px var(--color-shade-2)}}.cover-tone{--r:var(--radius-control-lg);background:var(--color-surface-chip);box-shadow:inset 0 0 0 .5px var(--color-line-contour);&.cover-skeleton{--r:var(--radius-chip);box-shadow:none}}.cover-dashed{--r:var(--radius-control-lg);border:1px dashed var(--color-line-strong);background:var(--color-surface-inset)}.cover-flat,.cover-tone,.cover-dashed,.cover-check,.cover-badge,.cover-key,.cover-day,.cover-tip{box-sizing:border-box;border-radius:calc(var(--r) * var(--corner-scale));corner-shape:var(--corner-shape);position:relative}.cover-plan{--r:var(--radius-control);overflow:hidden;& .cover-bar{height:4px}& .cover-rule-upright{margin:0}}.cover-center{place-items:center;display:grid}.cover-row.cover-row-current{background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);box-shadow:var(--shadow-raised);color:var(--color-text-strong)}.cover-check{--r:calc(var(--radius-chip) - 1px);background:var(--color-surface-inset);width:18px;height:18px;box-shadow:var(--shadow-pressed), inset 0 0 0 .5px var(--color-line-strong);flex:none;place-items:center;display:grid;&.cover-check-round{corner-shape:round;border-radius:999px}&.cover-check-on{background:var(--color-surface-inverse);box-shadow:inset 0 .5px 0 light-dark(oklch(100% 0 none/.28),oklch(100% 0 none)), 0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.5)), 0 1px 2px -1px var(--color-shade-1);&:after{content:"";background:var(--color-text-inverse);width:10px;height:10px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}&.cover-check-round:after{border-radius:999px;width:6px;height:6px;mask:none}}}.cover-track{--fill:50%;background:linear-gradient(90deg, var(--color-surface-inverse) var(--fill), transparent 0) var(--color-surface-inset);height:6px;box-shadow:var(--shadow-pressed);border-radius:999px;display:block;position:relative}.cover-knob{top:50%;left:var(--fill);width:18px;height:18px;box-shadow:0 0 0 .5px var(--color-line-strong), 0 1px 2px -.5px var(--color-shade-1), 0 2px 4px -1px var(--color-shade-2), 0 4px 8px -4px var(--color-shade-3);background:linear-gradient(oklch(100% 0 none),oklch(96.5% .0011 265));border-radius:999px;position:absolute;translate:-50% -50%}.cover-ring{--fill:50%;background:conic-gradient(var(--color-surface-inverse) var(--fill), color-mix(in oklab, var(--color-surface-inverse) 11%, transparent) 0);border-radius:999px;flex:none;width:40px;height:40px;display:block;mask:radial-gradient(farthest-side,#0000 calc(100% - 4.5px),#000 calc(100% - 4px))}.cover-spinner{--d:36px;width:var(--d);height:var(--d);background:conic-gradient(from 90deg, color-mix(in oklab, currentColor 12%, transparent) 0 18%, currentColor);mask:radial-gradient(farthest-side, transparent calc(100% - var(--d) / 9 - .5px), black calc(100% - var(--d) / 9), black calc(100% - .5px), transparent);border-radius:999px;flex:none;display:block}.cover-chip{--glyph:14px;background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);height:28px;box-shadow:var(--shadow-raised);border-radius:999px;flex:none;align-items:center;gap:6px;padding:0 10px;display:inline-flex;&.cover-ink{background:var(--color-surface-inverse);box-shadow:inset 0 .5px 0 light-dark(oklch(100% 0 none/.28),oklch(100% 0 none)), 0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.5)), 0 1px 2px -1px var(--color-shade-1), 0 2px 4px -2px var(--color-shade-2)}}.cover-badge{--r:var(--radius-chip);--glyph:14px;background:var(--color-surface-chip);height:22px;box-shadow:inset 0 0 0 .5px var(--color-line-contour);color:var(--color-text-body);flex:none;align-items:center;gap:5px;padding:0 7px;display:inline-flex}.cover-key{--r:var(--radius-chip);background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);min-width:22px;height:22px;box-shadow:inset 0 1px 0 var(--color-highlight), inset 0 -1px 0 var(--color-line-hair), 0 0 0 .5px var(--color-line-strong), 0 1px 1px -.5px var(--color-shade-1), 0 2px 2px -1px var(--color-shade-2);font:400 11px/1 var(--font-family-mono);flex:none;place-items:center;padding:0 5px;display:inline-grid}.cover-dot{width:var(--d,7px);height:var(--d,7px);background:var(--color-line-mark);border-radius:999px;flex:none;display:block;&.cover-ink{background:var(--color-surface-inverse)}}.cover-avatar{width:var(--d,32px);height:var(--d,32px);background:linear-gradient(var(--color-surface-chip), var(--color-surface-chip)) var(--cover-surface,var(--color-surface-tray));color:var(--color-text-body);font:var(--font-weight-control) calc(var(--d,32px) * .4)/1 var(--font-family-sans);border-radius:999px;flex:none;place-items:center;display:grid;&.cover-avatar-photo{background:linear-gradient(160deg, color-mix(in oklch, var(--color-text-strong) 14%, var(--cover-surface,var(--color-surface-tray))), color-mix(in oklch, var(--color-text-strong) 34%, var(--cover-surface,var(--color-surface-tray))));box-shadow:inset 0 0 0 1px light-dark(oklch(0% 0 none/.1),oklch(100% 0 none/.1))}}.cover-avatars{display:flex;& .cover-avatar{box-shadow:0 0 0 2px var(--cover-surface,var(--color-surface-tray))}& .cover-avatar-photo{box-shadow:inset 0 0 0 1px light-dark(oklch(0% 0 none/.1),oklch(100% 0 none/.1)), 0 0 0 2px var(--cover-surface,var(--color-surface-tray))}& .cover-avatar+.cover-avatar{margin-inline-start:calc(var(--d,32px) * -.25)}}.cover-star{background:var(--color-line-strong);flex:none;width:20px;height:20px;display:block;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.6c.4 0 .8.2 1 .6l2.5 5.2 5.7.8c.9.1 1.3 1.3.6 1.9l-4.1 4 1 5.7c.2.9-.8 1.6-1.6 1.2L12 19.3l-5.1 2.7c-.8.4-1.8-.3-1.6-1.2l1-5.7-4.1-4c-.7-.6-.3-1.8.6-1.9l5.7-.8L11 3.2c.2-.4.6-.6 1-.6Z'/%3E%3C/svg%3E") 50%/contain no-repeat;&.cover-ink{background:var(--color-text-strong)}}.cover-marker{background:var(--color-surface-inset);width:24px;height:24px;box-shadow:var(--shadow-pressed);color:var(--color-text-muted);font:var(--font-weight-control) 11.5px/1 var(--font-family-sans);font-variant-numeric:tabular-nums;border-radius:999px;flex:none;place-items:center;display:grid;&.cover-marker-current{background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);box-shadow:0 0 0 .5px var(--color-text-strong), 0 0 0 1px color-mix(in oklab, var(--color-text-strong) 22%, transparent), 0 1px 2px -1px var(--color-shade-1), 0 2px 4px -2px var(--color-shade-2);color:var(--color-text-strong)}&.cover-marker-done{background:var(--color-surface-inverse);box-shadow:none;&:after{content:"";background:var(--color-text-inverse);width:10px;height:10px;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M2 5.2 4.1 7.3 8 2.8' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}}}.cover-day{--r:var(--radius-control-sm);flex:none;place-items:center;width:36px;height:36px;display:grid;&.cover-day-today:after{content:"";background:var(--color-text-strong);border-radius:999px;width:3px;height:3px;position:absolute;bottom:5px;left:calc(50% - 1.5px)}&.cover-ink{box-shadow:inset 0 .5px 0 light-dark(oklch(100% 0 none/.28),oklch(100% 0 none)), 0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.5)), 0 1px 2px -1px var(--color-shade-1)}}.cover-tip{--r:calc(var(--radius-chip) + 1px);--cover-bar:color-mix(in oklab, currentColor 88%, transparent);background:light-dark(var(--color-surface-inverse),oklch(33% .0026 265));height:26px;color:light-dark(var(--color-text-inverse),var(--color-text-strong));box-shadow:inset 0 .5px 0 light-dark(oklch(100% 0 none/.22),oklch(100% 0 none/.12)), 0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.6)), 0 2px 4px -2px var(--color-shade-1), 0 4px 8px -4px var(--color-shade-2);flex:none;align-items:center;gap:6px;padding:0 8px;display:inline-flex}.cover-bar.cover-bar-figure{border-radius:5px;height:16px}.cover-fade-inline{mask-image:linear-gradient(90deg,#0000,#000 22% 78%,#0000)}.cover-end{margin-inline-start:auto}.cover-row.cover-row-checked{color:var(--color-text-strong)}.cover-guide{box-shadow:inset 1px 0 0 var(--color-line-divider);margin-inline-start:13px;padding-inline-start:5px}.cover-round{corner-shape:round;border-radius:999px}.cover-control.cover-control-lg{--r:var(--radius-control-lg);--glyph:18px;height:44px;padding:0 20px}.cover-rule.cover-ink{background:var(--color-text-strong);position:relative}.cover-grip{background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);width:6px;height:24px;box-shadow:var(--shadow-raised);border-radius:999px;position:absolute;top:calc(50% - 12px);left:-2.5px}.cover-sheet.cover-focus{box-shadow:var(--shadow-lifted), 0 0 0 .5px var(--color-line-mark), 0 0 0 3.5px light-dark(oklch(22% .002 265/.08),oklch(100% 0 none/.1))}.cover-swatch{--swatch:currentColor;background:var(--swatch);border-radius:999px;flex:none;width:24px;height:24px;display:block;box-shadow:inset 0 0 0 .5px light-dark(oklch(0% 0 none/.16),oklch(100% 0 none/.2)),inset 0 1px oklch(100% 0 none/.18);&.cover-swatch-on{box-shadow:inset 0 0 0 .5px light-dark(oklch(0% 0 none/.16),oklch(100% 0 none/.2)), inset 0 1px 0 oklch(100% 0 none/.18), 0 0 0 2px var(--cover-surface,var(--color-surface-tray)), 0 0 0 3.5px var(--color-text-strong)}}.cover-band{background:var(--color-surface-tray);box-shadow:inset 0 -.5px 0 var(--color-line-contour)}.cover-rail{box-shadow:inset 1px 0 0 var(--color-line-divider)}.cover-rail-current{position:relative;&:before{content:"";background:var(--color-text-strong);border-radius:999px;width:1.5px;position:absolute;inset-block:5px;inset-inline-start:0}}.cover-quote{padding-inline-start:18px;position:relative;&:before{content:"";background:var(--color-line-strong);border-radius:999px;width:2px;position:absolute;inset-block:0;inset-inline-start:0}}.cover-bubble{--r:1.125rem;box-sizing:border-box;border-radius:calc(var(--r) * var(--corner-scale));corner-shape:var(--corner-shape);background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);box-shadow:var(--shadow-raised);border-end-start-radius:calc(.375rem * var(--corner-scale));position:relative;&.cover-bubble-sent{--cover-bar:color-mix(in oklch, var(--color-text-inverse) 92%, transparent);box-shadow:inset 0 .5px 0 light-dark(oklch(100% 0 none/.28),oklch(100% 0 none)), 0 0 0 .5px light-dark(oklch(15% .003 265),oklch(0% 0 none/.5)), 0 1px 2px -1px var(--color-shade-1), 0 2px 4px -2px var(--color-shade-2);background:linear-gradient(light-dark(oklch(29% .0026 265),oklch(98% .001 265)),light-dark(oklch(21% .0022 265),oklch(92% .0018 265)));border-end-end-radius:calc(.375rem * var(--corner-scale));border-end-start-radius:calc(var(--r) * var(--corner-scale))}}.cover-mark{border-radius:calc(.1875rem * var(--corner-scale));corner-shape:var(--corner-shape);background:light-dark(oklch(22% .002 265/.1),oklch(100% 0 none/.16));flex:none;align-items:center;height:18px;margin-inline:-3px;padding:0 3px;display:inline-flex;&.cover-ink{background:var(--color-surface-inverse)}}.cover-fade-foot{mask-image:linear-gradient(#000 30%,#0000)}.cover-pill{--glyph:20px;width:56px;height:28px;color:var(--color-text-muted);border-radius:999px;place-items:center;display:grid;&.cover-pill-current{background:var(--color-surface-chip);box-shadow:inset 0 0 0 .5px var(--color-line-hair);color:var(--color-text-strong)}}.cover-page{box-sizing:border-box;border-radius:calc(3px * var(--corner-scale));corner-shape:var(--corner-shape);background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);width:28px;height:36px;box-shadow:inset 0 .5px 0 var(--color-highlight), 0 0 0 .5px var(--color-line-strong), 0 1px 2px -1px var(--color-shade-1), 0 2px 4px -2px var(--color-shade-2);flex:none;justify-content:center;align-items:flex-end;padding-bottom:7px;display:flex;position:relative;overflow:clip;@supports (corner-shape:bevel){corner-start-end-shape:bevel;border-start-end-radius:9px;&:after{content:"";background:var(--color-surface-tray);width:9px;height:9px;box-shadow:0 0 0 .5px var(--color-line-strong), -1px 1px 2px -.5px var(--color-shade-1);border-end-start-radius:1.5px;position:absolute;inset-block-start:0;inset-inline-end:0}}}.cover-column{height:var(--h,50%);border-radius:calc(var(--radius-chip) * var(--corner-scale)) calc(var(--radius-chip) * var(--corner-scale)) 0 0;corner-shape:var(--corner-shape);background:color-mix(in oklab, var(--color-surface-inverse) 15%, var(--color-surface-raised));box-shadow:inset 0 0 0 .5px color-mix(in oklab, var(--color-surface-inverse) 12%, transparent);flex:1 1 0;display:block;&.cover-ink{background:var(--color-surface-inverse);box-shadow:inset 0 .5px light-dark(oklch(100% 0 none/.3),oklch(100% 0 none))}}.cover-marks{background:radial-gradient(circle at 5.5px 50%, var(--color-line-strong) 5px, transparent 5.5px), radial-gradient(circle at 24.5px 50%, var(--color-line-strong) 5px, transparent 5.5px), radial-gradient(circle at 43.5px 50%, var(--color-line-strong) 5px, transparent 5.5px);flex:none;width:49px;height:11px;display:block}.cover-wheel{width:48px;color:var(--color-text-strong);font:var(--font-weight-control) 15px/1 var(--font-family-sans);font-variant-numeric:tabular-nums;grid-auto-rows:36px;place-items:center;display:grid;mask-image:linear-gradient(#0000 4%,#000 40% 60%,#0000 96%)}.cover-cell{border-radius:calc(3px * var(--corner-scale));corner-shape:var(--corner-shape);background:color-mix(in oklab, var(--color-surface-inverse) var(--tone,7%), var(--color-surface-raised));width:12px;height:12px;box-shadow:inset 0 0 0 .5px color-mix(in oklab, var(--color-surface-inverse) 10%, transparent);flex:none;display:block}.cover-track.cover-span{background:linear-gradient(90deg, transparent var(--from,25%), var(--color-surface-inverse) 0, var(--color-surface-inverse) var(--to,75%), transparent 0) var(--color-surface-inset)}.cover-cite{background:var(--color-surface-chip);min-width:16px;height:16px;color:var(--color-text-body);box-shadow:inset 0 0 0 .5px var(--color-line-contour);font:var(--font-weight-control) 10px/1 var(--font-family-sans);border-radius:999px;flex:none;place-items:center;display:grid;translate:0 -3px;&.cover-ink{background:var(--color-surface-inverse);color:var(--color-text-inverse);box-shadow:none}}.cover-divide{inset-block:0;left:var(--fill,50%);background:oklch(100% 0 none);width:1.5px;position:absolute;translate:-50%;box-shadow:0 0 0 .5px oklch(0% 0 none/.22)}.cover-bar.cover-bar-struck{background:var(--cover-bar,var(--color-line-strong));position:relative;&:after{content:"";background:var(--color-text-muted);height:1px;position:absolute;inset:50% -3px auto;translate:0 -50%}}.cover-arc{--fill:.5;--d:96px;--w:7px;--radius:calc((var(--d) - var(--w)) / 2);width:var(--d);height:calc(var(--d) * .75 + var(--w) / 4);flex:none;display:block;position:relative;&:before,&:after{content:"";height:var(--d);mask:radial-gradient(farthest-side, transparent calc(100% - var(--w) - .5px), black calc(100% - var(--w)), black calc(100% - .5px), transparent);border-radius:999px;position:absolute;inset:0 0 auto}&:before{background:radial-gradient(circle at calc(50% + var(--radius) * sin(240deg)) calc(50% - var(--radius) * cos(240deg)), var(--color-surface-inverse) calc(var(--w) / 2 - .5px), transparent calc(var(--w) / 2)), radial-gradient(circle at calc(50% + var(--radius) * sin(480deg)) calc(50% - var(--radius) * cos(480deg)), var(--color-surface-inverse) calc(var(--w) / 2 - .5px), transparent calc(var(--w) / 2)), conic-gradient(from 240deg, var(--color-surface-inverse) 240deg, transparent 0);opacity:.12}&:after{--end:calc(240deg + var(--fill) * 240deg);background:radial-gradient(circle at calc(50% + var(--radius) * sin(240deg)) calc(50% - var(--radius) * cos(240deg)), var(--color-surface-inverse) calc(var(--w) / 2 - .5px), transparent calc(var(--w) / 2)), radial-gradient(circle at calc(50% + var(--radius) * sin(var(--end))) calc(50% - var(--radius) * cos(var(--end))), var(--color-surface-inverse) calc(var(--w) / 2 - .5px), transparent calc(var(--w) / 2)), conic-gradient(from 240deg, var(--color-surface-inverse) calc(var(--fill) * 240deg), transparent 0)}}.cover-part,.cover-legend{background:color-mix(in oklab, var(--color-surface-inverse) var(--tone,100%), transparent);display:block}.cover-part{flex:var(--w,1) 0 0;border-radius:1.5px;height:8px;&:first-child{border-start-start-radius:999px;border-end-start-radius:999px}&:last-child{border-start-end-radius:999px;border-end-end-radius:999px}&.cover-well{corner-shape:round;background:var(--color-surface-inset);border-radius:1.5px 999px 999px 1.5px}}.cover-legend{border-radius:calc(2px * var(--corner-scale));corner-shape:var(--corner-shape);flex:none;width:8px;height:8px;&.cover-well{background:var(--color-surface-inset);box-shadow:inset 0 0 0 .5px var(--color-line-mark)}}.cover-ticket,.cover-stub{box-sizing:border-box;border-radius:calc(var(--radius-surface) * var(--corner-scale));corner-shape:var(--corner-shape);box-shadow:var(--shadow-raised);position:relative}.cover-ticket{background:var(--color-surface-raised);clip-path:inset(-40px -40px 0);border-end-end-radius:0;border-end-start-radius:0}.cover-stub{background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);clip-path:inset(0 -40px -40px);border-start-start-radius:0;border-start-end-radius:0;&:before{content:"";background:repeating-linear-gradient(90deg, var(--color-line-strong) 0 4px, transparent 0 8px);height:1px;position:absolute;inset:0 12px auto}}@supports (corner-shape:scoop){.cover-ticket{corner-end-start-shape:scoop;corner-end-end-shape:scoop;border-end-end-radius:8px;border-end-start-radius:8px}.cover-stub{corner-start-start-shape:scoop;corner-start-end-shape:scoop;border-start-start-radius:8px;border-start-end-radius:8px}}.cover-device{--d:120px;box-sizing:border-box;width:var(--d);aspect-ratio:9/19.5;padding:calc(var(--d) * .03);border-radius:calc(var(--d) * .14 * var(--corner-scale));corner-shape:var(--corner-shape);background:linear-gradient(180deg, var(--color-surface-raised), var(--color-surface-raised-low)) var(--color-surface-raised-low);box-shadow:inset 0 0 0 1px var(--color-line-hair), var(--shadow-lifted);flex:none;display:block;position:relative;&:before{content:"";z-index:1;top:calc(var(--d) * .06);aspect-ratio:3.4;background:var(--color-surface-raised-low);width:30%;box-shadow:var(--shadow-pressed);border-radius:999px;position:absolute;left:35%}}.cover-screen{border-radius:calc(var(--d) * .14 * var(--corner-scale) - var(--d) * .03);corner-shape:var(--corner-shape);background:linear-gradient(160deg, color-mix(in oklch, var(--color-text-strong) 5%, transparent), color-mix(in oklch, var(--color-text-strong) 13%, transparent));width:100%;height:100%;box-shadow:inset 0 0 0 .5px var(--color-line-contour);display:block}.cover-elbow{box-sizing:border-box;border-block-end:1px solid var(--color-line-divider);border-inline-start:1px solid var(--color-line-divider);border-end-start-radius:10px;flex:none;display:block}.cover-action{--glyph:16px;border-inline-start:1px solid var(--color-line-hair);width:44px;color:var(--color-text-muted);flex:none;place-items:center;display:grid}.cover-mark.cover-mark-inserted{box-shadow:inset 0 -1px 0 var(--color-line-mark)}.cover-lane{width:calc(var(--to,100%) - var(--from,0%));height:16px;border-radius:calc(4px * var(--corner-scale));corner-shape:var(--corner-shape);background:color-mix(in oklab, var(--color-surface-inverse) 13%, transparent);margin-inline-start:var(--from,0%);display:block;&.cover-ink{background:var(--color-surface-inverse)}}.cover-tick{background:color-mix(in oklab, var(--color-surface-inverse) var(--tone,22%), transparent);border-radius:1.5px;flex:1 1 0;height:28px;display:block}.cover-pin{background:var(--color-surface-inverse);width:20px;height:20px;color:var(--color-text-inverse);box-shadow:0 0 0 1.5px var(--color-on-image), 0 0 0 2px var(--color-on-image-shade), 0 2px 6px 1px var(--color-on-image-shade);border-radius:999px;place-items:center;font-size:10px;display:grid;position:absolute;translate:-50% -50%}.component-tile{align-content:start;gap:var(--ui-space-3xs);border-radius:var(--ui-radius-lg);color:var(--ui-text-muted);grid-template-columns:minmax(0,1fr);text-decoration:none;display:grid;&>.cover{margin-bottom:var(--ui-space-sm)}&>.cover:after{transition:box-shadow var(--ui-duration-quick) var(--ui-ease)}& .cover-art{transition:translate var(--ui-duration-base) var(--ui-ease)}@media (hover:hover){&:hover>.cover:after{box-shadow:inset 0 0 0 .5px var(--color-line-strong), inset 0 1px 2px -1px var(--color-shade-2)}&:hover .cover-art{translate:-50% calc(-50% - 2px)}}&:focus-visible{outline:2px solid var(--ui-focus);outline-offset:6px}@media (prefers-reduced-motion:reduce){&:hover .cover-art{translate:-50% -50%}}}.component-tile-label{color:var(--ui-text-muted);font:var(--ui-weight-medium) var(--ui-text-eyebrow)/1rem var(--font-family-sans);letter-spacing:var(--ui-tracking-eyebrow);text-transform:uppercase}.component-tile-name{color:var(--ui-text-strong);font-size:.9375rem;font-weight:var(--ui-weight-medium);line-height:1.5rem}.component-tile-description{font-size:var(--ui-text-caption);text-wrap:pretty;line-height:1.55}.component-tiles{gap:var(--ui-space-xl) 1.5rem;margin:var(--ui-space-lg) 0 0;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));padding:0;list-style:none;display:grid;&>li{margin:0;padding:0}}}@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-5:oklch(96.5% .0011 265);--color-zinc-30:oklch(78% .0025 265);--color-zinc-40:oklch(68.6% .0028 265);--color-zinc-60:oklch(48.6% .003 265);--color-zinc-70:oklch(39.8% .0028 265);--color-zinc-80:oklch(31.4% .0025 265);--color-zinc-90:oklch(24.6% .0022 265);--color-zinc-95:oklch(19.4% .0019 265);--color-zinc-100:oklch(15% .0016 265);--color-surface-inset:light-dark(oklch(96.6% .0011 265),oklch(16.4% .0017 265));--color-surface-raised:light-dark(oklch(100% 0 none),oklch(24.2% .0022 265));--color-surface-floating:light-dark(oklch(100% 0 none),oklch(26.4% .0024 265));--color-surface-inverse:light-dark(oklch(22% .0022 265),oklch(95% .0012 265));--color-line-divider:light-dark(oklch(22% .002 265/.12),oklch(100% 0 none/.13));--color-text-body:light-dark(oklch(39.8% .0028 265),oklch(80% .0025 265));--color-text-strong:light-dark(oklch(21% .0022 265),oklch(95% .0012 265));--color-text-muted:light-dark(oklch(48.6% .003 265),oklch(68.6% .0028 265));--color-text-inverse:light-dark(oklch(98.6% .0008 265),oklch(19.4% .0019 265));--color-white:oklch(100% 0 none);--color-black:oklch(0% 0 none);--font-family-sans:var(--font-sans,ui-sans-serif), system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-family-mono:var(--font-mono,ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-surface-tray:light-dark(oklch(96% .0012 265),oklch(17.4% .0018 265));--color-surface-raised-low:light-dark(oklch(99.3% .0005 265),oklch(22.8% .0021 265));--color-surface-chip:light-dark(oklch(96.5% .0011 265),oklch(100% 0 none/.07));--color-surface-scrim:light-dark(oklch(18% 0 none/.2),oklch(0% 0 none/.55));--color-line-hair:light-dark(oklch(22% .002 265/.065),oklch(100% 0 none/.075));--color-line-contour:light-dark(oklch(22% .002 265/.12),oklch(100% 0 none/.14));--color-line-strong:light-dark(oklch(22% .002 265/.2),oklch(100% 0 none/.23));--color-line-mark:light-dark(oklch(22% .002 265/.32),oklch(100% 0 none/.36));--color-highlight:light-dark(oklch(100% 0 none/.95),oklch(100% 0 none/.07));--color-lip:light-dark(oklch(100% 0 none/.9),oklch(100% 0 none/.04));--color-shade-1:light-dark(oklch(18% 0 none/.06),oklch(0% 0 none/.55));--color-shade-2:light-dark(oklch(18% 0 none/.045),oklch(0% 0 none/.4));--color-shade-3:light-dark(oklch(18% 0 none/.035),oklch(0% 0 none/.34));--color-shade-4:light-dark(oklch(18% 0 none/.035),oklch(0% 0 none/.3));--color-shade-5:light-dark(oklch(18% 0 none/.03),oklch(0% 0 none/.28));--color-on-image:oklch(100% 0 none);--color-on-image-shade:oklch(0% 0 none/.2);--shadow-pressed:inset 0 1px 2px -.5px light-dark(oklch(18% 0 none/.07),oklch(0% 0 none/.5)), inset 0 0 0 .5px var(--color-line-contour), 0 .5px 0 var(--color-lip);--shadow-flat:0 0 0 .5px var(--color-line-contour);--shadow-raised:inset 0 1px 0 var(--color-highlight), 0 0 0 .5px var(--color-line-contour), 0 1px 2px -1px var(--color-shade-1), 0 2px 4px -2px var(--color-shade-2), 0 4px 8px -4px var(--color-shade-3);--shadow-lifted:inset 0 1px 0 var(--color-highlight), 0 0 0 .5px var(--color-line-contour), 0 1px 2px -1px var(--color-shade-1), 0 3px 6px -3px var(--color-shade-2), 0 6px 12px -6px var(--color-shade-3), 0 12px 24px -12px var(--color-shade-4), 0 24px 48px -24px var(--color-shade-5);--shadow-floating:inset 0 1px 0 var(--color-highlight), 0 0 0 .5px var(--color-line-contour), 0 1px 2px -1px var(--color-shade-1), 0 3px 6px -3px var(--color-shade-2), 0 6px 12px -6px var(--color-shade-3), 0 12px 24px -12px var(--color-shade-4), 0 24px 48px -24px var(--color-shade-4), 0 48px 96px -48px var(--color-shade-5);--radius-chip:.375rem;--radius-control-sm:.5rem;--radius-control:.625rem;--radius-control-lg:.75rem;--radius-surface:1rem;--font-weight-control:460;--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0),var(--color-zinc-95));--font-sans:"Geist", "Noto Sans TC";--font-mono:"IBM Plex Mono"}}