:root{color-scheme:dark;--bg:#080b0c;--card:#101516;--ink:#eef2ed;--muted:#8d9998;--blue:#d8f88a;--lime:#d8f88a;--cyan:#91dbe4;--line:#ffffff12;--radius:22px;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","PingFang SC","Microsoft YaHei",sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{min-height:100%;background:var(--bg);scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--bg);font-size:14px;-webkit-font-smoothing:antialiased;min-height:100vh}body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:30;opacity:.018;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}.ambient{position:fixed;inset:0;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 12% -5%,#76894316,transparent 40%),radial-gradient(ellipse at 100% 55%,#1b596211,transparent 50%)}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:20px;height:20px;flex:none;vertical-align:middle}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--lime);outline-offset:4px}[hidden]{display:none!important}h1,h2,p{margin:0}h1{font-size:42px;font-weight:650;letter-spacing:-1.5px;line-height:1.28}h2{font-size:16px;font-weight:580;letter-spacing:.1px}.title-dot{color:var(--lime)}small,.fine{font-size:11px;line-height:1.8;color:var(--muted)}.muted{color:var(--muted);font-size:12px;line-height:1.85}.eyebrow,.small-index{font:10px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:1.7px;color:#94a096}.eyebrow{margin-bottom:12px}.accent{color:var(--lime);font-weight:550;font-variant-numeric:tabular-nums}.mobile-break{display:none}.tiny-line{display:inline-block;background:var(--lime);width:18px;height:2px;vertical-align:middle;margin-right:8px}.card{position:relative;background:linear-gradient(140deg,#141a1b,#101516);border:1px solid var(--line);border-radius:var(--radius);padding:25px;margin-bottom:18px;overflow:hidden;min-width:0;box-shadow:0 5px 18px #00000010}.section-heading{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:28px 0 17px}.section-heading.tight{margin:0 0 24px}.section-heading .eyebrow{font-size:9px;margin-bottom:7px}.metric-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}.metric-grid.flat{margin:25px 0}.metric-label{display:block;color:var(--muted);font-size:12px;line-height:1.6;margin-bottom:12px}.metric{display:block;font-size:29px;line-height:1.3;font-weight:550;letter-spacing:-1.1px;margin-bottom:9px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.metric em{font-style:normal;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}.big-value{font-size:48px;letter-spacing:-2px;margin:16px 0 10px;font-weight:550;font-variant-numeric:tabular-nums}.tag,.pill{font:10px/1.4 ui-monospace,SFMono-Regular,monospace;display:inline-flex;align-items:center;gap:7px;border-radius:30px;padding:8px 11px;background:#d8f88a09;border:1px solid #d8f88a1b;color:var(--lime);white-space:nowrap}.pill.good::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px #d8f88a80}.pill.warn{color:#e9bc83;border-color:#e9bc832b;background:#e9bc8310}.text-button{border:0;background:none;color:var(--lime);padding:10px 0;min-height:44px;font-size:12px;display:inline-flex;align-items:center;gap:8px;white-space:nowrap}.text-button .icon{width:16px;height:16px}.primary,.secondary{border-radius:12px;padding:16px 20px;min-height:52px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;font-size:13px;font-weight:650;transition:background .2s,box-shadow .2s,transform .2s}.primary{border:1px solid var(--lime);background:var(--lime);color:#17210c;box-shadow:0 0 25px #d8f88a09}.secondary{background:#ffffff04;border:1px solid #ffffff16;color:#d9e2de}.primary .icon{margin-left:auto}.primary:active,.secondary:active{transform:scale(.98)}label{display:block;font-size:12px;color:#c3ccc7;margin:20px 0 15px;line-height:1.5}input,select,textarea{display:block;width:100%;min-width:0;padding:14px 15px;border:1px solid #ffffff15;border-radius:10px;background:#080d0d;color:var(--ink);margin-top:9px;font-size:16px;transition:border-color .2s,background .2s}input::placeholder,textarea::placeholder{color:#62716c;font-size:13px}input:focus,select:focus,textarea:focus{border-color:#d8f88a70;background:#0e1512}textarea{resize:vertical}.error{color:#ffb3a7;font-size:12px;margin-top:13px;line-height:1.7}.field-caption{float:right;color:#69746f;font:9px ui-monospace,monospace;letter-spacing:1px;margin-top:3px}
/* Brand and atmospheric login */
.brand-symbol{display:inline-flex;position:relative;align-items:center;justify-content:center;background:var(--lime);color:#10170a;width:40px;height:40px;border-radius:11px;font:italic 800 35px/1 Georgia,serif;padding-bottom:6px}.brand-symbol>span{position:absolute;right:3px;top:2px;font:500 17px sans-serif}.login-shell{position:relative;max-width:1320px;min-height:100svh;padding:45px 6% 28px;margin:auto;display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto 1fr auto;column-gap:9%}.login-brand{grid-column:1/-1;display:flex;align-items:center;gap:13px}.login-brand>strong{font-size:20px;letter-spacing:1px}.login-brand>strong>span{color:var(--lime);font-weight:400;margin-left:6px}.brand-edition{font:9px ui-monospace,monospace;letter-spacing:1.2px;color:#79877e;margin-left:auto}.login-scene{position:relative;min-height:600px;padding-top:60px;display:flex;flex-direction:column;justify-content:flex-start}.login-scene>.eyebrow{font-size:9px;letter-spacing:2px;color:#9fae98;position:relative;z-index:2}.display-title{font-size:clamp(68px,8vw,112px);font-weight:800;line-height:.9;letter-spacing:-6px;position:relative;z-index:2;font-family:Arial,Helvetica,sans-serif}.display-title>span{color:var(--lime)}.portal-art{position:absolute;width:420px;height:420px;left:30px;top:180px;perspective:700px}.orb-core{position:absolute;inset:60px;border-radius:50%;background:radial-gradient(circle,#b8f46e12,#12352c20 45%,transparent 72%);filter:blur(12px)}.orbit{position:absolute;inset:5%;border-radius:50%;border:1px solid #d8f88a27;transform:rotate(-28deg) rotateX(30deg);box-shadow:inset 0 0 28px #d8f88a0a,0 0 25px #d8f88a08}.orbit-one{border-top-color:#d8f88a9c;animation:orbit-drift 18s linear infinite}.orbit-two{inset:12%;border-style:dashed;border-color:#97cfbd33;transform:rotate(30deg) rotateX(40deg);animation:orbit-drift 30s linear infinite reverse}.orbit-three{inset:0;border-color:#d8f88a0b;transform:rotate(-35deg) rotateX(50deg)}.controller-art{position:absolute;width:91%;left:5%;top:25%;filter:drop-shadow(0 30px 22px #000b);transform:rotate(-16deg);animation:controller-float 7s ease-in-out infinite}.art-cross{position:absolute;color:#b0c98a;font:22px ui-monospace,monospace}.cross-one{left:3%;top:40%}.cross-two{right:0;bottom:15%;font-size:14px;color:#667a63}.art-coordinate{position:absolute;right:0;top:26%;color:#7a8c7e;font:8px ui-monospace,monospace;letter-spacing:1px;writing-mode:vertical-rl}.scene-caption{position:absolute;left:0;right:0;bottom:10px;display:flex;align-items:center;gap:17px}.caption-line{width:28px;height:1px;background:#aeb89f}.scene-caption p{font-size:13px;color:#94a092;line-height:1.8}.scene-caption strong{font-weight:500;color:#d6dfcf}.scene-number{margin-left:auto;font:10px ui-monospace,monospace;color:#647064;letter-spacing:2px}.login-panel{position:relative;align-self:center;background:linear-gradient(145deg,#1c241c6e,#101612c9);border:1px solid #d8f88a17;border-radius:24px;padding:35px 32px;box-shadow:0 24px 80px #0003;backdrop-filter:blur(20px);margin:40px 0}.login-panel::before{content:"";position:absolute;top:-1px;left:20%;width:60%;height:1px;background:linear-gradient(90deg,transparent,#d8f88a80,transparent)}.login-panel-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;color:var(--lime)}.login-panel-top .small-index{font-size:9px;letter-spacing:1px}.login-panel>h2{font-size:32px;font-weight:600;letter-spacing:-1px;margin-bottom:12px}.login-panel>.muted{font-size:12px}.login-card{margin-top:30px}.login-card .primary{margin-top:26px}.login-private{display:flex;justify-content:center;align-items:center;gap:7px;font-size:10px;color:#8e9a8b;border-top:1px solid var(--line);padding-top:22px;margin-top:25px}.login-private .icon{width:13px;height:13px}.login-footer{grid-column:1/-1;display:flex;justify-content:space-between;border-top:1px solid #ffffff0b;margin-top:35px;padding-top:22px;color:#687365;font:8px ui-monospace,monospace;letter-spacing:1.2px}
/* App frame */
#shell{position:relative}header{max-width:1240px;min-height:104px;padding:26px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:auto;border-bottom:1px solid #ffffff0c}.wordmark{display:flex;align-items:center;gap:12px;font-size:19px;font-weight:700;letter-spacing:.8px;text-decoration:none;color:var(--ink)}.wordmark div>span{font-weight:400;color:var(--lime);margin-left:5px}.wordmark small{display:block;font:7px/2 ui-monospace,monospace;letter-spacing:1.3px;color:#859080}.header-right{display:flex;align-items:center;gap:18px}.header-caption{font:8px ui-monospace,monospace;letter-spacing:1.1px;color:#6b766d}.player-name{font-size:12px;color:#bac6ba;padding-left:18px;border-left:1px solid #ffffff15}.avatar{border:1px solid #ffffff16;background:#121816;border-radius:12px;width:42px;height:42px;color:#9da99b;display:grid;place-content:center}.avatar .icon{width:17px;height:17px}main{max-width:1240px;margin:auto;padding:40px 40px calc(130px + env(safe-area-inset-bottom))}.page{animation:page-in .5s ease both}.page-title{display:flex;justify-content:space-between;align-items:center;margin:0 0 32px;gap:20px}.welcome-note{font-size:12px;line-height:1.7;color:#8c998d;margin-top:16px}.overview-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:20px}.overview-grid>.card{margin:0}.hero{position:relative;overflow:hidden;min-width:0;min-height:340px;border:1px solid #c9e9a22e;border-radius:24px;padding:26px 30px;background:radial-gradient(ellipse at 85% 0%,#69804428,transparent 65%),linear-gradient(120deg,#1a2417,#101a18);isolation:isolate}.hero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.15;background-image:linear-gradient(#d8f88a19 1px,transparent 1px),linear-gradient(90deg,#d8f88a19 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,transparent,#000)}.hero-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1;gap:12px}.outline-pill{display:inline-flex;align-items:center;gap:8px;font:9px ui-monospace,monospace;letter-spacing:1px;color:#e0e7d9}.outline-pill .icon{width:18px;height:18px;color:var(--lime)}.hero-index{font:8px ui-monospace,monospace;letter-spacing:1px;color:#8d9a81}.hero-content{position:relative;z-index:1;margin-top:32px}.hero-kicker{font-size:30px;font-weight:500;letter-spacing:-1px}.hero-label{font-size:11px;color:#bbc6af;margin:22px 0 10px}.hero-label span{color:#8c9c83}.host-ip{font:19px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.4px;overflow-wrap:anywhere;max-width:440px;min-height:60px;color:#f0f6e5;text-shadow:0 2px 15px #000}.copy-button{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:43px;background:var(--lime);border:1px solid var(--lime);color:#18200c;padding:11px 15px;border-radius:9px;margin:18px 0 26px;font-size:12px;font-weight:600;width:200px;transition:box-shadow .2s,transform .2s}.copy-button .icon{width:15px;height:15px}.copy-button:active{transform:scale(.98)}.hero-footer{position:relative;z-index:1;border-top:1px solid #d8f88a1b;padding-top:15px;display:flex;justify-content:space-between;gap:10px;font-size:10px;color:#a2b096}.hero-footer>span:first-child::before{content:"";display:inline-block;width:5px;height:5px;background:#8d9687;border-radius:50%;margin-right:7px}.hero.is-ready .hero-footer>span:first-child::before{background:var(--lime);box-shadow:0 0 10px #d8f88a80}.hero-visual{position:absolute;width:250px;height:250px;right:-50px;top:38px;z-index:-1;opacity:.48;pointer-events:none;transform:rotate(-22deg)}.hero-visual img{width:100%;position:absolute;top:50px;filter:drop-shadow(0 18px 15px #000)}.hero-orbit{position:absolute;inset:0;border:1px solid #c4e29c45;border-radius:50%;box-shadow:0 0 0 30px #d8f88a04,inset 0 0 40px #d8f88a05}.overview-stats{display:flex;flex-direction:column;min-width:0}.overview-stats>.section-heading{margin:0 0 16px;min-height:26px}.overview-stats>.section-heading h2{font-size:13px;color:#b7c4b4}.overview-stats>.metric-grid{flex:1;grid-template-columns:1fr;gap:15px}.metric-card{padding:20px 23px;margin:0;display:grid;grid-template-columns:1fr auto;position:relative}.metric-card .metric-top{grid-column:1/-1;display:flex;align-items:center;gap:8px;color:#a0b1a0;font:8px ui-monospace,monospace;letter-spacing:1.2px;margin-bottom:18px}.metric-top .icon{width:15px;height:15px;color:var(--lime)}.metric-card .metric-label{grid-column:1;align-self:center;font-size:11px;margin:0}.metric-card .metric{grid-column:2;grid-row:2;font-size:26px;margin:0;white-space:nowrap}.metric-card small{grid-column:1/-1;font-size:10px;margin-top:9px}.metric-decoration,.flow-decoration{position:absolute;width:120px;height:100px;right:-40px;top:-40px;border:1px solid #d8f88a0d;border-radius:50%;box-shadow:0 0 0 18px #d8f88a03,0 0 0 36px #d8f88a02;pointer-events:none}.flow-decoration{border-color:#91dbe419}.week-card{padding:25px 30px}.inline-state{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}.inline-state strong{display:block;font-size:16px;font-weight:500;margin:8px 0}.inline-state .eyebrow{font-size:8px}.inline-state .muted{font-size:11px}.inline-state .text-button{font-size:11px;margin-top:-8px}.connection-orbit{width:78px;height:78px;position:relative;border:1px solid #ffffff13;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 12px #ffffff02}.connection-orbit .icon{width:27px;height:27px;color:#889785}.connection-orbit span{position:absolute;width:7px;height:7px;right:6px;top:10px;border-radius:50%;background:#74846c}.is-connected .connection-orbit{border-color:#d8f88a2d;box-shadow:0 0 0 12px #d8f88a03,0 0 45px #d8f88a08}.is-connected .connection-orbit .icon{color:var(--lime)}.is-connected .connection-orbit span{background:var(--lime);box-shadow:0 0 12px #d8f88a80;animation:beacon 3s ease-in-out infinite}.scope-note{font-size:10px;line-height:1.9;color:#788479;margin:22px 3px;max-width:850px}.notice{background:#d8f88a0b;border:1px solid #d8f88a2b;padding:17px 20px;border-radius:16px;margin-bottom:20px;line-height:1.8;font-size:12px}.notice strong{color:var(--lime)}.notice p{overflow-wrap:anywhere;margin:6px 0;color:#adba9b}
/* Floating navigation */
.bottom-nav{position:fixed;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:450px;max-width:calc(100% - 32px);padding:7px;background:#17201bed;backdrop-filter:blur(24px) saturate(1.2);-webkit-backdrop-filter:blur(24px) saturate(1.2);border:1px solid #d8f88a25;border-radius:19px;display:grid;grid-template-columns:repeat(4,1fr);gap:5px;z-index:10;box-shadow:0 12px 45px #0007,inset 0 1px 0 #ffffff06}.bottom-nav button{border:0;background:transparent;color:#8a998b;display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;padding:15px 9px;border-radius:12px;position:relative;transition:background .2s,color .2s}.bottom-nav .icon{width:18px;height:18px}.bottom-nav button.active{background:var(--lime);color:#1a250e}.bottom-nav i{display:none}
/* Charts and journal */
.chart{height:178px;display:flex;align-items:flex-end;gap:12px;padding:15px 5px 0;margin:4px 0 16px;border-bottom:1px solid #ffffff12;background:repeating-linear-gradient(to top,transparent 0,transparent calc(25% - 1px),#ffffff06 calc(25% - 1px),#ffffff06 25%);position:relative}.chart.large{height:260px;margin-top:34px}.chart-column{position:relative;flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}.chart-bar{width:70%;max-width:36px;border:1px solid #d8f88a12;border-bottom:none;background:linear-gradient(0deg,#53633180,#a5bc6b);border-radius:5px 5px 0 0;min-height:3px;padding:0;position:relative;transform-origin:bottom;animation:bar-rise .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--bar-delay,0ms);transition:filter .2s}.chart-bar.current{background:linear-gradient(0deg,#9dbb4d,#ddfa9b);box-shadow:0 -3px 20px #d8f88a0a}.chart-bar.empty{background:#394237;border-color:transparent;opacity:.7}.chart-label{position:absolute;bottom:-24px;font:9px ui-monospace,monospace;color:#99a493;white-space:nowrap}.chart-value{font:9px ui-monospace,monospace;color:#a6b394;margin-bottom:7px;white-space:nowrap}.chart.dense{gap:4px}.chart.dense .chart-value{display:none}.chart.dense .chart-label{font-size:9px}.chart+p{margin-top:35px}.segments{display:grid;grid-template-columns:repeat(4,1fr);padding:5px;background:#141a16;border:1px solid var(--line);border-radius:13px;max-width:460px;margin-bottom:18px}.segments button{border:0;background:none;padding:12px;color:#9baa97;border-radius:8px;min-height:44px}.segments button.active{background:var(--lime);color:#1d290d;box-shadow:0 3px 12px #0002}.date-navigation{display:flex;align-items:center;gap:14px;margin:15px 0 24px;max-width:460px}.date-navigation input{font-size:14px;margin:0;background:transparent;border:0;padding:10px 0;flex:1;min-width:0;color:#b9c5b1}.date-navigation>button:not(.text-button){background:#141a16;color:#c6d4bb;border:1px solid var(--line);border-radius:10px;width:44px;height:44px;flex:none;font-size:24px}.session-row{padding:21px 23px;margin-bottom:12px;background:linear-gradient(110deg,#141a16,#101512);border:1px solid var(--line);border-radius:16px;position:relative;overflow:hidden}.session-row::before{content:"";position:absolute;left:0;top:23px;height:28px;width:2px;background:#d8f88a6b}.session-row-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px}.session-row-head strong{font-size:13px;font-weight:550}.session-row .muted{font-size:11px}.session-row>.muted{margin-top:7px}.timeline{height:7px;background:#ffffff07;border-radius:4px;position:relative;overflow:hidden;margin:17px 0 12px}.timeline-part{position:absolute;height:100%;background:linear-gradient(90deg,#789844,var(--lime));border-radius:3px}.session-ip{font:10px/1.6 ui-monospace,monospace;color:#75836c;overflow-wrap:anywhere;margin-top:12px}.empty-state{padding:48px 25px;background:#11180f;border:1px dashed #d8f88a1e;text-align:center;border-radius:18px;color:var(--muted);font-size:12px;line-height:1.8}.recommendation{background:radial-gradient(ellipse at 90% 0,#79973635,transparent 70%),linear-gradient(145deg,#23301a,#131c13);border-color:#d8f88a30}.recommendation .tag{font-size:8px;letter-spacing:1px;background:none;color:#c4d8b2;padding:0;border:0}.recommend-title{font-size:18px!important;color:#e5eddc!important;margin-top:32px}.recommendation h2{font-size:64px;font-weight:500;letter-spacing:-3px;margin:25px 0 15px;color:var(--lime)}.recommendation h2 small{font-size:13px;font-weight:400;letter-spacing:0;color:#aec492}.recommendation p{color:#9aaf88;font-size:12px;line-height:1.9}.profile-specs{display:flex;align-items:center;gap:22px;margin:30px 0}.profile-specs>span{font-size:26px;color:#dfebd0;font-weight:500}.profile-specs>span>span{font:9px ui-monospace,monospace;color:#a4bb8a;margin-left:6px}.profile-specs i{height:26px;width:1px;background:#d8f88a25}#bitrate-form>.muted{margin:13px 0 24px}#bitrate-form .metric-grid label{margin-top:4px}#bitrate-form .primary{margin-top:22px}#toast{position:fixed;top:max(24px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);background:#d8f88af5;color:#19220e;border:1px solid #e6ffc0;border-radius:12px;box-shadow:0 8px 35px #0005;padding:14px 20px;z-index:40;font-size:12px;line-height:1.7;animation:toast-in .25s ease}#home-speed-note,#client-latency,#internet-latency{margin:14px 0 22px}#home-speed-state,#client-test-state,#internet-test-state,#bitrate-saved{margin-top:14px}#cancel-test,#cancel-internet-test{margin-top:10px}#network .card>.section-heading h2{font-size:16px}#network .tag{font-size:9px;color:#a9bfa1;background:#ffffff04;border-color:#ffffff0b}#network .card>.section-heading h2::before{content:"";display:inline-block;width:3px;height:13px;border-radius:2px;background:var(--lime);margin-right:10px;vertical-align:-1px}#network .metric{font-size:28px}#network .card:nth-of-type(3) .metric,#network .card:nth-of-type(4) .metric{color:var(--cyan)}
@media(min-width:900px){#network,#settings{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}#network>.page-title,#network>.scope-note,#settings>.page-title,#settings>.section-heading,#bitrate-history{grid-column:1/-1}#network>.card,#settings>.card{margin:0}#network>.page-title,#settings>.page-title{margin-bottom:12px}#settings>.recommendation{align-self:start;position:sticky;top:25px;min-height:360px}#settings>#bitrate-form{grid-row:2/4;grid-column:2}#settings>.section-heading{margin:5px 0 0}#bitrate-history{display:grid;grid-template-columns:1fr 1fr;gap:14px}#bitrate-history>.session-row{margin:0}}
@media(hover:hover){.primary:hover,.copy-button:hover{box-shadow:0 0 28px #d8f88a28;background:#e3ffa5}.secondary:hover,.avatar:hover{background:#ffffff0b}.text-button:hover{color:#edffc8}.chart-bar:hover{filter:brightness(1.3)}.bottom-nav button:not(.active):hover{background:#ffffff08;color:#d9e8cb}.card{transition:border-color .25s}.card:hover{border-color:#d8f88a28}}
/* iPad portrait and compact desktops */
@media(min-width:700px) and (max-width:1050px){header{padding:25px 28px}main{padding:32px 28px 130px}.overview-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:16px}.hero{padding:24px;min-height:360px}.hero-index{display:none}.hero-kicker{font-size:27px}.hero-visual{opacity:.3;right:-90px}.host-ip{font-size:18px}.metric-card{display:block;padding:20px}.metric-card .metric{font-size:26px;margin:9px 0}.metric-card .metric-top{margin-bottom:12px}.metric-card small{display:block;font-size:9px}.overview-stats>.section-heading h2{font-size:12px}.week-card{padding:24px}.chart{gap:7px}.header-caption{display:none}.login-shell{padding:35px;column-gap:32px;grid-template-columns:1fr 1fr}.login-scene{min-height:600px;padding-top:60px}.display-title{font-size:75px;letter-spacing:-5px}.portal-art{width:330px;height:330px;left:-30px;top:225px}.login-panel{padding:27px 23px}.login-panel-top .small-index{font-size:8px}.login-footer{font-size:7px}.login-panel>h2{font-size:30px}.brand-edition{font-size:8px}}
@media(min-width:700px) and (max-width:899px){#network{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}#network>.page-title,#network>.scope-note{grid-column:1/-1}#network>.card{margin:0;padding:21px}#network .section-heading.tight{flex-wrap:wrap;gap:9px}#network .metric-grid{gap:10px}#network .metric{font-size:22px}#network .metric-label{font-size:10px}#network .primary,#network .secondary{font-size:12px;padding:14px 10px}}
/* iPhone: generous tap areas, compact composition, safe-area-aware dock */
@media(max-width:699px){h1{font-size:30px;line-height:1.35;letter-spacing:-1px}h2{font-size:15px}.mobile-break{display:block}.card{padding:22px 20px;border-radius:19px;margin-bottom:16px}header{min-height:88px;padding:21px 22px}.brand-symbol{width:34px;height:34px;font-size:30px;border-radius:9px}.brand-symbol>span{font-size:14px}.wordmark{gap:9px;font-size:16px}.wordmark small{font-size:6px;letter-spacing:.8px}.header-caption{display:none}.header-right{gap:10px}.player-name{font-size:10px;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0;border:0}.avatar{width:36px;height:36px;border-radius:10px}.avatar .icon{width:15px;height:15px}main{padding:29px 20px calc(115px + env(safe-area-inset-bottom))}.page-title{margin-bottom:25px;gap:10px;align-items:flex-start}.page-title>.pill{margin-top:30px;font-size:9px;padding:7px 9px}.eyebrow{font-size:8px;letter-spacing:1.2px;margin-bottom:11px}.tiny-line{width:12px;margin-right:4px}.welcome-note{font-size:11px;margin-top:12px}.overview-grid{display:flex;flex-direction:column;gap:19px}.hero{padding:23px 22px;min-height:342px;border-radius:21px}.hero-top{gap:8px}.hero-index{font-size:7px;letter-spacing:.7px}.outline-pill{font-size:8px;letter-spacing:.7px}.hero-content{margin-top:28px}.hero-kicker{font-size:27px}.hero-label{margin-top:24px;font-size:10px}.host-ip{font-size:18px;line-height:1.55;min-height:57px;max-width:100%;letter-spacing:-.45px}.hero-visual{width:190px;height:190px;right:-50px;top:40px;opacity:.32}.hero-visual img{top:40px}.copy-button{width:100%;min-height:45px;margin:17px 0 22px}.hero-footer{font-size:9px;padding-top:15px}.overview-stats>.section-heading{margin:6px 1px 13px;min-height:30px}.overview-stats>.section-heading h2{font-size:13px}.overview-stats>.metric-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.metric-card{display:block;padding:18px 15px;margin:0;border-radius:17px;min-height:173px}.metric-card .metric-top{font-size:7px;letter-spacing:.8px;gap:7px;margin-bottom:22px}.metric-top .icon{width:14px;height:14px}.metric-card .metric-label{font-size:10px}.metric-card .metric{font-size:21px;margin:11px 0 10px;white-space:normal;letter-spacing:-.9px;line-height:1.4}.metric-card small{font-size:9px;line-height:1.7;display:block;margin-top:0}.week-card{padding:23px 20px}.section-heading.tight{gap:10px;margin-bottom:20px}.section-heading .eyebrow{font-size:7px}.section-heading .accent{font-size:11px;white-space:nowrap}.chart{height:158px;gap:9px}.chart-bar{width:80%;max-width:25px}.chart-value{font-size:8px}.chart-label{font-size:8px}.chart+p{font-size:9px;line-height:1.8}.inline-state{flex-direction:row;text-align:left;gap:16px;flex-wrap:wrap;justify-content:flex-start;padding:23px}.inline-state>div:nth-child(2){flex:1;min-width:0}.inline-state .text-button{display:none}.inline-state strong{font-size:13px;margin:6px 0}.inline-state .eyebrow{font-size:7px}.inline-state .muted{font-size:10px;line-height:1.8}.connection-orbit{width:45px;height:45px;box-shadow:0 0 0 6px #ffffff02!important}.connection-orbit .icon{width:20px;height:20px}.connection-orbit span{width:5px;height:5px;right:2px;top:6px}.scope-note{font-size:9px;margin-top:21px;line-height:1.9}.bottom-nav{bottom:max(14px,env(safe-area-inset-bottom));max-width:calc(100% - 32px);padding:6px;border-radius:18px;gap:5px}.bottom-nav button{flex-direction:column;gap:6px;font-size:9px;padding:12px 8px 10px;border-radius:12px;min-height:59px}.bottom-nav .icon{width:19px;height:19px}.segments{margin-top:8px}.date-navigation{gap:10px;margin:18px 0 23px}.date-navigation input{font-size:13px}.date-navigation>button:not(.text-button){width:40px;height:44px}.big-value{font-size:34px;letter-spacing:-1.2px}.chart.large{height:220px}.metric{font-size:24px}.metric-grid{gap:12px}.metric-grid>.card{padding:19px 16px}.metric-label{font-size:11px}.metric-grid .metric{font-size:23px}.session-row{padding:19px 18px}.session-row-head{align-items:flex-start}.session-row-head strong{font-size:11px;line-height:1.7}.session-row-head .accent{font-size:11px;line-height:1.7;white-space:nowrap}.session-ip{font-size:9px}.tag{font-size:8px}.recommendation{padding:28px 24px}.recommendation h2{font-size:60px}.recommend-title{font-size:17px!important}.profile-specs{margin:25px 0}.recommendation .tag{font-size:8px}#network .metric{font-size:25px}#network .card>.section-heading h2{font-size:15px}#network .tag{font-size:8px}#network .muted{font-size:11px}#network .metric-label{font-size:11px}.fine{font-size:10px}.primary,.secondary{min-height:50px}.login-shell{display:flex;flex-direction:column;padding:25px 24px 24px;min-height:100svh;max-width:480px}.login-brand{gap:10px}.login-brand>strong{font-size:17px}.brand-edition{font-size:6px;letter-spacing:.4px}.login-scene{min-height:258px;padding-top:32px}.login-scene>.eyebrow{font-size:7px;letter-spacing:1.3px;margin-bottom:13px}.display-title{font-size:64px;letter-spacing:-4px;line-height:.91}.portal-art{width:245px;height:245px;left:auto;right:-20px;top:27px;z-index:0;opacity:.95}.controller-art{width:94%;left:3%;top:33%}.login-scene .display-title{z-index:2;pointer-events:none;text-shadow:0 2px 25px #080b0c55}.login-scene .display-title>span{font-size:57px}.portal-art .orbit{inset:6%}.art-coordinate{display:none}.art-cross{font-size:15px}.cross-one{top:15%;left:25%}.cross-two{right:7%;bottom:14%}.scene-caption{bottom:3px;left:2px;right:4px;gap:10px}.caption-line{width:16px}.scene-caption p{font-size:10px;line-height:1.8}.scene-caption p br{display:none}.scene-caption strong{margin-left:5px}.scene-number{font-size:8px;letter-spacing:1px}.login-panel{margin:20px 0 0;padding:24px 22px;border-radius:20px;width:100%}.login-panel-top{margin-bottom:17px}.login-panel-top .small-index{font-size:7px;letter-spacing:1px}.login-panel-top .icon{width:16px;height:16px}.login-panel>h2{font-size:26px;margin-bottom:9px}.login-panel>.muted{font-size:10px}.login-card{margin-top:23px}.login-card label{font-size:11px;margin:17px 0}.login-card input{padding:13px 14px;margin-top:8px}.field-caption{font-size:8px}.login-card .primary{margin-top:22px;min-height:48px}.login-private{font-size:9px;margin-top:21px;padding-top:19px}.login-footer{font-size:6px;letter-spacing:.5px;line-height:1.7;margin-top:24px;padding-top:17px}.login-footer>span:last-child{display:none}.login-shell .error{font-size:11px}}
@media(max-width:360px){header{padding:20px 16px}main{padding-left:15px;padding-right:15px}.login-shell{padding:22px 18px}.display-title{font-size:58px}.login-scene .display-title>span{font-size:52px}.portal-art{right:-20px;width:220px;height:220px}.hero{padding:22px 19px}.host-ip{font-size:17px}.metric-card .metric{font-size:19px}.page-title h1{font-size:28px}.page-title>.pill{font-size:8px}.player-name{max-width:65px}}
@media(max-height:600px) and (orientation:landscape){.login-shell{min-height:850px}.bottom-nav{bottom:10px;padding:4px}.bottom-nav button{flex-direction:row;min-height:40px;padding:9px}.bottom-nav .icon{width:16px;height:16px}}
@keyframes controller-float{0%,100%{transform:translateY(0) rotate(-16deg)}50%{transform:translateY(-12px) rotate(-12deg)}}@keyframes orbit-drift{from{transform:rotate(-28deg) rotateX(30deg)}to{transform:rotate(332deg) rotateX(30deg)}}@keyframes beacon{0%,100%{opacity:1}50%{opacity:.45}}@keyframes page-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes bar-rise{from{transform:scaleY(.03);opacity:.3}to{transform:scaleY(1);opacity:1}}@keyframes toast-in{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep decorative orbits within the phone canvas and account for display cutouts. */
.login-shell{overflow:clip}
@media(max-width:699px){header{padding-top:max(21px,env(safe-area-inset-top));padding-left:max(22px,env(safe-area-inset-left));padding-right:max(22px,env(safe-area-inset-right))}main{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}.login-shell{padding-top:max(25px,env(safe-area-inset-top));padding-bottom:max(24px,env(safe-area-inset-bottom))}}
/* Password visibility and precise daily play intervals. */
.password-group>label{margin-bottom:9px}.password-field{display:block;position:relative;margin-bottom:17px}.password-field input{padding-right:56px;margin-top:0}.password-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;border-radius:8px;background:transparent;color:#b8c9a8;display:grid;place-items:center}.password-toggle[aria-pressed=true]{color:var(--lime);background:#d8f88a0a}.password-toggle .icon{width:21px;height:21px}.today-play-card{grid-column:1/-1}.today-play-card .section-heading{margin-bottom:13px}.day-timeline{margin:5px 0 23px}.day-track{height:45px;position:relative;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(25% - 1px),#d8f88a15 calc(25% - 1px),#d8f88a15 25%),linear-gradient(0deg,transparent 12px,#ffffff06 12px,#ffffff06 32px,transparent 32px);border-left:1px solid #d8f88a15;border-right:1px solid #d8f88a15}.day-period{position:absolute;top:0;height:45px;min-width:3px;padding:0;border:0;background:transparent;cursor:pointer}.day-period::before{content:"";position:absolute;left:0;right:0;top:12px;height:20px;border-radius:4px;background:linear-gradient(90deg,#7b9c4a,#d8f88a)}.day-period.ongoing::before{box-shadow:0 0 15px #d8f88a30}.day-period:focus-visible{outline-offset:1px;z-index:2}.day-ticks{display:flex;justify-content:space-between;gap:5px;font:9px/1.6 ui-monospace,monospace;color:#94a38b;margin-top:2px}.play-period-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 25px}.play-period-row{display:flex;align-items:center;gap:12px;padding:17px 0;border-top:1px solid #ffffff0b;min-width:0;scroll-margin:100px}.play-period-row:focus{outline:1px solid #d8f88a50;outline-offset:4px;border-radius:4px}.period-marker{width:6px;height:6px;border-radius:50%;background:#809960;flex:none}.period-marker.ongoing{background:var(--lime);box-shadow:0 0 9px #d8f88a80}.period-info{flex:1;min-width:0}.period-info strong{font:500 15px/1.7 ui-monospace,"PingFang SC",monospace;color:#e3ebda}.period-info .fine{margin:3px 0 0;font-size:10px}.period-duration{font-size:12px;color:var(--lime);text-align:right;white-space:nowrap}.schedule-empty{font-size:12px;color:#9aa88f;line-height:1.8;padding:15px 0 24px}.today-play-card>.fine,.daily-play-card>.fine{border-top:1px solid #ffffff0a;margin-top:8px;padding-top:15px}.recommendation #recommendation-reason{font-size:11px;margin-top:15px;line-height:1.9}.recommendation #recommendation-meta{margin-top:15px;font-size:10px;color:#bfd69d}.recommendation .recommend-title{margin-top:24px}.recommendation .reference-note{margin-top:14px!important;font-size:11px;color:#d7e2ca}.recommendation #copy-recommendation{margin-top:19px;width:auto;min-height:44px;padding:11px 16px}.recommendation #recommended-kbps{font:inherit;color:inherit;letter-spacing:inherit}.recommendation #recommended-resolution,.recommendation #recommended-fps{font:inherit;color:inherit;letter-spacing:inherit;margin:0}
@media(max-width:699px){.play-period-list{grid-template-columns:1fr}.period-info strong{font-size:14px}.period-duration{font-size:11px}.day-ticks{font-size:8px}.today-play-card h2{font-size:14px}.today-play-card .section-heading{gap:8px}.today-play-card .text-button{font-size:10px;gap:3px}.today-play-card .text-button .icon{width:13px;height:13px}.daily-play-card .section-heading h2{font-size:14px}.daily-play-card .tag{font-size:9px}.period-info .fine{font-size:9px}}