/* Local component styles adapted from the supplied button and gauge demos. */
.tear{--paper:#18181b;--ink:#fff;--chip:rgba(255,255,255,.1);--chip-done-bg:#fff;--chip-done-ink:#18181b;--sub:rgba(255,255,255,.55);--stub:rgba(255,255,255,.6);--perf:rgba(255,255,255,.3)}
.tear.tone-muted{--paper:#f4f4f5;--ink:#18181b;--chip:rgba(24,24,27,.05);--chip-done-bg:#18181b;--chip-done-ink:#fff;--sub:#71717a;--stub:#71717a;--perf:rgba(24,24,27,.2)}
.tear.tone-danger{--paper:#dc2626;--ink:#fff;--chip:rgba(255,255,255,.15);--chip-done-bg:#fff;--chip-done-ink:#dc2626;--sub:rgba(255,255,255,.7);--stub:rgba(255,255,255,.75);--perf:rgba(255,255,255,.4)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .tear.tone-default{--paper:#f4f4f5;--ink:#18181b;--chip:rgba(24,24,27,.1);--chip-done-bg:#18181b;--chip-done-ink:#fff;--sub:rgba(24,24,27,.55);--stub:rgba(24,24,27,.6);--perf:rgba(24,24,27,.3)}
  :root:not([data-theme="light"]) .tear.tone-muted{--paper:#27272a;--ink:#f4f4f5;--chip:rgba(255,255,255,.1);--chip-done-bg:#fff;--chip-done-ink:#18181b;--sub:#a1a1aa;--stub:#a1a1aa;--perf:rgba(255,255,255,.25)}
}
:root[data-theme="dark"] .tear.tone-default{--paper:#f4f4f5;--ink:#18181b;--chip:rgba(24,24,27,.1);--chip-done-bg:#18181b;--chip-done-ink:#fff;--sub:rgba(24,24,27,.55);--stub:rgba(24,24,27,.6);--perf:rgba(24,24,27,.3)}
:root[data-theme="dark"] .tear.tone-muted{--paper:#27272a;--ink:#f4f4f5;--chip:rgba(255,255,255,.1);--chip-done-bg:#fff;--chip-done-ink:#18181b;--sub:#a1a1aa;--stub:#a1a1aa;--perf:rgba(255,255,255,.25)}

.tear{position:relative;width:312px;height:68px;user-select:none;-webkit-user-select:none;outline:none}
.body{position:absolute;top:0;bottom:0;left:0;width:236px;display:flex;align-items:center;gap:12px;padding:0 16px;border-radius:16px 0 0 16px;background:var(--paper);color:var(--ink);
  mask:radial-gradient(circle at 100% 0,#0000 7px,#000 7.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 7px,#000 7.5px) bottom/100% 51% no-repeat;
  -webkit-mask:radial-gradient(circle at 100% 0,#0000 7px,#000 7.5px) top/100% 51% no-repeat,radial-gradient(circle at 100% 100%,#0000 7px,#000 7.5px) bottom/100% 51% no-repeat}
.chip{flex:0 0 36px;width:36px;height:36px;border-radius:9999px;display:flex;align-items:center;justify-content:center;background:var(--chip);color:var(--ink);transition:background-color .3s ease-out,color .3s ease-out}
.chip.done{background:var(--chip-done-bg);color:var(--chip-done-ink)}
.chip svg{width:16px;height:16px}
.lines{position:relative;display:grid;min-width:0;flex:1}
.line{grid-area:1/1;min-width:0;transition:opacity .3s cubic-bezier(.23,1,.32,1),filter .3s cubic-bezier(.23,1,.32,1),translate .3s cubic-bezier(.23,1,.32,1)}
.line.off{pointer-events:none;translate:0 4px;opacity:0;filter:blur(3px)}
.line .t{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;font-size:14px}
.line .s{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:var(--sub)}

.stub{position:absolute;top:0;left:236px;width:76px;height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;border:0;border-radius:0 16px 16px 0;background:var(--paper);color:var(--stub);font:inherit;cursor:grab;touch-action:none;transform-origin:0 100%;
  transition:opacity .3s cubic-bezier(.23,1,.32,1),translate .3s cubic-bezier(.23,1,.32,1);
  mask:radial-gradient(circle at 0 0,#0000 7px,#000 7.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 7px,#000 7.5px) bottom/100% 51% no-repeat;
  -webkit-mask:radial-gradient(circle at 0 0,#0000 7px,#000 7.5px) top/100% 51% no-repeat,radial-gradient(circle at 0 100%,#0000 7px,#000 7.5px) bottom/100% 51% no-repeat}
.tear[data-phase="tearing"] .stub{cursor:grabbing}
.stub:focus-visible{outline:none;box-shadow:inset 0 0 0 2px currentColor}
.stub.fresh{animation:stubIn .3s cubic-bezier(.23,1,.32,1)}
@keyframes stubIn{from{opacity:0;translate:-12px 0}to{opacity:1;translate:0 0}}
.stub svg{width:16px;height:16px;flex:none}
.stub .lbl{font-weight:500;font-size:12px;line-height:1}
.perf{position:absolute;top:10px;bottom:10px;left:0;border-left:2px dotted var(--perf)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion: reduce){
  .line,.chip,.stub{transition-property:opacity!important}
  .stub.fresh{animation:none}
}

/* ---- Component styles, mapped from its Tailwind classes ---- */
.lg-root {
  position: relative; height: 22.5rem; width: 18rem; overflow: hidden; border-radius: 1.5rem;
  border: 1px solid #e4e4e7; background: #ffffff; color: #18181b; outline: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
  transition: border-color .2s;
}
html.dark .lg-root { border-color: #27272a; background: #09090b; color: #f4f4f5; }
.lg-root:focus-visible { outline: 2px solid #a1a1aa; outline-offset: 2px; }
html.dark .lg-root:focus-visible { outline-color: #71717a; }
.lg-root.ns { cursor: ns-resize; }
.lg-root.grab { cursor: grabbing; }
.lg-root.ro { cursor: default; }

.lg-face { position: absolute; inset: 0; pointer-events: none; }
.g-top { position: absolute; left: 0; right: 0; top: 0; padding: 1.5rem; }
.g-label { margin: 0; font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.g-pct {
  margin: .75rem 0 0; font-size: 3.75rem; line-height: 1; font-weight: 600;
  letter-spacing: -.025em; font-variant-numeric: tabular-nums;
}
.g-unit { margin-left: .125rem; font-size: 1.875rem; font-weight: 500; opacity: .6; }
.g-used { margin: .25rem 0 0; font-size: .875rem; line-height: 1.25rem; font-variant-numeric: tabular-nums; opacity: .6; }
.g-status { position: absolute; left: 1.5rem; bottom: 1.5rem; margin: 0; font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.g-ticks { position: absolute; top: 0; bottom: 0; right: 0; width: 1rem; }
.g-tick { position: absolute; right: 0; height: 1px; width: .375rem; background: currentColor; opacity: .3; }
.g-tick.major { width: .75rem; }

.lg-rim {
  position: absolute; inset: 0; pointer-events: none;
  background: #d4d4d8; transition: background-color .3s ease-out;
}
html.dark .lg-rim { background: #52525b; }
.lg-rim.warn { background: #fca5a5; }
html.dark .lg-rim.warn { background: #7f1d1d; }

.lg-liquid {
  position: absolute; inset: 0; pointer-events: none;
  background: #18181b; color: #ffffff; transition: background-color .3s ease-out, color .3s ease-out;
}
html.dark .lg-liquid { background: #f4f4f5; color: #18181b; }
.lg-liquid.warn { background: #ef4444; color: #ffffff; }
html.dark .lg-liquid.warn { background: #ef4444; color: #ffffff; }

.bubble {
  position: absolute; top: 0; left: 0; width: .5rem; height: .5rem; border-radius: 9999px;
  border: 1px solid currentColor; background: color-mix(in srgb, currentColor 20%, transparent);
  opacity: 0; will-change: transform;
}

.lg-root{border-color:#27272a;background:#09090b;color:#f4f4f5}.lg-rim{background:#52525b}.lg-liquid{background:#f4f4f5;color:#18181b}.lg-root:focus-visible{outline-color:#71717a}