:root{color-scheme:dark;--gold:#c99461;--pale:#ecd0a5;--line:#504033;--txt:#f8ede0;--muted:#bcae9c;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -25%,#3d2a20 0%,#130f10 40%,#090b0c 100%);color:var(--txt)}button,input{font:inherit}button:focus-visible{outline:2px solid #eed1a0;outline-offset:3px}.frame{width:min(1100px,100%);margin:0 auto;padding:24px 24px 30px}.masthead{display:flex;justify-content:space-between;gap:15px;align-items:center;flex-wrap:wrap}.eyemark{display:flex;align-items:center;gap:15px}.goldline{height:1px;width:40px;background:linear-gradient(to right,transparent,#bd8e57)}.eyemark .goldline:last-child{transform:rotate(180deg)}h1{font-size:clamp(27px,4vw,43px);margin:0;color:#ecc39a;letter-spacing:.19em;font-family:Georgia,'Times New Roman',serif;font-weight:500}.eyemark p{font-size:10px;letter-spacing:.39em;margin:7px 0;text-align:center;color:#cabba8}.top-controls{display:flex;gap:8px;align-items:center}.connection,.source{font-size:11px;color:#e3cfbb;border:1px solid #675042;border-radius:40px;padding:9px 13px;background:#27201c}.connection.live{color:#8ee3ab;border-color:#41684e}.connection.demo{color:#f6cf8e;border-color:#b28753}.source{color:#c8b69c;border-color:#3c332a}.safety{margin:18px 0;color:#dcc3a4;background:#291c16;border:1px solid #5f4732;padding:12px 16px;border-radius:11px;font-size:12px;line-height:1.6}.content{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:18px}main{min-width:0}.instruments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.gauge{padding:7px;background:radial-gradient(circle at 38% 30%,#40342b,#131313 65%);border:1px solid #4c372b;border-radius:22px;box-shadow:0 8px 18px #0009}.dial{width:100%;position:relative;aspect-ratio:1;display:grid;place-items:center;overflow:hidden;border-radius:50%;background:radial-gradient(circle at 50% 52%,#141312 0%,#0c0c0d 63%,#312921 66%,#b28a57 68%,#302018 72%,#0b0b0a 77%);border:2px solid #927351;box-shadow:inset 0 0 0 3px #2a211a,inset 0 0 32px #000,0 0 10px #ad743744}.dial svg{width:100%;height:100%;position:absolute;inset:0;overflow:visible}.dial .center{z-index:1;position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;margin-top:19px}.g-icon{font-size:21px;color:#ca985c;line-height:1}.g-name{font-size:clamp(8px,.9vw,10px);font-weight:750;letter-spacing:.08em;margin-top:7px}.gauge strong{font-size:clamp(30px,3.7vw,50px);font-variant-numeric:tabular-nums;letter-spacing:-.07em;line-height:1.05;margin-top:5px;font-weight:680;color:#f7dfb5}.g-unit{font-size:14px;color:#ddbb86}.power-status{margin-top:16px;background:linear-gradient(90deg,#2a180d,#211813,#27201a);border:1px solid #775131;border-radius:30px;min-height:55px;display:flex;align-items:center;justify-content:center;gap:12px;box-shadow:inset 0 0 15px #342213}.power-status>span{font-size:26px;color:#ffa348}.power-status div{font-size:17px;color:#dec3a1}.power-status strong{color:#f5d6a9}.power-status i{margin-left:25px;width:12px;height:12px;border-radius:50%;background:#6b5d4e;box-shadow:0 0 10px #6b5748}.power-status i.lit{background:#70e69a;box-shadow:0 0 15px #67db93}.section-title{margin:24px 2px 11px;display:flex;align-items:center;gap:14px}.section-title h2{font-size:15px;font-weight:550;color:#e2c49d;margin:0;white-space:nowrap}.section-title span{height:1px;background:linear-gradient(90deg,#5d4931,transparent);flex:1}.modes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.modes button{padding:14px 5px;border-radius:11px;border:1px solid #806446;background:linear-gradient(145deg,#28201b,#151414);color:#e8c99f;min-height:55px}.modes span{display:inline-block;margin-left:3px}.modes button.selected{background:linear-gradient(135deg,#ca8034,#47301f);box-shadow:0 0 12px #c482385e;border-color:#f1b669;color:#fff}.controls{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px}.controls button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:12px 3px;border-radius:12px;min-height:88px;background:linear-gradient(145deg,#332920,#151515);border:1px solid #6a4c34;color:#e4c9a5;font-size:11px}.controls button b{font-size:28px;line-height:1.1;font-weight:400;color:#e5ac6b}.controls button.on{border-color:#e7a65f;background:#462912;color:#fff;box-shadow:0 0 13px #b67c3960}.controls button:disabled,.modes button:disabled,.nudge button:disabled{opacity:.64;cursor:not-allowed}.targets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.target{background:linear-gradient(145deg,#2c2926,#151617);border:1px solid #70563d;border-radius:13px;padding:13px 11px}.target>span{font-size:10px;color:#ceaf8b;letter-spacing:.06em}.target>div{display:flex;align-items:center;margin-top:7px;gap:4px}.target strong{font-size:32px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.06em}.target small{font-size:13px;color:#cca97c}.nudge{margin-left:auto;display:flex;flex-direction:column;gap:3px}.nudge button{background:#3a2d22;color:#f3ca90;border:1px solid #644629;border-radius:7px;min-width:26px;min-height:23px}.menu{margin-top:24px;border-bottom:1px solid #5e4938;display:flex;overflow-x:auto;gap:3px}.menu button{padding:11px 15px;border:0;background:transparent;color:#c4b3a4;font-size:13px;white-space:nowrap}.menu button.selected{background:#32241a;border-bottom:2px solid #d4a573;color:#ffdfb6}.pane{padding:18px 12px;border-bottom:1px solid #544032;background:#151313;border-radius:0 0 15px 15px}.pane[hidden]{display:none}.pane h2{font-size:18px;margin:3px 0 7px;color:#f0d2a9}.pane p{font-size:12px;line-height:1.7;color:#c3b2a2}.settings-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.settings-grid label{font-size:12px;color:#e4c59f;background:#251e19;border:1px solid #49392d;border-radius:9px;padding:12px;display:grid;gap:6px}.settings-grid input{padding:8px;background:#151515;color:#f8e4c4;border:1px solid #584231;border-radius:7px;width:100%}.pane .item,.aside-card .item{display:flex;gap:6px;justify-content:space-between;border-bottom:1px solid #42342a;padding:13px 0;align-items:center}.item span{color:#b69f8a;font-size:11px}.item b,.item strong{font-size:11px;text-align:right;overflow-wrap:anywhere}.chartGrid{fill:none;stroke:#46362a;stroke-width:1}.pane svg{width:100%;height:auto;background:#100f0e;border:1px solid #4c3a30;border-radius:9px}.pane #chartLine{fill:none;stroke:#f3aa5b;stroke-width:3;stroke-linecap:round}.aside-card{padding:17px 14px;background:linear-gradient(155deg,#282019,#151312);border:1px solid #57402e;border-radius:15px;margin-bottom:15px}.aside-card>span{font-size:10px;letter-spacing:.17em;color:#ceac82}.aside-card h3{font-size:23px;margin:8px 0}.aside-card p{color:#baa994;font-size:12px;line-height:1.6}.aside-card .small{font-size:10px;color:#978779}.demo-button,.quiet-button{width:100%;background:#c68d56;color:#171311;font-weight:750;border:1px solid #e6b782;padding:11px;border-radius:9px;margin-top:8px}.quiet-button{background:#2a211a;color:#f1cba1}.demo-button:hover{filter:brightness(1.08)}footer{display:flex;justify-content:space-between;gap:10px;color:#998776;font-size:11px;margin-top:18px;padding:14px 0;border-top:1px solid #3d3025}@media(max-width:1020px){.content{grid-template-columns:1fr}aside{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.aside-card{margin:0}.gauge strong{font-size:clamp(32px,5vw,50px)}}@media(max-width:670px){.frame{padding:12px 12px 25px}.masthead{justify-content:center}.top-controls{justify-content:center}.goldline{width:30px}h1{font-size:32px}.eyemark p{font-size:8px}.safety{font-size:11px;margin:12px 0}.instruments{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.gauge{border-radius:18px;padding:5px}.gauge strong{font-size:clamp(30px,9vw,45px)}.gauge .g-name{font-size:9px}.g-icon{font-size:17px}.g-unit{font-size:13px}.power-status{min-height:49px}.power-status strong{font-size:15px}.modes{grid-template-columns:repeat(2,minmax(0,1fr))}.controls{grid-template-columns:repeat(3,minmax(0,1fr))}.targets{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.target{padding:9px 7px}.target>span{font-size:9px}.target strong{font-size:clamp(20px,6vw,28px)}.target small{font-size:11px}.nudge button{min-width:21px;min-height:22px}.settings-grid{grid-template-columns:repeat(2,1fr)}aside{grid-template-columns:1fr}.section-title{margin-top:19px}.menu button{padding:12px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* v0.4: persistent app navigation and protected account dialog */
.bottom-nav{position:sticky;bottom:10px;z-index:7;display:flex;align-items:stretch;justify-content:space-around;gap:7px;margin:22px auto 14px;padding:7px;border:1px solid #6f563d;background:linear-gradient(135deg,#211912f5,#100f0ef5);box-shadow:0 14px 48px #000b;border-radius:20px;max-width:850px;backdrop-filter:blur(20px)}
.bottom-nav a,.bottom-nav button{color:#d0b18c;background:transparent;border:0;text-align:center;text-decoration:none;flex:1;padding:12px 5px;border-radius:13px;cursor:pointer;font-weight:650;font-size:12px}
.bottom-nav span{display:block;font-size:20px;margin-bottom:5px}.bottom-nav .bottom-active,.bottom-nav a:hover,.bottom-nav button:hover{color:#ffe4bd;background:#60422b}
.account-dialog{color:#f7e8d3;background:#161311;border:1px solid #806146;border-radius:21px;padding:25px;width:min(92vw,490px);max-height:min(90vh,900px);overflow:auto;box-shadow:0 30px 100px #000c}
.account-dialog::backdrop{background:#050303c9;backdrop-filter:blur(5px)}
.account-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.account-head h2{margin:5px 0;font-size:28px;color:#f5d0a1}.account-brow{color:#d39f68;letter-spacing:.16em;font-size:10px}
.close-dialog{background:#392b23;color:#f6d3ad;border:1px solid #665039;border-radius:11px;font-size:25px;width:39px;height:39px;cursor:pointer}
.account-intro,.small-note{font-size:12px;color:#beae9b;line-height:1.65}.account-form{display:grid;gap:15px;margin-top:18px}.account-form[hidden]{display:none}
.account-form label{display:grid;gap:7px;font-size:12px;color:#e6c6a0}.account-form input:not([type="checkbox"]){background:#261f19;border:1px solid #6b533c;color:#fff2df;border-radius:11px;padding:13px 12px;font-size:15px;width:100%;min-width:0}
.password-row{display:flex;position:relative}.password-row input{padding-right:50px!important}.password-row button{position:absolute;right:0;top:0;bottom:0;border:0;background:transparent;color:#dabb8d;cursor:pointer;width:48px;font-size:20px}
.form-between,.profile-row{display:flex;align-items:center;justify-content:space-between;gap:10px}.checkline{display:flex!important;align-items:center;gap:7px!important;white-space:nowrap}.text-btn{background:none;border:0;color:#f3b978;cursor:pointer;padding:5px;font-size:12px}
.gold-btn{background:linear-gradient(120deg,#9a5e2a,#d69a59);color:#1c120c;border:1px solid #f7c58b;border-radius:12px;font-size:14px;font-weight:800;padding:14px;cursor:pointer}
.account-notice{font-size:12px;min-height:16px;color:#f2c18c}.account-notice:empty{display:none}
@media(max-width:560px){.bottom-nav{bottom:5px;margin-left:-8px;margin-right:-8px}.bottom-nav a,.bottom-nav button{font-size:10px;padding:10px 3px}.account-dialog{padding:18px}}

/* v0.5: precise bottom alignment, rich but restrained automotive interaction */
.bottom-nav{
  position:relative;bottom:auto;
  margin:20px 0 12px;max-width:none;width:calc(100% - 258px);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;justify-content:stretch;
  gap:6px;padding:7px 8px;overflow:hidden;
  border-color:#896143;
  background:linear-gradient(135deg,#382719f7 0%,#171310f8 49%,#2b2017f5 100%);
  box-shadow:inset 0 1px 0 #f1be8042,0 13px 32px #000a,0 1px 20px #b3793222;
}
.bottom-nav a,.bottom-nav button{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:3px;margin:0;min-width:0;min-height:63px;
  padding:8px 4px;line-height:1.3;white-space:normal;
  border:1px solid transparent;border-radius:14px;
  transition:transform .21s ease,box-shadow .25s ease,background .25s ease,border-color .25s ease,color .2s ease;
}
.bottom-nav span{display:block;font-size:22px;line-height:1.1;margin:0;transition:transform .2s ease,filter .2s ease}
.bottom-nav .bottom-active{background:linear-gradient(155deg,#835336,#493021);border-color:#b58a5d;box-shadow:inset 0 1px 0 #ffdbaa38,0 0 17px #b87b3727}
.bottom-nav :is(a,button):is(:hover,:focus-visible){
  color:#fff2d7;background:linear-gradient(155deg,#735032,#38271b);
  border-color:#d9a56a;box-shadow:inset 0 1px 0 #ffe0a342,0 0 26px #c7834059,0 6px 16px #0009;
  transform:translateY(-2px)
}
.bottom-nav :is(a,button):is(:hover,:focus-visible) span{transform:scale(1.1);filter:drop-shadow(0 0 8px #eeb87888)}
:where(.modes button,.controls button,.nudge button,.menu button,.demo-button,.quiet-button,.gold-btn,.text-btn,.close-dialog,.password-row button){
  transition:transform .21s ease,filter .24s ease,box-shadow .27s ease,background .25s ease,border-color .25s ease,color .2s ease;
}
:where(.modes button,.controls button,.nudge button,.menu button,.demo-button,.quiet-button,.gold-btn,.close-dialog,.password-row button):not(:disabled):is(:hover,:focus-visible){
  transform:translateY(-2px);filter:brightness(1.15);
  border-color:#efbc79;box-shadow:inset 0 1px 0 #ffdaa23e,0 0 23px #e4a35a38,0 7px 18px #0008;
  cursor:pointer;
}
:where(.modes button,.controls button,.nudge button,.menu button,.demo-button,.quiet-button,.gold-btn,.close-dialog):not(:disabled):active{transform:translateY(0) scale(.985);filter:brightness(.99)}
:where(.text-btn,.password-row button):is(:hover,:focus-visible){color:#ffddaa;filter:drop-shadow(0 0 5px #dea26077)}
:is(.gauge,.target,.aside-card){transition:transform .32s ease,box-shadow .33s ease,border-color .33s ease}
:is(.gauge,.target,.aside-card):hover{transform:translateY(-3px);border-color:#b4895f;box-shadow:0 15px 34px #000b,0 0 20px #bc79321e}
.gauge:hover .dial{box-shadow:inset 0 0 0 3px #3b2d21,inset 0 0 34px #000,0 0 24px #b77b4888}
.dial svg line,.dial svg path{transition:all .7s cubic-bezier(.2,.75,.25,1)}
.gauge strong,.target strong{font-weight:750;text-shadow:0 1px 12px #daa96725}
.connection.demo{box-shadow:0 0 15px #c899472e;border-color:#d6aa72;background:#3c2c1e;color:#ffe2af}
.safety{transition:box-shadow .3s ease;border-color:#88623a;box-shadow:inset 0 1px 0 #e9b26d17}
input:not(:disabled):focus-visible{border-color:#e8b981!important;box-shadow:0 0 0 3px #c9904630;outline:none}
button:disabled{cursor:not-allowed}
@media(max-width:1020px){.bottom-nav{width:100%;margin:18px auto 10px}}
@media(max-width:560px){.bottom-nav{position:relative;bottom:auto;margin:14px 0 8px;width:100%;gap:2px;padding:5px;border-radius:16px}.bottom-nav a,.bottom-nav button{font-size:11px;min-height:60px;padding:9px 2px}.bottom-nav span{font-size:19px}}
@media(hover:none){:is(.gauge,.target,.aside-card):hover{transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* v0.5.1 — settings are optional, no modal dead-end */
.optional{color:#ba9d79;font-size:11px;font-style:normal;font-weight:400;margin-left:5px}
.device-feedback{min-height:0;margin:0;font-size:12px;color:#a6ebbf;line-height:1.5}
.device-feedback:empty{display:none}
.device-feedback.error{color:#ffb1a5}
.skip-btn{display:block;width:100%;background:#2a221b;color:#ffddb5;border:1px solid #8d6b48;padding:14px 12px;border-radius:12px;cursor:pointer;font-size:13px;transition:.22s ease}
.skip-btn:hover,.skip-btn:focus-visible{background:#4b3524;border-color:#e2b477;box-shadow:0 0 17px #b7793238;transform:translateY(-1px)}
#deviceIP[aria-invalid="true"]{border-color:#fa8e80;box-shadow:0 0 0 2px #fa8e8030}
.app-toast{position:fixed;z-index:10000;bottom:22px;left:50%;transform:translateX(-50%);max-width:min(90vw,620px);padding:14px 20px;border:1px solid #d8a471;border-radius:15px;background:#241b13;color:#fce7c7;box-shadow:0 20px 50px #000c;font-size:14px;text-align:center;line-height:1.5}
.app-toast[hidden]{display:none}
@media(max-width:600px){.app-toast{bottom:14px;font-size:13px;padding:12px 16px}}
@media(prefers-reduced-motion:reduce){.skip-btn{transition:none}}

/* v0.5.2: Login is not device registration; advanced IP remains optional. */
.advanced-connection{border:1px solid #705038;border-radius:14px;background:#221912;padding:13px 15px}
.advanced-connection summary{cursor:pointer;color:#f3cca2;font-size:13px;font-weight:650;line-height:1.5}
.advanced-connection summary:hover,.advanced-connection summary:focus-visible{color:#ffe9ce;text-shadow:0 0 10px #dc94465c}
.advanced-connection p,.live-link-warning{font-size:12px;color:#c5b39f;line-height:1.65}
.advanced-connection label{margin-top:12px}
#checkLive{margin:9px 0 16px;width:100%;min-height:46px}
#openAccount{white-space:normal}

/* Uslada v0.5.3 — three owner appearance themes, separate from hardware state */
:root{--user-accent:#daaa72;--user-glow:#ac7338;--user-bg:#100d0b;--user-fg:#f2d7b6;}
:root[data-theme="graphite"]{--user-accent:#9ab0c3;--user-glow:#537791;--user-bg:#10151c;--user-fg:#e2eaf5;}
:root[data-theme="north"]{--user-accent:#84ccc9;--user-glow:#529ea8;--user-bg:#101f25;--user-fg:#e0f3ee;}
:root[data-theme="graphite"] body{background:radial-gradient(ellipse at 50% -8%,#2b3948 0%,#0e131a 58%,#080b0e 100%)}
:root[data-theme="north"] body{background:radial-gradient(ellipse at 45% -12%,#264a4a 0%,#11272b 48%,#0a1417 100%)}
:root[data-theme="graphite"] :is(.gauge,.target,.aside-card,.pane,.account-dialog){border-color:#566a7e!important;background-color:#19232d!important;box-shadow:0 8px 28px #05111c80}
:root[data-theme="north"] :is(.gauge,.target,.aside-card,.pane,.account-dialog){border-color:#457877!important;background-color:#173134!important;box-shadow:0 8px 28px #061a1a80}
:root[data-theme="graphite"] :is(.bottom-nav,.account-dialog,.power-status){border-color:#617d96;background:linear-gradient(145deg,#25384b,#141c26)}
:root[data-theme="north"] :is(.bottom-nav,.account-dialog,.power-status){border-color:#5a9997;background:linear-gradient(145deg,#1b4445,#10242a)}
:root[data-theme="graphite"] :is(.gold-btn,.demo-button){background:linear-gradient(135deg,#819bb2,#b7ccd8);border-color:#b7d1eb}
:root[data-theme="north"] :is(.gold-btn,.demo-button){background:linear-gradient(135deg,#4da3a2,#93d4c8);border-color:#b1ece0}
:root[data-theme="graphite"] .eyemark h1,:root[data-theme="graphite"] .gauge strong{color:#e4ecf9}
:root[data-theme="north"] .eyemark h1,:root[data-theme="north"] .gauge strong{color:#c9f4ec}
.theme-picker{border:1px solid #72563d;border-radius:13px;margin:10px 0;padding:14px 12px}
.theme-picker legend{font-size:14px;font-weight:720;color:var(--user-fg)}
.theme-hint{font-size:11px;color:#b8ac9d;margin:4px 0 14px}
.theme-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.theme-option{display:grid;gap:7px;justify-items:center;align-content:center;cursor:pointer;min-height:77px;padding:9px 3px;border-radius:12px;background:#28211c;color:#f2d9ba;border:1px solid #685039;font-size:11px;font-weight:700;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.theme-option i{display:block;height:23px;width:44px;border-radius:40px;border:1px solid #c9a778;background:linear-gradient(110deg,#130d0a,#e4a25b)}
.theme-option[data-theme="graphite"] i{background:linear-gradient(110deg,#0a111b,#aabbd0);border-color:#b6ccda}
.theme-option[data-theme="north"] i{background:linear-gradient(110deg,#0a2228,#7cd0c6);border-color:#8cd5d2}
.theme-option[aria-pressed="true"]{border-color:#edc18e;box-shadow:0 0 0 2px #e8b57075,0 0 19px #c8924c3c;transform:translateY(-2px)}
.theme-option:focus-visible,.theme-option:hover{outline:2px solid #dfb686;outline-offset:1px;transform:translateY(-2px)}
.account-channel{background:#231e1a;border:1px solid #654a38;padding:15px;border-radius:13px;line-height:1.6}
.account-channel strong{font-size:13px;display:block}.account-channel span{font-weight:700;color:#edb67b;font-size:12px}.account-channel p{font-size:11px;color:#c8b9a8;margin:7px 0 0}
.technical{border:1px solid #67503b;border-radius:12px;padding:13px}.technical summary{cursor:pointer;font-size:12px;font-weight:700;color:#f3c28d}.technical p{font-size:11px;color:#b4a794}
.technical label{margin-top:12px}
@media(prefers-reduced-motion:reduce){.theme-option{transition:none!important}}