:root{--bg: #14161c;--surface: #1d2027;--surface-2: #272b34;--text: #e8eaef;--muted: #8b90a0;--accent: #5fd3bc;--accent-light: #a4ece0;--accent-ink: #0d1a17;--danger: #ff7b7b;--radius: 8px;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%;width:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font:15px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-text-size-adjust:100%;overscroll-behavior:none}#app{height:100%;width:100%;padding-top:env(safe-area-inset-top)}.hidden{display:none!important}.muted{color:var(--muted)}.small{font-size:13px}.btn{appearance:none;border:0;border-radius:var(--radius);background:var(--surface-2);color:var(--text);padding:10px 16px;font:inherit;cursor:pointer;touch-action:manipulation}.btn:hover{filter:brightness(1.1)}.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:600}.btn-icon{width:42px;height:42px;padding:0;font-size:18px;line-height:1;flex:none;display:grid;place-items:center}.btn-icon svg{display:block}.btn.active{background:var(--accent);color:var(--accent-ink)}select{border:0;border-radius:var(--radius);background:var(--surface-2);color:var(--text);padding:6px 8px;font:inherit;max-width:100%}.library{max-width:640px;margin:0 auto;padding:24px 16px 48px}.library-header h1{display:flex;align-items:center;gap:10px;margin:0 0 4px;font-size:28px}.library-header p{margin:0 0 20px}.tabs{display:flex;gap:4px;margin-bottom:20px;border-bottom:1px solid var(--surface-2)}.tab{appearance:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:8px 16px;background:none;color:var(--muted);font:inherit;font-weight:600;cursor:pointer}.tab:hover{color:var(--text)}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.add-row{position:relative;display:flex;align-items:center;gap:8px;margin-bottom:20px}.add-rom{display:inline-flex;cursor:pointer}.add-rom code,.info-pop code{font-family:ui-monospace,Cascadia Mono,Consolas,monospace;font-size:.92em;padding:1px 5px;border-radius:4px}.add-rom code{background:#0000001f}.info-pop code{background:#ffffff14}.info{display:inline-flex}.info-btn{appearance:none;border:0;padding:0;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:none;color:var(--muted);cursor:pointer}.info-btn:hover,.info.open .info-btn{color:var(--text);background:var(--surface-2)}.info-pop{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:5;max-width:100%;padding:8px 12px;border-radius:var(--radius);background:var(--surface-2);color:var(--text);font-size:13px;line-height:1.4;box-shadow:0 8px 24px #0006}.info.open .info-pop{display:block}@media(hover:hover){.info:hover .info-pop{display:block}}.rom-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.rom{display:flex;align-items:stretch;background:var(--surface);border-radius:var(--radius);overflow:hidden}.rom-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px 16px;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}.rom-main:hover{background:var(--surface-2)}.rom-name{font-weight:600}.rom-delete{border-radius:0;background:none;color:var(--muted);width:48px;height:auto}.rom-delete:hover{color:var(--danger);background:var(--surface-2)}.empty{padding:24px;text-align:center}.keys-help{margin-top:24px}.alert{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px 16px;border-radius:var(--radius);border:1px solid rgb(95 211 188 / .35);background:#5fd3bc14}.alert-icon{display:flex;padding-top:1px;color:var(--accent)}.alert-icon svg{display:block}.alert-body{min-width:0;display:grid;gap:10px}.alert-body p{margin:0}.keys{display:grid;gap:6px 24px}@media(min-width:560px){.keys{grid-template-columns:1fr 1fr;grid-template-rows:repeat(4,auto);grid-auto-flow:column}}.key-row{display:grid;grid-template-columns:96px 1fr;align-items:center;gap:8px;font-size:14px}.key-action{color:var(--muted)}.key-keys{display:flex;flex-wrap:wrap;align-items:center;gap:4px}kbd{display:inline-block;min-width:24px;padding:1px 6px;border-radius:5px;border:1px solid rgb(255 255 255 / .14);border-bottom-width:2px;background:var(--surface-2);color:var(--text);font:12.5px/1.5 ui-monospace,Cascadia Mono,Consolas,monospace;text-align:center;white-space:nowrap}.player{position:relative;height:100%;width:100%;max-width:100vw;overflow:hidden;display:flex;flex-direction:column;background:#000}.stage{position:relative;flex:1;min-height:0;min-width:0;display:grid;grid-template-columns:1fr;grid-template-rows:1fr;grid-template-areas:"screen"}.toolbar{flex:none;display:flex;align-items:center;gap:6px;min-width:0;padding:6px 8px;background:var(--bg)}.actions{display:flex;align-items:center;gap:6px;flex:1;min-width:0}.toolbar-fps{white-space:nowrap}.toolbar-spacer{flex:1}.screen-box{grid-area:screen;position:relative;min-height:0;min-width:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.screen{image-rendering:pixelated;image-rendering:crisp-edges;background:#000}.menu{position:absolute;right:8px;top:56px;z-index:5;display:flex;flex-direction:column;gap:8px;padding:12px;background:var(--surface);border-radius:var(--radius);box-shadow:0 12px 32px #00000080;width:min(320px,calc(100vw - 16px));max-height:calc(100% - 64px);overflow:auto}.menu-header{display:flex;align-items:baseline;gap:8px;min-width:0}.menu-title{margin:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.menu-actions:empty{display:none}.player:not(.touch-on) [data-action=edit-layout]{display:none}.menu-actions .actions{flex-wrap:wrap}.menu-backdrop{position:absolute;inset:0;z-index:4}.menu-fab,.player.drawer-mode .toolbar{display:none}.player.drawer-mode .menu-fab{position:fixed;right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));z-index:3;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:#272b34d9;color:var(--text);cursor:pointer;touch-action:manipulation}.player.drawer-mode .menu-backdrop{background:#00000073}.player.drawer-mode .menu{top:0;right:0;bottom:0;width:min(320px,85vw);max-height:none;border-radius:0;padding:16px calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) 16px;box-shadow:-12px 0 32px #00000080;animation:drawer .18s ease}@keyframes drawer{0%{transform:translate(100%)}}.player.drawer-mode .actions [data-action=menu],.player.drawer-mode .actions .toolbar-spacer{display:none}.menu .row{display:flex;align-items:center;gap:10px;padding:4px 2px;min-width:0}.menu .row>select{flex:1;min-width:0}.menu input[type=range]{flex:1;min-width:0}.menu h4{margin:6px 0 0;font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.menu .slots{display:grid;grid-template-columns:auto repeat(3,1fr);gap:6px;align-items:center}.menu .btn.has-state{background:var(--accent);color:var(--accent-ink);font-weight:600}.toast{--toast-hold: 2s;position:fixed;top:calc(64px + env(safe-area-inset-top));right:12px;z-index:30;max-width:min(320px,calc(100vw - 24px));padding:10px 14px;border-radius:var(--radius);background:var(--surface-2);color:var(--text);font-size:14px;box-shadow:0 8px 24px #0006;pointer-events:none;animation:toast-in .22s ease-out both,toast-out .32s ease-in calc(.22s + var(--toast-hold)) forwards}.toast.brief{--toast-hold: 1s}body[data-chrome=drawer] .toast{top:calc(12px + env(safe-area-inset-top))}@keyframes toast-in{0%{opacity:0;transform:translate(24px)}to{opacity:1;transform:none}}@keyframes toast-out{0%{transform:none}to{transform:translate(calc(100% + 16px))}}.modal-backdrop{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#0009}.modal{width:min(440px,100%);max-height:100%;overflow:auto;padding:16px;background:var(--surface);border-radius:var(--radius);box-shadow:0 16px 48px #0009}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.modal-header h2{margin:0;font-size:18px}.modal .controller-name{margin:4px 0 12px}.modal .row{display:flex;align-items:center;gap:10px;padding:10px 2px 4px}.modal-footer{display:flex;justify-content:space-between;gap:8px;margin-top:12px}.mapping{display:flex;flex-direction:column;gap:4px}.mapping-row{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:10px;padding:4px 8px;border-radius:var(--radius);background:var(--bg)}.mapping-row.capturing{outline:2px solid var(--accent)}.mapping-key{font-weight:600}.mapping-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mapping-row .btn{padding:6px 12px}.mapping-actions{display:flex;align-items:center;gap:4px}.mapping-clear{width:30px;height:30px;color:var(--muted)}.controller{display:flex;align-items:stretch;min-width:0}.controller-toggle{position:relative;display:grid;place-items:center;--hold: 0;--toggle-bg: var(--surface-2);background:var(--toggle-bg);color:#1a1d24;opacity:.7;touch-action:none;-webkit-user-select:none;user-select:none}.controller-toggle.active{--toggle-bg: var(--accent);background:var(--toggle-bg);color:var(--accent-light);opacity:1}.controller-toggle svg{display:block}.controller-toggle:before{content:"";position:absolute;inset:2px;border-radius:inherit;padding:3px;background:conic-gradient(var(--accent) calc(var(--hold) * 1turn),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none}.controller-toggle.holding:before{opacity:1}.controller-toggle.active.holding:before{background:conic-gradient(var(--accent-ink) calc(var(--hold) * 1turn),transparent 0)}.controller.open .controller-toggle{border-top-right-radius:0;border-bottom-right-radius:0}.controller-picker{display:flex;align-items:center;gap:4px;min-width:0;padding:0 4px 0 8px;background:var(--surface-2);border-left:1px solid var(--bg);border-radius:0 var(--radius) var(--radius) 0}.controller-select{max-width:min(220px,40vw);min-width:0;border:0;border-radius:0;padding:0;background:transparent;color:var(--text);font:inherit;outline:none}.controller-select option{background:var(--surface)}.controller-gear{width:34px;height:34px;background:var(--surface);color:var(--muted);display:grid;place-items:center}.controller-gear:hover{color:var(--text)}.touch{display:none;user-select:none;-webkit-user-select:none;touch-action:none;min-height:0;min-width:0;--pad-size: 160px;--shoulder-height: 36px;--system-height: 28px}.touch-left,.touch-right{display:grid;align-items:center;justify-items:center;gap:12px;min-width:0}.player.touch-on[data-layout=gbasp] .stage{grid-template-rows:1fr 1fr;grid-template-areas:"screen" "touch"}.player.touch-on[data-layout=gbasp] .touch{grid-area:touch;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"l r" "left right" "sel sta";align-items:center;padding:8px 8px calc(14px + env(safe-area-inset-bottom));background:var(--bg)}.player.touch-on[data-layout=gbasp] .touch-left,.player.touch-on[data-layout=gbasp] .touch-right{display:contents}.player.touch-on[data-layout=gbasp] .touch-left .tbtn-shoulder{grid-area:l;justify-self:start}.player.touch-on[data-layout=gbasp] .touch-right .tbtn-shoulder{grid-area:r;justify-self:end}.player.touch-on[data-layout=gbasp] .dpad{grid-area:left;justify-self:center}.player.touch-on[data-layout=gbasp] .abpad{grid-area:right;justify-self:center}.player.touch-on[data-layout=gbasp] .tbtn-select{grid-area:sel;justify-self:end;margin:6px 8px 0 0}.player.touch-on[data-layout=gbasp] .tbtn-start{grid-area:sta;justify-self:start;margin:6px 0 0 8px}.player.touch-on[data-layout=gba] .stage{grid-template-columns:auto 1fr auto;grid-template-rows:1fr;grid-template-areas:"left screen right"}.player.touch-on[data-layout=gba] .touch{display:contents}.player.touch-on[data-layout=gba] .touch-left,.player.touch-on[data-layout=gba] .touch-right{grid-template-rows:var(--shoulder-height) 1fr var(--pad-size) var(--system-height);align-content:stretch;background:var(--bg)}.player.touch-on[data-layout=gba] .touch-left>.tbtn-shoulder,.player.touch-on[data-layout=gba] .touch-right>.tbtn-shoulder{grid-row:1}.player.touch-on[data-layout=gba] .touch-left>.pad,.player.touch-on[data-layout=gba] .touch-right>.pad{grid-row:3}.player.touch-on[data-layout=gba] .touch-left>.tbtn-pill,.player.touch-on[data-layout=gba] .touch-right>.tbtn-pill{grid-row:4}.player.touch-on[data-layout=gba] .touch-left{grid-area:left;padding:8px 10px 8px calc(12px + env(safe-area-inset-left))}.player.touch-on[data-layout=gba] .touch-right{grid-area:right;padding:8px calc(12px + env(safe-area-inset-right)) 8px 10px}.player.touch-on[data-layout=gba] .tbtn-shoulder{width:var(--pad-size)}.player.touch-on[data-layout=gba] .tbtn-select{justify-self:end;align-self:end}.player.touch-on[data-layout=gba] .tbtn-start{justify-self:start;align-self:end}.player.touch-on .stage.custom{display:block;background:var(--bg)}.player.touch-on .stage.custom .touch{display:block;position:absolute;inset:0;padding:0;background:none;pointer-events:none}.player.touch-on .stage.custom .touch-left,.player.touch-on .stage.custom .touch-right{display:contents}.player.touch-on .stage.custom .screen-box,.player.touch-on .stage.custom .pad,.player.touch-on .stage.custom .tbtn-shoulder,.player.touch-on .stage.custom .tbtn-pill{position:absolute;margin:0}.player.touch-on .stage.custom .pad,.player.touch-on .stage.custom .tbtn-shoulder,.player.touch-on .stage.custom .tbtn-pill{pointer-events:auto}.player .stage.editing .menu-fab{display:none}.player.touch-on .stage.editing .touch,.player.touch-on .stage.editing .touch *{pointer-events:none}.editor-layer{position:absolute;inset:0;z-index:6}.edit-box{position:absolute;box-sizing:border-box;border:2px dashed var(--accent);border-radius:var(--radius);background:#5fd3bc1f;touch-action:none;cursor:move}.edit-box.round{border-radius:50%}.edit-box.dragging{background:#5fd3bc40}.edit-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:600 12px/1 system-ui,sans-serif;color:var(--accent);text-shadow:0 1px 2px rgb(0 0 0 / .8);white-space:nowrap;pointer-events:none}.edit-grip{position:absolute;right:-8px;bottom:-8px;width:24px;height:24px;border-radius:50%;background:var(--accent);box-shadow:0 1px 4px #00000080;cursor:nwse-resize;touch-action:none}.edit-box[data-id=screen] .edit-grip{right:6px;bottom:6px}.editor-bar{position:absolute;top:8px;left:50%;transform:translate(-50%);z-index:7;display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--surface);border-radius:var(--radius);box-shadow:0 8px 24px #00000080;max-width:calc(100% - 16px)}.editor-bar .btn{padding:6px 12px}.player.drawer-mode .editor-bar{top:auto;bottom:calc(8px + env(safe-area-inset-bottom))}.player.drawer-mode .editor-hint{display:none}@media(max-width:600px){.editor-hint{display:none}}.tbtn{appearance:none;border:0;padding:0;border-radius:var(--radius);background:var(--surface-2);color:var(--text);font:600 16px/1 system-ui,sans-serif;touch-action:none;-webkit-tap-highlight-color:transparent}.tbtn.active{background:var(--accent);color:var(--accent-ink)}.tbtn-shoulder{width:max(72px,calc(var(--pad-size) * .5));height:var(--shoulder-height)}.tbtn-pill{width:72px;height:28px;font-size:11px;letter-spacing:.06em;text-transform:uppercase}.pad{position:relative;width:var(--pad-size);height:var(--pad-size);border-radius:50%;background:var(--surface);touch-action:none}.pad-dot{position:absolute;width:8%;height:8%;border-radius:50%;background:var(--surface-2);pointer-events:none}.pad-dot-nw{left:19%;top:19%}.pad-dot-ne{right:19%;top:19%}.pad-dot-sw{left:19%;bottom:19%}.pad-dot-se{right:19%;bottom:19%}.dpad-btn{position:absolute;width:30%;height:30%;border-radius:50%;background:var(--surface-2);color:var(--muted);display:grid;place-items:center;pointer-events:none}.dpad-btn svg{width:45%;height:45%}.dpad-up{left:35%;top:4%}.dpad-down{left:35%;bottom:4%}.dpad-left{top:35%;left:4%}.dpad-right{top:35%;right:4%}.tbtn-a,.tbtn-b{position:absolute;width:40%;height:40%;border-radius:50%;font-size:calc(var(--pad-size) * .14)}.tbtn-a{right:9%;top:12%}.tbtn-b{left:9%;bottom:12%}.abpad .pad-dot-nw{left:24%;top:18%}.abpad .pad-dot-se{right:24%;bottom:18%}.dpad[data-dir="16"] .dpad-right,.dpad[data-dir="144"] .dpad-right,.dpad[data-dir="80"] .dpad-right,.dpad[data-dir="32"] .dpad-left,.dpad[data-dir="160"] .dpad-left,.dpad[data-dir="96"] .dpad-left,.dpad[data-dir="64"] .dpad-up,.dpad[data-dir="80"] .dpad-up,.dpad[data-dir="96"] .dpad-up,.dpad[data-dir="128"] .dpad-down,.dpad[data-dir="144"] .dpad-down,.dpad[data-dir="160"] .dpad-down{background:var(--accent);color:var(--accent-ink)}.link-dialog p{margin:0 0 12px}.link-section{margin-bottom:14px}.link-section h3{margin:0 0 8px;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.link-row{display:flex;align-items:center;gap:12px}.link-code{position:relative;appearance:none;border:0;font:600 26px/1 ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.18em;padding:8px 12px;border-radius:var(--radius);background:var(--surface-2);color:var(--accent-light);cursor:pointer;user-select:all}.link-code:hover{filter:brightness(1.15)}.link-code:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.link-code.copied:after{content:"✓";margin-left:10px;letter-spacing:0;color:var(--accent)}.link-input{flex:1;min-width:0;border:0;border-radius:var(--radius);background:var(--surface-2);color:var(--text);padding:10px 12px;font:600 18px/1.2 ui-monospace,Cascadia Mono,Consolas,monospace;letter-spacing:.18em;text-transform:uppercase}.link-status{min-height:1.4em;margin:0 0 8px}.player.linked [data-action=fast],.player.linked .menu .states{display:none}.link-pill{display:none;align-items:center;gap:1px;padding:4px 10px;border:0;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:inherit;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;cursor:pointer}.player.linked .link-pill{display:inline-flex}.link-pill[aria-pressed=true]{box-shadow:0 0 0 2px var(--text)}.link-pill-sep{opacity:.7;padding:0 1px}.link-stats{position:absolute;top:10px;right:10px;z-index:6;min-width:240px;max-width:calc(100% - 20px);padding:10px 12px;border-radius:var(--radius);background:var(--surface-2);color:var(--text);box-shadow:0 8px 28px #0006;font-size:13px}.link-stats dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:0}.link-stats dt{opacity:.7;white-space:nowrap}.link-stats dd{margin:0;font-variant-numeric:tabular-nums}.link-stats-actions{display:flex;justify-content:flex-end;margin-top:10px}.link-wait{position:absolute;inset:0;z-index:5;display:none;place-items:center;background:#00000073;color:var(--text);font-weight:600;pointer-events:none}.player.linked.waiting .link-wait{display:grid}.link-lobby{display:flex;align-items:center;gap:12px;margin-top:10px}.link-lobby p{flex:1;margin:0}.link-advanced{margin:0 0 12px}.link-advanced summary{cursor:pointer}.link-advanced .row{margin-top:8px}.link-advanced input,.link-mode select{flex:1;min-width:0;border:0;border-radius:var(--radius);background:var(--surface-2);color:var(--text);padding:6px 8px;font:inherit}.link-mode{margin-top:4px}.player[data-system=gbc] .tbtn-shoulder,.player[data-system=gbc] .edit-box[data-id=l],.player[data-system=gbc] .edit-box[data-id=r]{display:none}.side-screens{flex:none;align-self:center;width:22%;max-width:240px;margin-left:8px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:100%}.side-screens figure{margin:0}.side-screens canvas{display:block;width:100%;image-rendering:pixelated;image-rendering:crisp-edges;background:#000;border-radius:4px}.side-screens figcaption{margin-top:2px;font-size:11px;color:var(--muted);text-align:center}.menu .link-side{display:none}.player.linked .menu .link-side{display:flex}.confirm-dialog p{margin:0 0 16px}.player[data-system=nds] .screen{touch-action:none;cursor:crosshair}.tbtn-x,.tbtn-y{display:none;position:absolute;border-radius:50%}.player[data-system=nds] .tbtn-x,.player[data-system=nds] .tbtn-y{display:block}.player[data-system=nds] .tbtn-a,.player[data-system=nds] .tbtn-b,.player[data-system=nds] .tbtn-x,.player[data-system=nds] .tbtn-y{width:34%;height:34%;font-size:calc(var(--pad-size) * .12)}.player[data-system=nds] .tbtn-a{right:3%;top:33%}.player[data-system=nds] .tbtn-b{left:33%;bottom:3%}.player[data-system=nds] .tbtn-x{left:33%;top:3%}.player[data-system=nds] .tbtn-y{left:3%;top:33%}.player[data-system=nds] .abpad .pad-dot{display:none}.player:not([data-system=nds]) .ds-only{display:none}.ds-settings .row>input[type=text],.ds-settings .row>select{flex:1;min-width:0}.ds-settings .row>span:first-child{flex:0 0 120px}.ds-firmware-actions{display:flex;gap:8px;flex-wrap:wrap}.rom-main{-webkit-touch-callout:none;user-select:none}.rom-sync{display:inline-flex;margin-left:8px;color:#e5b43c;vertical-align:-3px}.library-transfer{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.transfer-qr{display:flex;justify-content:center;margin:8px 0}.transfer-qr svg{width:200px;height:200px;border-radius:8px}.transfer-words{margin:8px 0;font-size:22px;font-weight:700;letter-spacing:.02em;text-align:center}.transfer-progress{width:100%;accent-color:var(--accent)}.transfer-offer h3{margin:12px 0 4px;font-size:15px}.transfer-offer .row{padding:4px 2px}.transfer-offer .row>span,.transfer-dialog .row>span{flex:1}.rom{position:relative;--hold: 0}.rom:before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;padding:3px;background:conic-gradient(var(--accent) calc(var(--hold) * 1turn),transparent 0);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;pointer-events:none}.rom.holding:before{opacity:1}