@layer theme,base;@layer components{.dm{border-radius:var(--r-tile);background:radial-gradient(110% 60% at 20% -12%, #bed2eb0f, transparent 70%), linear-gradient(180deg, var(--tile-t), var(--tile-b));box-shadow:var(--rim-soft), inset 0 0 0 1px #ffffff0e, 0 30px 60px -40px #000000e6;padding:26px 28px 24px;position:relative}.dm-cap{display:block}.dm-head{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:8px 20px;display:flex}.dm-title{letter-spacing:.002em;color:var(--t1);font-size:19px;font-weight:600;line-height:24px}.dm-legend{color:var(--t3);flex-wrap:wrap;gap:6px 16px;font-size:12px;line-height:16px;display:flex}.dm-key{align-items:center;gap:8px;display:inline-flex}.dm-key i{background:var(--ice);border-radius:1px;width:22px;height:1.5px}.dm-key[data-when=sometimes] i{background:repeating-linear-gradient(90deg, var(--ice) 0 4px, transparent 4px 7px)}.dm-hint{color:var(--t3);margin-top:6px;font-size:13px;line-height:18px;display:block}.dm-boards{gap:22px;margin-top:22px;display:grid}.dm-board+.dm-board{border-top:1px solid var(--line-1);padding-top:22px}.dm-src{align-items:center;gap:12px;display:flex}.dm-glyph{width:36px;height:36px;color:var(--ice-hi);background:linear-gradient(#1a2230,#121821);border-radius:11px;flex:none;place-items:center;display:grid;position:relative;box-shadow:inset 0 1px #ffffff1f,inset 0 0 0 1px #ffffff14,0 8px 16px -10px #000000e6}.dm-glyph svg{stroke-width:1.5px;width:22px;height:22px}.dm-glyph img{border-radius:10px;width:36px;height:36px}.dm-glyph[data-src=app]{background:0 0;box-shadow:0 0 0 1px #ffffff1a,0 8px 16px -10px #000000e6}.dm-src-t{color:var(--t1);font-size:15px;font-weight:600;line-height:20px}.dm-rows{--dm-x:17px;--dm-wire:24px;margin-top:6px;display:grid;position:relative}.dm-row{--c:var(--ice);--dm-y:18px;min-height:52px;padding:8px 10px 8px calc(var(--dm-x) + var(--dm-wire) + 16px);transition:background-color .2s var(--ease);border-radius:12px;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:16px;display:grid;position:relative}.dm-row:before{content:"";left:calc(var(--dm-x) - .75px);transform-origin:50% 0;background:#75beff8c;width:1.5px;position:absolute;top:0;bottom:0}.dm-row:first-child:before{top:-6px}.dm-row:last-child:before{height:var(--dm-y);bottom:auto}.dm-wire{left:var(--dm-x);top:var(--dm-y);width:var(--dm-wire);background:var(--c);transform-origin:0;height:1.5px;margin-top:-.75px;position:absolute}.dm-row[data-when=sometimes] .dm-wire{background:repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 7px)}.dm-wire:after{content:"";background:linear-gradient(90deg, transparent, color-mix(in oklab, var(--light-key) 90%, transparent));transform-origin:0;opacity:0;border-radius:2px;position:absolute;inset:-2px 0;transform:scaleX(0)}.dm-dot{left:calc(var(--dm-x) + var(--dm-wire) + 2px);top:var(--dm-y);background:var(--c);border-radius:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;position:absolute;box-shadow:0 0 0 3px #75beff24}.dm-row[data-when=sometimes] .dm-dot{background:var(--tile-t);box-shadow:inset 0 0 0 1.5px var(--c), 0 0 0 3px #75beff1a}.dm-txt{min-width:0}.dm-line{flex-wrap:wrap;align-items:center;gap:2px 10px;display:flex}.dm-from{color:var(--t3);align-items:center;gap:4px;font-size:14px;font-weight:500;line-height:20px;display:inline-flex}.dm-from svg{stroke-width:2.2px;width:12px;height:12px}.dm-node{letter-spacing:-.004em;color:var(--t1);border-radius:6px;font-size:15px;font-weight:600;line-height:20px}.dm-node:after{content:"";border-radius:12px;position:absolute;inset:0}.dm-node:focus-visible{outline:none}.dm-node:focus-visible:after{outline:2px solid var(--ice-hi);outline-offset:-2px}.dm-when{letter-spacing:.004em;white-space:nowrap;height:20px;color:var(--t2);background:#ffffff0b;border-radius:999px;align-items:center;padding:0 8px;font-size:12px;font-weight:600;line-height:1;display:inline-flex;box-shadow:inset 0 0 0 1px #ffffff12}.dm-row[data-when=always] .dm-when{color:var(--ice-hi);background:var(--ice-wash);box-shadow:inset 0 0 0 1px #75beff3d}.dm-what{color:var(--t3);text-wrap:pretty;margin-top:3px;font-size:13px;line-height:18px}.dm-ref{font-variant-numeric:tabular-nums;color:var(--t4);transition:color .2s var(--ease);align-self:center;align-items:center;gap:2px;font-size:12px;font-weight:600;line-height:16px;display:inline-flex}.dm-ref svg{stroke-width:2.2px;width:12px;height:12px}@media (hover:hover) and (pointer:fine){.dm-row:hover{background:#ffffff09}.dm-row:hover .dm-ref{color:var(--t2)}}.dm-side{z-index:2;align-self:center;justify-items:end;gap:2px;display:grid;position:relative}.dm-sw{height:32px;color:var(--t1);transition:background-color .2s var(--ease);background:#ffffff0f;border-radius:999px;align-items:center;gap:10px;padding:0 4px 0 12px;font-size:13px;font-weight:600;line-height:1;display:inline-flex;box-shadow:inset 0 1px #ffffff12,inset 0 0 0 1px #ffffff1a}.dm-sw:hover{background:#ffffff1a}.dm-sw:focus-visible{outline:2px solid var(--ice-hi);outline-offset:2px;border-radius:999px}.dm-sw .tg{font-size:12px}.dm-sw-n{color:var(--t3);white-space:nowrap;font-size:12px;line-height:16px}:is(.dm-row:has([role=switch][aria-checked=false]) .dm-wire,.dm-row:has([role=switch][aria-checked=false]) .dm-dot){opacity:.2}.dm-row:has([role=switch][aria-checked=false]) .dm-node{color:var(--t2)}.dm-play[data-phase=idle] .dm-row:before,.dm-play[data-phase=idle] .dm-wire,.dm-play[data-phase=idle] .dm-dot{opacity:.3}.dm-play[data-phase=play] .dm-row:before{animation:dm-bus .42s var(--ease-out) calc(var(--g) * 90ms) both}.dm-play[data-phase=play] .dm-wire{animation:dm-on .4s var(--ease-out) calc(var(--g) * 90ms + .16s) both}.dm-play[data-phase=play] .dm-wire:after{animation:dm-run .62s var(--ease-out) calc(var(--g) * 90ms + .16s) both}.dm-play[data-phase=play] .dm-dot{animation:dm-pop var(--dur-pop) var(--spring-pop) calc(var(--g) * 90ms + .42s) both}@keyframes dm-bus{0%{opacity:.3;transform:scaleY(.2)}to{opacity:1;transform:none}}@keyframes dm-on{0%{opacity:.3}to{opacity:1}}@keyframes dm-run{0%{opacity:1;transform:scaleX(0)}70%{opacity:1;transform:scaleX(1)}to{opacity:0;transform:scaleX(1)}}@keyframes dm-pop{0%{opacity:.3;transform:scale(.6)}to{opacity:1;transform:none}}@media (max-width:733px){.dm{border-radius:22px;padding:20px 16px 18px}.dm-title{font-size:17px;line-height:22px}.dm-rows{--dm-wire:16px}.dm-row{--dm-y:20px;padding:10px 6px 10px calc(var(--dm-x) + var(--dm-wire) + 14px);grid-template-columns:minmax(0,1fr);row-gap:8px;min-height:56px}.dm-row .dm-ref{display:none}.dm-side{justify-items:start}.dm-sw{height:44px;padding-left:14px}}@media (forced-colors:active){.dm{border:1px solid canvastext}.dm-sw{border:1px solid buttontext}.dm-sw .tg{forced-color-adjust:none;background:canvas;box-shadow:inset 0 0 0 1px buttontext}.dm-sw .tg i{box-shadow:none;background:buttontext}.dm-sw .tg.is-on{box-shadow:none;background:highlight}.dm-sw .tg.is-on i{background:highlighttext}.dm-row[data-when=sometimes] .dm-wire{background:repeating-linear-gradient(90deg,canvastext 0 4px,#0000 4px 7px)}.dm-row:before,.dm-row[data-when=always] .dm-wire,.dm-key[data-when=always] i{background:canvastext}.dm-key[data-when=sometimes] i{background:repeating-linear-gradient(90deg,canvastext 0 4px,#0000 4px 7px)}.dm-dot{background:canvas;border:1px solid canvastext}.dm-node:focus-visible:after{outline-color:highlight}}}@layer utilities;
