:root{
  --bg:#020816;
  --text:#f5f8ff;
  --muted:#aab6ca;
  --soft:#7f8da4;
  --line:rgba(109,224,255,.18);
  --line-soft:rgba(124,164,220,.16);
  --green:#74f5cf;
  --cyan:#38d7ff;
  --orange:#fb923c;
  --panel-w:340px;
  --shell-top:132px;
  --edge-pad:30px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{height:100%;background:#020816;scroll-behavior:smooth}
body{margin:0;height:100vh;overflow:hidden;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#06162a 0%,#020816 70%,#01040b 100%)}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{cursor:pointer}
body [data-autobyte-header]{position:fixed!important;top:18px!important;left:50%!important;width:min(1880px,calc(100vw - 56px))!important;margin:0!important;transform:translateX(-50%)!important;z-index:1000!important}
.tool-shell{width:100%;height:100vh}
.tool-layout{position:fixed;inset:var(--shell-top) var(--edge-pad) var(--edge-pad) var(--edge-pad);overflow:hidden;border:0;background:transparent;box-shadow:none}
.tracker-stage{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) 62px;gap:14px;overflow:hidden}
.arena-wrap{position:relative;min-height:0;border:1px solid rgba(109,224,255,.18);border-radius:24px;background:#020711;overflow:hidden;box-shadow:none;contain:paint}
.tracker-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:auto;transform:none!important;backface-visibility:visible;background:#020711;filter:none!important}

.stage-actions{display:flex;align-items:center;justify-content:center;gap:12px;min-height:0;pointer-events:auto}
.reader-btn{position:relative;min-width:150px;min-height:50px;overflow:hidden;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.12);border-radius:16px;color:#fff;background:rgba(255,255,255,.035);font-weight:950;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),box-shadow .22s var(--ease),filter .22s var(--ease)}
.reader-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent),radial-gradient(circle at 82% 18%,rgba(56,215,255,.16),transparent 34%);transition:opacity .22s var(--ease)}
.reader-btn:hover{transform:translateY(-2px);border-color:rgba(180,238,255,.26);background:rgba(255,255,255,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 16px 36px rgba(0,0,0,.28),0 0 26px rgba(56,215,255,.07)}
.reader-btn:hover::after{opacity:1}.reader-btn:active{transform:translateY(0);filter:brightness(.96)}
.reader-btn.start{color:#041016;background:linear-gradient(135deg,#61ead1,#94f5b6);border-color:rgba(116,245,207,.76)}.reader-btn.reset{min-width:112px}.btn-label{font-size:14px}
.tracker-panel{position:absolute;top:0;left:0;z-index:20;width:var(--panel-w);min-width:var(--panel-w);max-width:var(--panel-w);height:100%;padding:24px 34px 28px 30px;overflow-y:auto;overflow-x:hidden;border:1px solid var(--line);border-radius:28px;scrollbar-gutter:stable;scroll-padding:36px 0;background:radial-gradient(circle at 18% 8%,rgba(53,240,177,.075),transparent 30%),rgba(2,8,18,.86);box-shadow:0 34px 90px rgba(0,0,0,.40);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);scrollbar-width:thin;scrollbar-color:rgba(116,245,207,.58) transparent}
.tracker-panel::-webkit-scrollbar{width:8px}.tracker-panel::-webkit-scrollbar-track{margin:38px 0;background:transparent}.tracker-panel::-webkit-scrollbar-thumb{border:2px solid rgba(2,8,18,.72);border-radius:999px;background:linear-gradient(180deg,rgba(56,215,255,.48),rgba(53,240,177,.26));background-clip:padding-box}.tracker-panel::-webkit-scrollbar-button:vertical:start:decrement,.tracker-panel::-webkit-scrollbar-button:vertical:end:increment{height:22px;background:transparent}
.panel-content{display:block}.panel-toggle,.clean-minimize-btn{min-height:38px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:1px solid rgba(255,255,255,.10);border-radius:999px;color:rgba(244,248,255,.92);background:rgba(255,255,255,.04);font-weight:900;transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease)}
.panel-toggle:hover,.clean-minimize-btn:hover{border-color:rgba(255,255,255,.18);background:rgba(255,255,255,.06);transform:translateY(-1px)}.panel-toggle-icon{font-size:1.18em;line-height:1}
.eyebrow{display:block;color:#ffc37c;font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.panel-head{margin-top:34px}.panel-head h1{margin:10px 0 12px;font-size:30px;line-height:.98;letter-spacing:-.065em;font-weight:850}.panel-head p{margin:0;color:var(--muted);font-size:16px;line-height:1.56}.control-card{margin-top:22px;padding:16px;border:1px solid var(--line-soft);border-radius:22px;background:rgba(1,7,18,.38)}
.control{display:grid;gap:9px;margin-bottom:18px}.control:last-child{margin-bottom:0}.control label,.range-head label{color:#8fffe1;font-size:12px;font-weight:950;letter-spacing:.14em;text-transform:uppercase}.control small{display:block;margin:0;color:var(--muted);font-size:13px;line-height:1.35}.range-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.range-head strong{font-size:18px}
select{width:100%;min-height:48px;padding:0 42px 0 14px;border:1px solid rgba(124,164,220,.18);border-radius:14px;color:rgba(245,248,255,.94);font-weight:850;background:linear-gradient(180deg,rgba(10,24,44,.72),rgba(5,15,29,.68));outline:none;appearance:none;background-image:linear-gradient(180deg,rgba(10,24,44,.72),rgba(5,15,29,.68)),linear-gradient(45deg,transparent 50%,rgba(245,248,255,.8) 50%),linear-gradient(135deg,rgba(245,248,255,.8) 50%,transparent 50%);background-position:0 0,calc(100% - 21px) 21px,calc(100% - 15px) 21px;background-size:100% 100%,6px 6px,6px 6px;background-repeat:no-repeat}select:focus{border-color:rgba(116,245,207,.55);box-shadow:0 0 0 3px rgba(116,245,207,.08)}option{background:#06101e;color:#f5f8ff}
input[type=range]{width:100%;accent-color:var(--green)}.visible-range-slider{height:28px}.visible-range-slider:focus{outline:1px solid rgba(255,255,255,.34);outline-offset:4px}
.tool-layout.is-panel-collapsed .tracker-panel,body.is-training-active .tracker-panel{position:absolute;top:0;left:0;z-index:30;width:76px;min-width:76px;max-width:76px;height:96px;padding:18px 0 0 16px;overflow:visible;border:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.tool-layout.is-panel-collapsed .panel-content,body.is-training-active .panel-content{display:none}.tool-layout.is-panel-collapsed .panel-toggle,body.is-training-active .panel-toggle{width:52px;height:52px;min-height:52px;justify-content:center;padding:0;border:1px solid rgba(255,255,255,.16);background:rgba(4,12,26,.36);box-shadow:0 16px 34px rgba(0,0,0,.26);pointer-events:auto}.tool-layout.is-panel-collapsed .panel-toggle-text,.tool-layout.is-panel-collapsed .panel-toggle span:not(.panel-toggle-icon),body.is-training-active .panel-toggle-text,body.is-training-active .panel-toggle span:not(.panel-toggle-icon){display:none}.tool-layout.is-panel-collapsed .panel-toggle-icon,body.is-training-active .panel-toggle-icon{display:inline-block;transform:rotate(180deg)}
body:not(.is-pro):not(.is-admin) [data-pro-option]{color:rgba(245,248,255,.55)}
@media(max-width:980px){:root{--edge-pad:14px;--shell-top:116px}.tool-layout{overflow:auto}.tracker-panel{height:46vh;max-height:46vh}.tracker-stage{min-height:640px}.stage-actions{justify-content:stretch}.reader-btn{flex:1}.reader-btn.reset{flex:.75}.tool-layout.is-panel-collapsed .tracker-panel,body.is-training-active .tracker-panel{height:74px}}


/* AutoByte Visual Tracker v5.2 - single canvas render guard.
   DOM orb styling removed intentionally; the tracker ball is canvas-only. */