.wheel{--wheel-disc:light-dark(#ffffff73,#2020208c);--wheel-fill-0:light-dark(#fff,#ffffff1a);--wheel-fill-1:light-dark(#eef1f4,#ffffff1a);--wheel-fill-2:light-dark(#dde3e9,#ffffff1a);--wheel-empty-opacity:.5;--wheel-wedge-border:transparent;--wheel-wedge-border-width:0;--wheel-hub:light-dark(#fff5,#ffffff1f);--wheel-hub-rim:light-dark(#fffc,#ffffff4d);--wheel-rim-0:#fff9;--wheel-rim-1:#fff0;--wheel-sheen-0:#ffffff26;--wheel-sheen-1:#fff0;--wheel-edge:#0003;--wheel-text:light-dark(#000000e4,#fff);--wheel-dimmed:light-dark(#0000005c,#ffffff5d);--wheel-hot:light-dark(#262626,#f2f2f2);--wheel-hot-text:light-dark(#fff,#1a1a1a);--wheel-pill:#fff;--wheel-pill-text:#1a1a1a;--wheel-pill-border:light-dark(#e2e2e2,#3d3d3d);--wheel-pill-border-width:1;--wheel-bar:light-dark(#ffffffe6,#2b2b2be6);--wheel-bar-border:light-dark(#e2e2e2,#3d3d3d);--wheel-cap:light-dark(#f6f6f6,#3a3a3a);--wheel-cap-border:light-dark(#d8d8d8,#555);--wheel-cap-text:light-dark(#333,#e6e6e6);--wheel-key-name:light-dark(#6b6b6b,#a6a6a6);max-width:100%;height:auto;font-family:var(--ui,"Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif);-webkit-user-select:none;user-select:none;display:block;overflow:visible}@media (forced-colors:active){.wheel{--wheel-disc:Canvas;--wheel-fill-0:Canvas;--wheel-fill-1:Canvas;--wheel-fill-2:Canvas;--wheel-empty-opacity:1;--wheel-wedge-border:CanvasText;--wheel-wedge-border-width:2;--wheel-hub:Canvas;--wheel-hub-rim:transparent;--wheel-rim-0:transparent;--wheel-rim-1:transparent;--wheel-sheen-0:transparent;--wheel-sheen-1:transparent;--wheel-edge:transparent;--wheel-text:CanvasText;--wheel-dimmed:GrayText;--wheel-hot:Highlight;--wheel-hot-text:HighlightText;--wheel-pill:Canvas;--wheel-pill-text:CanvasText;--wheel-pill-border:CanvasText;--wheel-pill-border-width:2;--wheel-bar:Canvas;--wheel-bar-border:CanvasText;--wheel-cap:Canvas;--wheel-cap-border:CanvasText;--wheel-cap-text:CanvasText;--wheel-key-name:CanvasText}}.wheel .fill-0{stop-color:var(--wheel-fill-0)}.wheel .fill-1{stop-color:var(--wheel-fill-1)}.wheel .fill-2{stop-color:var(--wheel-fill-2)}.wheel .rim-0{stop-color:var(--wheel-rim-0)}.wheel .rim-1{stop-color:var(--wheel-rim-1)}.wheel .sheen-0{stop-color:var(--wheel-sheen-0)}.wheel .sheen-1{stop-color:var(--wheel-sheen-1)}.wheel .disc{fill:var(--wheel-disc)}.wheel .edge{stroke:var(--wheel-edge)}.wheel .hub{fill:var(--wheel-hub);stroke:var(--wheel-hub-rim)}.wheel .thumb{fill:none}.wheel .wedge{transform-origin:210px 260px;color:var(--wheel-text);outline:none}.wheel .petal{stroke:var(--wheel-wedge-border);stroke-width:var(--wheel-wedge-border-width)}.wheel .is-empty .petal{opacity:var(--wheel-empty-opacity)}.wheel .wedge.is-dimmed{color:var(--wheel-dimmed)}.wheel .wedge.is-hot{color:var(--wheel-hot-text)}.wheel .wedge.is-hot .petal{fill:var(--wheel-hot)}.wheel .wedge:focus-visible .petal{stroke:var(--wheel-hot);stroke-width:2px}.wheel .label{fill:currentColor;text-anchor:middle;font-size:11px}.wheel[data-active=convert] .label{font-size:15px;font-weight:700}.wheel .pill:has(>.hub-pill:empty){display:none}.wheel .pill-bg{fill:var(--wheel-pill);stroke:var(--wheel-pill-border);stroke-width:var(--wheel-pill-border-width)}.wheel .hub-pill{fill:var(--wheel-pill-text);text-anchor:middle}.wheel .bar{fill:var(--wheel-bar);stroke:var(--wheel-bar-border);stroke-width:1px}.wheel .cap{fill:var(--wheel-cap);stroke:var(--wheel-cap-border);stroke-width:1px}.wheel .cap-text{fill:var(--wheel-cap-text);text-anchor:middle}.wheel .key-name{fill:var(--wheel-key-name)}.wheel .key.is-active .cap{fill:var(--wheel-hot);stroke:var(--wheel-hot)}.wheel .key.is-active .cap-text{fill:var(--wheel-hot-text)}.wheel .key.is-active .key-name{fill:var(--wheel-text);font-weight:600}.stage{--pic:64px;font-family:var(--ui);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;flex-direction:column;align-items:flex-start;gap:12px;padding:24px;font-size:.8125rem;line-height:1.35;display:flex;position:relative;overflow:hidden}.stage [hidden]{display:none!important}.stage button{color:var(--ink);font:inherit;cursor:pointer}.stage button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}.stage .win{--x-chrome:light-dark(#f3f3f3,#202020);--x-content:light-dark(#fff,#191919);--x-field:light-dark(#fff,#2b2b2b);--x-line:light-dark(#e5e5e5,#2e2e2e);--x-text:light-dark(#1a1a1a,#fff);--x-soft:light-dark(#5f5f5f,#c5c5c5);--x-select:light-dark(#cce4f7,#3b4c5c);background:var(--x-chrome);width:min(760px,100%);min-height:0;color:var(--x-text);border:1px solid light-dark(#00000024,#ffffff1f);border-radius:8px;flex-direction:column;display:flex;overflow:hidden;box-shadow:0 16px 40px #00000038}.stage .win svg{flex:none;width:16px;height:16px}.stage .win-title,.stage .win-nav,.stage .win-cmd{white-space:nowrap;align-items:center;gap:12px;display:flex}.stage .win-title{padding:6px 0 0 8px}.stage .tab{background:var(--x-field);border-radius:8px 8px 0 0;align-items:center;gap:8px;width:200px;padding:7px 10px;display:flex}.stage .tab img{width:16px;height:16px}.stage .tab svg{width:12px;height:12px;margin-left:auto}.stage .caption{gap:28px;margin:-6px 0 0 auto;padding:0 16px;display:flex}.stage .caption svg{width:12px;height:12px}.stage .win-nav{background:var(--x-field);gap:14px;padding:6px 12px}.stage .address,.stage .search{background:var(--x-chrome);border-radius:4px;align-items:center;gap:8px;height:30px;padding:0 10px;display:flex}.stage .address{flex:1;min-width:0;overflow:hidden}.stage .search{width:170px;color:var(--x-soft)}.stage .win-cmd{border-bottom:1px solid var(--x-line);background:var(--x-field);gap:16px;padding:8px 14px}.stage .win-cmd>span:not(.sep){align-items:center;gap:6px;display:flex}.stage .win-cmd .dim{opacity:.4}.stage .win-cmd .sep{border-left:1px solid var(--x-line);align-self:stretch}.stage .win-cmd .details{margin-left:auto}.stage .win-body{background:var(--x-content);flex:1;min-height:0;display:flex}.stage .side{border-right:1px solid var(--x-line);flex:none;width:150px;margin:0;padding:8px 6px;list-style:none}.stage .side li{align-items:center;gap:10px;padding:4px 10px;display:flex}.stage .side li.gap{border-top:1px solid var(--x-line);margin-top:10px;padding-top:12px}.stage .win-status{background:var(--x-content);color:var(--x-soft);padding:4px 14px;font-size:.75rem}.stage .reset{border:1px solid var(--line);background:color-mix(in srgb, var(--paper) 92%, transparent);border-radius:999px;height:32px;padding:0 14px;position:absolute;top:12px;right:92px}.stage .job button{border:1px solid var(--line);background:var(--surface);border-radius:6px;padding:2px 12px;font-weight:400}.stage .files{flex:1;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));grid-auto-rows:min-content;gap:4px;min-height:0;margin:0;padding:10px;list-style:none;display:grid;overflow-y:auto}.stage .file{text-align:center;touch-action:none;border:1px solid #0000;border-radius:6px;align-content:start;justify-items:center;gap:6px;padding:8px 4px;display:grid}.stage .file.is-selected{background:var(--x-select)}.stage .name{overflow-wrap:anywhere;max-width:100%;font-size:.75rem}.stage .pic{width:var(--pic);height:var(--pic);forced-color-adjust:none;background:50%/contain no-repeat;display:block}.stage :is(.file,.ghost) .pic:is([data-look=autumn],[data-look=coast],[data-look=image],[data-look=video]){height:calc(var(--pic) * 2 / 3);margin-block:calc(var(--pic) / 6);background-size:cover;outline:1px solid light-dark(#0000001f,#ffffff29);box-shadow:0 1px 3px #0000002e}.stage .pic[data-look=autumn]{background-image:url(/demo/autumn.webp)}.stage .pic[data-look=coast]{background-image:url(/demo/coast.webp)}.stage .pic[data-look=image]{background-image:url(/demo/image.webp)}.stage .pic[data-look=pdf]{background-image:url(/demo/pdf.svg)}.stage .pic[data-look=audio]{background-image:url(/demo/audio.svg)}.stage .pic[data-look=folder]{background-image:url(/demo/folder.svg)}.stage .pic[data-look=zip]{background-image:url(/demo/zip.svg)}.stage .pic[data-look=other]{background-image:url(/demo/other.svg)}.stage :is(.file,.ghost,.wheel-box) .pic[data-look=video]{background-image:repeating-linear-gradient(#f4f4f4 0 3px,#0000 3px 7px),repeating-linear-gradient(#f4f4f4 0 3px,#0000 3px 7px),linear-gradient(#1a1a1a 0 0),linear-gradient(#1a1a1a 0 0),url(/demo/video.webp);background-position:2px 2px,calc(100% - 2px) 2px,0 0,100% 0,50%;background-repeat:no-repeat;background-size:3px calc(100% - 2px),3px calc(100% - 2px),7px 100%,7px 100%,cover}.stage .keys{flex-wrap:wrap;gap:8px;display:none}.stage .keys button,.stage .key-hint span{align-items:center;gap:6px;display:inline-flex}.stage .keys button{border:1px solid var(--line);background:color-mix(in srgb, var(--paper) 92%, transparent);color:var(--ink-soft);touch-action:manipulation;border-radius:999px;padding:5px 12px 5px 6px}.stage .keys [aria-pressed=true]{color:var(--ink);font-weight:600}.stage .keys [aria-pressed=true] kbd{border-color:var(--ink);background:var(--ink);color:var(--on-ink)}.hint .coarse{display:none}@media (pointer:coarse){.stage .keys{display:flex}.hint .fine{display:none}.hint .coarse{display:inline}.stage .invite{display:none}}.stage .sound,.stage .pause{border:1px solid var(--line);background:color-mix(in srgb, var(--paper) 92%, transparent);border-radius:50%;place-items:center;width:32px;height:32px;padding:0;display:grid;position:absolute;top:12px;right:12px}.stage .pause{right:52px}.stage .sound svg,.stage .pause svg{width:16px;height:16px}.stage .sound[aria-pressed=true] .off,.stage .sound[aria-pressed=false] .on,.stage .pause[aria-pressed=true] .bars,.stage .pause[aria-pressed=false] .play{display:none}.stage .cards{flex-direction:column-reverse;gap:8px;width:min(320px,100% - 24px);display:flex;position:absolute;bottom:12px;right:12px}.stage .cards .job{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:72px;padding:0 12px 0 16px;display:grid}.stage .job .text{display:grid}.stage .job .line{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.stage .cards .bar{width:0;bottom:6px;left:16px}.stage .wheel-box{transform-origin:50% 55.3192%;position:absolute}.stage .wheel-box>.wheel{filter:drop-shadow(0 10px 22px #00000024);width:100%;max-width:none;height:auto}.stage .wheel-box>.pic{border-radius:4px;width:10.4762%;height:9.3617%;position:absolute;top:45.1064%;left:44.7619%}.stage .notice,.stage .invite{background:var(--ink);color:var(--on-ink);white-space:nowrap;pointer-events:none;border:1px solid #0000;border-radius:999px;padding:4px 12px;position:absolute}.stage .invite{margin:0;bottom:20px;left:24px}.stage .ghost{pointer-events:none;position:absolute}.stage .ghost .pic{opacity:.6;position:absolute;top:20px;left:4px}.stage .ghost .count{top:12px;left:calc(var(--pic) - 8px);background:var(--ink);min-width:18px;color:var(--on-ink);text-align:center;border-radius:9px;padding:0 5px;font-size:.6875rem;line-height:18px;position:absolute}.stage .ghost .caption{top:20px;left:calc(var(--pic) + 12px);border:1px solid var(--line);background:var(--paper);white-space:nowrap;border-radius:4px;padding:2px 8px;position:absolute;box-shadow:0 2px 6px #00000024}.stage .ghost .caption.is-flipped{left:auto;right:8px}.stage .ghost .count:empty,.stage .ghost .caption:empty{display:none}.stage .key-hint{border:1px solid var(--line);background:color-mix(in srgb, var(--paper) 92%, transparent);color:var(--ink-soft);white-space:nowrap;pointer-events:none;border-radius:999px;gap:14px;padding:5px 14px 5px 6px;display:flex;position:absolute;box-shadow:0 4px 12px #0000001f}.stage .cursor{filter:drop-shadow(0 1px 1.5px #0000004d);pointer-events:none;width:16px;height:21px;position:absolute;top:0;left:0}.stage .cursor svg{fill:#1a1a1a;stroke:#fff;stroke-width:1.2px;stroke-linejoin:round;width:100%;height:100%;display:block}@media (width<=48rem){.stage .side,.stage .search,.stage .win-cmd .label,.stage .win-cmd .dim,.stage .win-cmd .sep{display:none}.stage .tab{width:auto}}@media (width<=40rem){.stage .caption{gap:18px;padding:0 10px}.stage .win-cmd{display:none}.stage{--pic:48px;padding:56px 16px 16px}.stage .invite{bottom:16px;left:16px}.stage .files{grid-template-columns:repeat(auto-fill,minmax(68px,1fr))}}@media (width<=40rem),(pointer:coarse){.stage{padding-bottom:96px}.stage .cards{display:grid}.stage .cards .job{grid-area:1/1}}@media (forced-colors:active){.stage .win,.stage .keys button,.stage .sound,.stage .pause,.stage .key-hint,.stage .ghost .caption{border-color:canvastext}.stage .cursor svg{fill:canvastext;stroke:canvas}.stage .file.is-selected,.stage .keys [aria-pressed=true] kbd{forced-color-adjust:none;color:highlighttext;background:highlight;border-color:highlight}}:root{--main-width:var(--wide);--wall-left:light-dark(#8fc4ff,#1d4f8f);--wall-right:light-dark(#c9b6ff,#4a3a86);--wall-top:light-dark(#e9eff7,#141b29);--wall-bottom:light-dark(#dbe6f4,#0f1522)}main p,main ul,main dl,main dd{margin:0}.box,.settings li,.action-cards>div{border:1px solid var(--line);background:var(--surface);border-radius:16px}.box{padding:26px}.band{border-top:1px solid var(--line);padding:80px 0}.band h2{margin:0;font-size:clamp(2rem,5vw,2.875rem);line-height:1.05}.band h3{margin:0 0 8px;font-size:1rem}.sub{color:var(--ink-soft);margin-top:12px}.note,.foot{color:var(--ink-soft);margin-top:18px;font-size:.875rem}kbd{border:1px solid var(--line);background:var(--surface);min-width:24px;height:22px;color:var(--ink);font:.75rem/1 var(--text);border-radius:5px;place-items:center;padding:0 6px;display:inline-grid}.hero{text-align:center}.hero h1{letter-spacing:-.01em;margin:16px 0 0;font-size:clamp(3rem,8vw,4.75rem);line-height:1}.lede{max-width:40rem;color:var(--ink-soft);margin:16px auto 0;font-size:clamp(1.0625rem,2vw,1.1875rem)}.buttons{flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px;display:flex}.demo{margin:40px 0 70px}.stage,.scene{background:radial-gradient(60% 90% at 15% 100%, var(--wall-left), transparent 60%), radial-gradient(50% 80% at 90% 90%, var(--wall-right), transparent 65%), linear-gradient(var(--wall-top), var(--wall-bottom));border:1px solid #0000}.stage{border-radius:18px;height:470px}@media (width<=40rem){.stage{height:540px}}.hint{color:var(--ink-soft);text-align:center;margin-top:14px;font-size:.875rem}.numbers{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:20px;display:grid}.numbers dt{font-weight:600}.num{font:400 3.5rem/1 var(--display);margin-bottom:8px;display:block}.numbers dd{color:var(--ink-soft)}.feature{grid-template-columns:minmax(0,1fr);display:grid}.feature>.media{justify-self:center;margin:24px 0}.band .wheel{filter:drop-shadow(0 10px 22px #00000024)}.sizes{aspect-ratio:420/470;place-items:center;width:100%;max-width:420px;display:grid}@media (prefers-reduced-motion:no-preference){.sizes .wheel{transition:width var(--duration-fast) var(--ease-smooth-out)}}@media (width>=56rem){.feature{grid-template-rows:repeat(4,auto) 1fr;grid-template-columns:minmax(0,27.5rem) minmax(0,1fr);column-gap:56px}.feature>*{grid-column:2}.feature>.media{grid-area:1/1/-1;align-self:center;margin:0}.feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,27.5rem)}.feature.flip>*{grid-column:1}.feature.flip>.media{grid-column:2}}.eyebrow{color:var(--ink-soft);align-items:center;gap:8px;margin-bottom:10px;font-size:.875rem;display:flex}.eyebrow kbd{background:var(--ink);color:var(--on-ink);border-color:#0000}[data-kinds],[data-sizes]{border:1px solid var(--line);background:var(--surface);border-radius:999px;justify-self:start;gap:2px;padding:3px;display:inline-flex}[data-kinds]{margin-top:18px}[data-sizes]{width:fit-content;margin-top:10px;display:flex}[data-kinds] button,[data-sizes] button{color:var(--ink-soft);font:.875rem/1.6 var(--text);cursor:pointer;transition:color var(--duration-quick) var(--ease-out);background:0 0;border:1px solid #0000;border-radius:999px;padding:4px 14px}[data-kinds] button:hover,[data-sizes] button:hover{color:var(--ink)}[data-kinds] button:focus-visible,[data-sizes] button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}[data-kinds] [aria-selected=true],[data-sizes] [aria-pressed=true]{background:var(--ink);color:var(--on-ink)}[data-list]{gap:8px;margin-top:18px;font-size:.875rem;display:grid}[data-list]>div{gap:2px 16px;display:grid}[data-list]>[hidden]{display:none}@media (width>=30rem){[data-list]:not(.action-cards)>div{grid-template-columns:9.5rem minmax(0,1fr)}}[data-list] dt{transition:background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);border-radius:6px;justify-self:start;margin-inline:-6px;padding-inline:6px;font-weight:600}[data-list] dd{color:var(--ink-soft)}[data-list] .is-hot dt{background:var(--ink);color:var(--on-ink)}.action-cards{grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:12px}.action-cards>div{padding:16px 18px}.split{grid-template-columns:minmax(0,1fr);align-items:center;gap:24px 56px;display:grid}@media (width>=56rem){.split{grid-template-columns:minmax(0,27.5rem) minmax(0,1fr)}}.scene{border-radius:16px;align-content:center;gap:16px;min-height:230px;padding:24px;display:grid}.job{background:color-mix(in srgb, var(--paper) 92%, transparent);border:1px solid #0000;border-radius:16px;width:min(320px,100%);padding:14px 16px 16px;font-size:.75rem;line-height:1.4;position:relative;overflow:hidden;box-shadow:0 8px 24px #00000024}.job b{font-size:.875rem;display:block}.job .bar{width:var(--done,100%);border-top:2px solid var(--ink);position:absolute;bottom:0;left:0}.settings{gap:12px;margin-top:24px;padding:0;list-style:none;display:grid}.settings li{margin:0;padding:18px 20px}.formats{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:20px;margin-top:26px;display:grid}.formats dl{font-size:.875rem}.formats dt{color:var(--ink-soft);margin:12px 0 6px}.chips{flex-wrap:wrap;gap:6px;padding:0;list-style:none;display:flex}.chips li{border:1px solid var(--line);background:var(--paper);border-radius:999px;margin:0;padding:2px 10px;font-size:.75rem}.pricing{text-align:center}.plans{text-align:left;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:20px;max-width:45rem;margin:28px auto 0;display:grid}.plans .box:last-child{border-color:var(--ink)}.plans .num{margin:10px 0}.pricing .note{margin-top:10px}@media (width<=40rem){.band{padding:48px 0}.demo{margin-bottom:48px}}@media (forced-colors:active){[data-kinds] [aria-selected=true],[data-sizes] [aria-pressed=true],[data-list] .is-hot dt{forced-color-adjust:none;color:highlighttext;background:highlight}.band .wheel{filter:none}}
