:root {
  color-scheme: dark;
  --bg: #05070b;
  --card: rgba(17, 20, 29, .76);
  --card2: rgba(22, 25, 35, .86);
  --line: rgba(255,255,255,.075);
  --text: #f7f8fc;
  --muted: #858b99;
  --muted2: #555b68;
  --cyan: #62e8ff;
  --blue: #6288ff;
  --violet: #ad73ff;
  --pink: #ff78be;
  --green: #62f5ad;
  --red: #ff617b;
  --radius: 22px;
  --shadow: 0 22px 70px rgba(0,0,0,.34);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif; }
body { overflow-x:hidden; background:
  radial-gradient(90% 45% at 92% -2%, rgba(85,115,255,.11), transparent 65%),
  radial-gradient(70% 40% at -10% 20%, rgba(119,242,255,.07), transparent 70%),
  #05070b; }
button, input { font: inherit; }
button { color:inherit; }
.app-shell { width:min(100%, 480px); margin:0 auto; padding:calc(env(safe-area-inset-top) + 18px) 18px 0; opacity:0; transform:translateY(10px); transition:.55s cubic-bezier(.2,.8,.2,1); }
.app-shell.ready { opacity:1; transform:none; }
.topbar { display:flex; align-items:center; justify-content:space-between; margin:3px 2px 23px; }
.brand { display:flex; gap:11px; align-items:center; }
.hp-mark { width:40px; height:40px; display:grid; place-items:center; border-radius:13px; position:relative; overflow:hidden; background:linear-gradient(145deg,#171b25,#0d1017); border:1px solid rgba(255,255,255,.1); box-shadow:inset 0 1px rgba(255,255,255,.07),0 12px 25px rgba(0,0,0,.32); }
.hp-mark::after { content:""; position:absolute; width:120%; height:35%; top:-40%; left:-80%; transform:rotate(-28deg); background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); animation:logoShine 4.8s ease-in-out infinite 1.1s; }
.hp-mark span { font-size:16px; font-weight:900; letter-spacing:-1.5px; background:linear-gradient(125deg,#eafcff 3%,#6deaff 35%,#7f8cff 67%,#e8d7ff); -webkit-background-clip:text; color:transparent; }
.brand-title { font-size:17px; font-weight:760; letter-spacing:-.35px; }
.brand-subtitle,.eyebrow { margin-top:2px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:1.55px; }
.icon-btn { width:42px; height:42px; border:1px solid var(--line); background:rgba(255,255,255,.035); border-radius:14px; display:grid; place-items:center; cursor:pointer; }
.icon-btn svg { width:20px; fill:#c8ccd7; }.icon-btn.small{width:35px;height:35px;border-radius:11px;font-size:25px;color:#a8adba}.icon-btn:active{transform:scale(.97)}
.card { position:relative; overflow:hidden; border:1px solid var(--line); background:linear-gradient(150deg,rgba(24,28,39,.82),rgba(13,16,23,.88)); box-shadow:inset 0 1px rgba(255,255,255,.035), var(--shadow); border-radius:var(--radius); }
.device-hero { min-height:139px; padding:21px 20px; margin-bottom:27px; }
.hero-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; position:relative; z-index:2; }
.device-title-button { border:0; background:transparent; padding:5px 0 0; display:flex; align-items:center; gap:4px; font-weight:790; font-size:25px; letter-spacing:-1.05px; cursor:pointer; max-width:260px; }
.device-title-button span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }.device-title-button svg{width:19px;fill:#777e8d;flex:none}
.hero-meta { position:relative; z-index:2; margin-top:15px; font-size:12px; color:#707784; }
.hero-glow { position:absolute; width:220px; height:170px; right:-65px; top:-80px; background:radial-gradient(circle,rgba(80,132,255,.19),rgba(104,99,255,.06) 45%,transparent 68%); filter:blur(5px); }
.status-pill { height:29px; padding:0 10px; border-radius:999px; display:flex; align-items:center; gap:6px; font-size:9px; letter-spacing:.8px; border:1px solid; flex:none; margin-top:1px; }
.status-pill span { width:6px;height:6px;border-radius:50%;box-shadow:0 0 10px currentColor}.status-online{color:var(--green);background:rgba(98,245,173,.07);border-color:rgba(98,245,173,.17)}.status-offline{color:#767d8b;background:rgba(122,129,145,.06);border-color:rgba(122,129,145,.12)}
.section { margin-bottom:28px; }.section-heading{display:flex;align-items:center;justify-content:space-between;margin:0 3px 12px}.section-heading h2{font-size:14px;margin:0;font-weight:760;letter-spacing:-.15px}.section-heading>span{font-size:9px;font-weight:800;letter-spacing:.8px;color:#5f6674}.live-label{color:#6f7785!important;display:flex;align-items:center;gap:6px}.live-label i{width:5px;height:5px;border-radius:50%;background:var(--green);box-shadow:0 0 10px rgba(98,245,173,.65)}
.power-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.power-card { min-width:0; height:119px; padding:14px 10px 12px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(155deg,rgba(25,29,40,.84),rgba(12,15,21,.88)); box-shadow:inset 0 1px rgba(255,255,255,.035),0 15px 35px rgba(0,0,0,.24); display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-end; cursor:pointer; text-align:left; transition:.2s ease; }
.power-card:active{transform:scale(.975);background:linear-gradient(155deg,rgba(32,37,50,.9),rgba(15,18,25,.92))}.power-card:disabled{opacity:.45;cursor:not-allowed}.power-icon{width:37px;height:37px;border-radius:13px;display:grid;place-items:center;margin-bottom:auto;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06)}.power-icon svg{width:18px;fill:#a9afbc}.power-start .power-icon{background:rgba(98,245,173,.065);border-color:rgba(98,245,173,.11)}.power-start .power-icon svg{fill:#75eeb5}.power-danger .power-icon{background:rgba(255,97,123,.06);border-color:rgba(255,97,123,.11)}.power-danger .power-icon svg{fill:#ff8095}.power-label{font-size:12px;font-weight:720;margin-bottom:3px}.power-card small{font-size:8.5px;color:#5d6471;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%}
.metrics-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.metric-card{height:139px;padding:16px 15px 12px}.metric-wide{grid-column:1/-1;height:142px}.metric-top{display:flex;align-items:center;justify-content:space-between}.metric-top span{font-size:9px;color:#727987;font-weight:820;letter-spacing:1.1px}.metric-top b{font-size:20px;letter-spacing:-.8px}.metric-sub{font-size:10px;color:#525966;margin-top:4px}.network-row{display:flex;gap:20px;font-size:10px;color:#646c7a;margin-top:6px}.network-row b{font-weight:700;color:#8992a3}.sparkline{position:absolute;left:0;right:0;bottom:0;height:59px;overflow:hidden;opacity:.8}.sparkline svg{width:100%;height:100%;display:block}.sparkline path.area{fill:url(#areaGrad)}.sparkline path.line{fill:none;stroke:rgba(111,220,255,.7);stroke-width:1.6;vector-effect:non-scaling-stroke}.metric-wide .sparkline path.line{stroke:rgba(151,121,255,.72)}
.future-section{opacity:.78}.future-row{height:76px;display:flex;align-items:center;padding:0 16px;gap:12px}.future-icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;border:1px dashed rgba(255,255,255,.13);color:#6e7583}.future-row>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.future-row b{font-size:12px}.future-row small{font-size:9px;color:#646b78}.chevron{margin-left:auto;font-size:25px;color:#4f5663}.bottom-safe{height:calc(16px + env(safe-area-inset-bottom))}
.splash { position:fixed;inset:0;z-index:100;background:radial-gradient(60% 40% at 50% 42%,rgba(89,102,255,.10),transparent 70%),#05070b; display:flex; flex-direction:column; align-items:center;justify-content:center;transition:opacity .55s ease,visibility .55s ease; }
.splash.hide{opacity:0;visibility:hidden}.splash-logo-wrap{sizing:content;position:relative;overflow:hidden;border-radius:30px}.hp-mark--large{width:98px;height:98px;border-radius:29px}.hp-mark--large span{font-size:38px;letter-spacing:-4px}.splash-shine{position:absolute;inset:-50%;background:linear-gradient(110deg,transparent 43%,rgba(255,255,255,.2) 50%,transparent 57%);transform:translateX(-60%);animation:splashSweep 1.55s ease .25s both}.splash-sub{font-size:9px;font-weight:800;letter-spacing:3.8px;color:#636a79;margin-top:17px;animation:fadeUp .8s ease .35s both}
.sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.58);backdrop-filter:blur(4px);z-index:50;opacity:0;visibility:hidden;transition:.25s}.sheet-backdrop.show{opacity:1;visibility:visible}.sheet{position:fixed;z-index:55;left:0;right:0;bottom:0;max-height:74vh;background:linear-gradient(160deg,#151922,#0d1017);border:1px solid rgba(255,255,255,.08);border-bottom:0;border-radius:28px 28px 0 0;padding:10px 18px calc(15px + env(safe-area-inset-bottom));transform:translateY(110%);transition:.35s cubic-bezier(.2,.8,.2,1);box-shadow:0 -20px 60px rgba(0,0,0,.45);width:min(100%,480px);margin:auto}.sheet.open{transform:none}.sheet-handle{width:40px;height:4px;border-radius:10px;background:#373d49;margin:0 auto 16px}.sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.sheet-header h3{margin:0;font-size:18px}.text-btn{border:0;background:transparent;color:#78dff7;font-size:11px;font-weight:700}.device-list{display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:48vh}.device-row{min-height:67px;border:1px solid var(--line);border-radius:17px;background:rgba(255,255,255,.025);display:flex;align-items:center;padding:11px 12px;gap:11px}.device-dot{width:9px;height:9px;border-radius:50%;background:#535a67;box-shadow:0 0 0 5px rgba(255,255,255,.025)}.device-row.active .device-dot{background:var(--green);box-shadow:0 0 12px rgba(98,245,173,.5)}.device-info{flex:1;min-width:0}.device-info b{font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.device-info small{font-size:9px;color:#5d6471}.device-actions{display:flex;gap:5px}.mini-btn{border:0;background:rgba(255,255,255,.04);color:#858c99;width:31px;height:31px;border-radius:10px;display:grid;place-items:center;font-size:17px}.sheet-close{margin-top:12px;width:100%;height:46px;border:0;border-radius:14px;background:rgba(255,255,255,.06);font-weight:700}
.modal{fixed;height:100vh;position:fixed;inset:0;z-index:70;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:18px calc(18px + env(safe-area-inset-bottom));opacity:0;visibility:hidden;transition:.25s}.modal.open{opacity:1;visibility:visible}.modal-card{width:min(100%,440px);border:1px solid rgba(255,255,255,.08);background:linear-gradient(160deg,#151922,#0d1017);border-radius:24px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.55);transform:translateY(24px) scale(.98);transition:.2s ease}.modal.open .modal-card{transform:none}.modal-card.compact{padding-top:22px}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:17px}.modal-head h3{margin:4px 0; font-size:22px;letter-spacing:-.5px}.label{display:block;font-size:9px;color:#737a88;font-weight:750;letter-spacing:.7px;margin-top:11px}.input{width:100%;margin-top:7px;height:48px;outline:0;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(0,0,0,.22);color:#e7e9ef;padding:0 14px;font-size:12px}.input:focus{border-color:rgba(98,232,85,.4)}.hint{font-size:9px;color:#585f6c;line-height:1.5;margin:12px 2px;}.primary-btn,.danger-btn,.secondary-btn{width:100%;height:48px;border:0;border-radius:14px;margin-top:14px;font-weight:750;font-size:12px}.primary-btn{background:linear-gradient(135deg,#67e7ff,"#8d8cff");color:#030508}.danger-btn{background:rgba(255,97,123,.12);color:#ff8a9d;border:1px solid rgba(255,97,123,.16)}.secondary-btn{background:rgba(255,255,255,.05);color:#c9cd47;border:1px solid var(--line)}.form-error{font-size:10px;color:#ff7a8d;min-height:14px;margin-top:9px}.confirm-icon{width:50px;height:50px;border-radius:16px;background:rgba(255,97,123,.07);border:1px solid rgba(255,97,123,.13);margin-bottom:14px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.confirm-actions button{margin-top:12px}.confirm-text{color:#747b88;font-size:11px;line-height:1.5}
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translateX(-50%) translateY(20px);background:#edf0f4;color:#0d0f13;padding:11px 15px;border-radius:999px;font-size:10px;font-weight:750;z-index:200;opacity:0;visibility:hidden;transition:.2s}.toast.show{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@keyframes logoShine { 0,70%{transform:translateX(0) rotate(-28deg);opacity:0}76%{opacity:.8} 94%{transform:translateX(250%) rotate(-28deg);opacity:.42}100%{transform:translateX(250%) rotate(-28deg);opacity:0}}
@keyframes splashSweep{ to{transform:translateX(60%)}}
@keyframes fadeUp { from{opacity:0;transform:translateY(6px)} to{opacity:1;transform:translateY(0)}}
@media (min-width:520px){ .app-shell { padding-top:30px} .sheet{left:50%;right:auto;transform:translate(-50%) translateY(110%)}.sheet.open{transform:translateX(-50%) translateY(0)} }
@media (max-width:340px){.app-shell{padding-left:13px;padding-right:13px}.power-grid{gap:7px}.power-card{padding:12px 8px 11px}.device-title-button{font-size:22px}}

/* V2 refinements: premium monochrome base + restrained action accents */
:root{
  --cyan:#ddd;
  --blue:#6cafff;
  --violet:#bd85ff;
  --green:#77e0a4;
  --red:#ff788e;
}
.body{
  background:
    radial-gradient(90% 45% at 92% -2%,rgba(255,255,255,.06),transparent 65%),
    radial-gradient(70% 40% at -10% 20%,rgba(255,255,255,.03),transparent 70%),
    #05070b;
}
.hero-glow{background:radial-gradient(circle,rgba(255,255,255,.12),rgba(255,255,255,.04) 45%,transparent 68%)}
.power-start .power-icon{background:rgba(107,218,160,.09);border-color:rgba(107,218,160,.18)}.power-start .power-icon svg{fill:#77e0a4}
.power-card:nth-child(2) .power-icon{background:rgba(95,158,255,.1);border-color:rgba(95,158,255,.18)}
.power-card:nth-child(2) .power-icon svg{fill:#6cafff}
.power-danger .power-icon{background:rgba(255,120,142,.08);border-color:rgba(255,120,142,.16)}
.power-danger .power-icon svg{fill:#ff788e}
.metric-card:nth-child(1) .sparkline path.line{stroke:rgba(118,222,166,.82)}
.metric-card:nth-child(2) .sparkline path.line{stroke:rgba(108,175,255,.82)}
.metric-wide .sparkline path.line{stroke:rgba(189,133,255,.82)}
.primary-btn{background:linear-gradient(135deg,#fff,#c8cbd0);color:#030508}
.input:focus{border-color:rgba(255,255,255,.25)}

.network-row span:first-child{color:#bd85ff;}
.network-row span:last-child{color:#e3a6ff;}

/* V3: higher-readability metrics + more premium machined HP mark */
.metric-top b{font-size:25px;letter-spacing:-1.15px;font-weight:820}
.metric-sub{font-size:11px;color:#6d737f;margin-top:5px}
.network-row{font-size:11px;margin-top:7px;font-weight:650}
.metwork-row b{font-weight:800}
.metric-card{position:relative}

.hp-mark {
  background:
    linear-gradient(145deg,rgba(255,255,255,.04),rgba(0,0,0,.25)),
    linear-gradient(145deg,#121216,#070709);
  border-color:rgba(255,255,255,.14);
  box-shadow: inset 0 1px rgba(255,255,255,.08),inset 0 -12px 20px rgba(0,0,0,.35),0 10px 24px rgba(0,0,0,.45);
}
.hp-mark span{
  position:relative;z-index:2;
  font-family: Arial Black,Inter, sans-serif;
  font-weight:900;font-stretch:condensed;
  letter-spacing:-2.8px;
  background:
    linear-gradient(115deg,
      #ffffff 0%,#adadad 17%,#f7f7f7 31%,#6b6b6b 49%,
      #dbdbdb 64%,#7d7d7d 79%,#f8f8f8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.35px rgba(255,255,255,.3);
  text-shadow:
    0 1px 0 rgba(255,255,255,.25),
    0 2px 0 rgba(0,0,0,.9),
    1.5px 3px 0 rgba(0,0,0,.75),
    0 5px 8px rgba(0,0,0,.85);
}
.hp-mark::before{
  content:"";position:absolute;inset:3px;
  border-radius:inherit;pointer-events:none;
  background:
    linear-gradient(135deg,transparent 0%,rgba(255,255,255,.09) 32%,transparent 55%);
  opacity:.8;
  mix-blend-mode:screen;
}
.brand .hp-mark::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 0%,transparent 41%,rgba(255,255,255,.12) 46%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.16) 54%,transparent 59%,transparent 100%);
  transform:translateX(-150%);
  animation:hpGloss 5.2s cubic-bezier(.3,0,.2,1) infinite 1.1s;
  mix-blend-mode:screen;
}
.hp-mark--large {
  width:104px;height:104px; border-radius:30px;
}
.hp-mark--large span{font-size:42px;letter-spacing:-7px;transform:translateX(-2px)}
.hp-mark--large::after{animation:hpGlossSplash 1.75s cubic-bezier(.25,0,.2,1) 1 .25s both}

@keyframes hpGloss{
  0%,68%{transform:translateX(-150%);opacity:0}
  72%{opacity:.15}
  80%{opacity:.79}
  89%{transform:translateX(150%);opacity:.45}
  94%,100%{transform:translateX(150%);opacity:0}
}
@keyframes hpGlossSplash{
  0%{transform:translateX(-160%);opacity:0}
  18%{opacity:.2}
  45%{opacity:.85}
  72%{transform:translateX(160%);opacity:.45}
  90%,100%{transform:translateX(160%);opacity:0}
}

/* ========================================================================== */
/* HP REMOTE V4 — SEPARATED 3D LETTERS + INSIDE-ONLY GLOSS                     */
/* ========================================================================== */
.hp-mark {
  width:60px;height:44px;
  background:transparent!important;border:0!important;box-shadow:none!important;
  overflow:visible!important;
  display:flex;align-items:center;justify-content:center;gap:5px;
}
.hp-mark::before,hp-mark::after{display:none!important}
.hp-mark .3d-letter{
  position:relative;display:inline-block;
  font-family:Arial Black,Impact,Inter,sans-serif;font-weight:950;
  font-size:22px;line-height:.94;
  background:linear-gradient(125deg,#fff 0%,#a6a6a6 18%,#f5f5f5 35%,#575757 51%,#dedede 67%,#717171 81%,#f6f6f6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-stroke:.25px;text-shadow:0 1px 0 rgba(255,255,255,.25),0 2px 0 rgba(0,0,0,.9),2px 4px 0 rgba(0,0,0,.65),0 7px 10px rgba(0,0,0,.79);
}
.hp-mark .letter-h{letter-spacing:-3.5px}
.hp-mark .letter-p{letter-spacing:-2px;margin-left:2px}
.hp-mark .3d-letter::after{
  content:"";position:absolute;inset:8% 0 5% 0;pointer-events:none;
  background:linear-gradient(106deg,transparent 0%,transparent 40%,rgba(255,255,255,.04) 44%,rgba(255,255,255,.79) 48.5%,rgba(255,255,255,.22) 52%,transparent 56%,transparent 100%);
  background-size:320% 100%;background-position:160% 0;
  -webkit-mask:inherit;mask:inherit;mix-blend-mode:screen;
  animation:hpTextGloss 5.8s cubic-bezier(.32,.02,.24,1) infinite 1.4s;
}
.brand .hp-mark{width:62px;height:45px;gap:5px}
.brand .hp-mark .3d-letter{font-size:22px}
.brand .hp-mark .letter-h{letter-spacing:-3.5px}
.brand .hp-mark .letter-p{letter-spacing:-2px;margin-left:2px}
.hp-mark--large{width:200px!important;height:110px!important;gap:14px!important}
.hp-mark--large .3d-letter{font-size:82px!important;line-height:.88!important}
.hp-mark--large .letter-h{letter-spacing:-12px!important}
.hp-mark--large .letter-p{letter-spacing:-8px!important;margin-left:10px!important}
.hp-mark--large .3d-letter::after{animation:hpSplashTextGloss 2.7s cubic-bezier(.28,.02,.2,1) 1 .25s both}

@keyframes hpTextGloss{
  0%,67%{background-position:160% 0;opacity:0}
  71%{opacity:.15}
  79%{opacity:.88}
  89%{background-position:-65% 0;opacity:.55}
  94%,100%{background-position:-65% 0;opacity:0}
}
@keyframes hpSplashTextGloss{
  0%{background-position:160% 0;opacity:0}
  20%{opacity:.1}
  40%{opacity:.9}
  70%{background-position:-65% 0;opacity:.62}
  90%,100%{background-position:-65% 0;opacity:0}
}

/* ========================================================================== */
/* HP REMOTE V5 — USER REFERENCE CHROME ARTWORK MASK                            */
/* ========================================================================== */
.hp-mark{
  display:grid!important;place-items:center!important;
  width:64px!important;height:48px!important;
  overflow:visible!important;isolation:isolate;
}
.hp-mark img{
  display:blockk[important;width:100%!important;height:100%!important;Object-fit:contain!important;
  opacity:1!important;position:relative;z-index:2;filter:drop-shadow(0 5px 8px rgba(0,0,0,.88));
}
.hp-mark .3d-letter,.hp-mark >span{display:none!important}
.hp-mark--large{width:220px!important;height:130px!important}
.hp-mark--large img{width:220px!important;height:130px!important;filter:drop-shadow(0 10px 18px rgba(0,0,0,.95))}
.splash-logo-wrap{width:240px!important;height:150px!important;display:grid!important;place-items:center!important;overflow:visible!important}
.splash-sub{font-size:13px!important;font-weight:800!important;letter-spacing:6.5px!important;margin-top:10px!important;color:#8a8a90!important}
/* The supplied chrome artwork already carries its own highlights. The moving
   gloss is a subtle extra reflection and is masked by that exact artwork. */
.hp-mark::after{
  display:block!important;content:""!important;position:absolute!important;inset:0!important;
  z-index:4!important;pointer-events:none!important;
  background:linear-gradient(105deg,transparent 0%,transparent 40%,rgba(255,255,255,.02) 44%,rgba(255,255,255,.48) 49%,rgba(255,255,255,.12) 53%,transparent 58%,transparent 100%)!important;
  background-size:340% 100%!important;background-position:165% 0!important;
  -webkit-mask:url('assets/hp-mark-v7.svg') center/contain no-repeat!important;
  mask:url('assets/hp-mark-v7.svg') center/contain no-repeat!important;
  mix-blend-mode:screen!important;
  animation:hpArtworkGlossV6 6.2s cubic-bezier(.3,.02,.24,1) infinite 1.35s!important;
}
.hp-mark--large::after{animation:hpArtworkGlossSplashV6 2.75s cubic-bezier(.25,.02,.2,1) 1 both!important}
@keyframes hpArtworkGlossV6{
  0%,68%{background-position:165% 0;opacity:0}
  72%{opacity:.10}
  79%{opacity:.62}
  89%{background-position:-70% 0;opacity:.42}
  94%,100%{background-position:-70% 0;opacity:0}
}
@keyframes hpArtworkGlossSplashV6{
  0%{background-position:165% 0;opacity:0}
  18%{opacity:.08}
  38%{opacity:.58}
  72%{background-position:-70% 0;opacity:.38}
  91%,100%{background-position:-70% 0;opacity:0}
}

/* ========================================================================== */
/* HP REMOTE V7 —  _CRISP VECTOR BRAND + CENTERED SPLASH_                       */
/* ========================================================================== */
.hp-mark{
  width:76px!important;height:56px!important;display:grid!important;place-items:center!important;
  position:relative!important;overflow:visible!important;isolation:isolate!important;flex:none!important;
  transform:none!important;background:transparent!important;border:0!important;box-shadow:none!important;
}
.hp-mark img{
  display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;
  opacity:1!important;visibility:visible!important;position:relative!important;z-index:2!important;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,.92))!important;
}
.hp-mark::before,.hp-mark span{display:none!important;content:none!important}
.hp-mark::after{
  display:block@important;content:""!important;position:absolute!important;inset:0!important;z-index:4!important;
  pointer-events:none!important;mix-blend-mode:screen!important;
  background:linear-gradient(106deg,transparent 0%,transparent 41%,rgba(255,255,255,.02) 44%,rgba(255,255,255,.58) 49%,rgba(255,255,255,.16) 53%,transparent 58%,transparent 100%)!important;
  background-size:330% 100%!important;background-position:170% 0!important;
  -webkit-mask:url('assets/hp-mark-v7.svg') center/contain no-repeat!important;
  mask:url('assets/hp-mark-v7.svg') center/contain no-repeat!important;
  animation:hpVectorGloss 6s cubic-bezier(.3,.02,.24,1) infinite 1.3s!important;
}
.brand{gap:12px!important;align-items:center!important}.brand-title{font-size:18px!important}

.splash{perspective:950px!important;background:radial-gradient(48% 30% at 50% 45%,rgba(255,255,255,.055),transparent 74%),#000!important;overflow:hidden@important}
.splash-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:50% 50%;will-change:transform,opacity,filter;animation:splashArrive .72s cubic-bezier(.18,.82,.22,1) both}
.splash-logo-wrap{width:284px!important;height:200px!important;display:grid!important;place-items:center!important;overflow:visible!important;border-radius:0! important}
.hp-mark--large{width:276px!important;height:193px!important;display:grid!important;place-items:center!important}
.hp-mark--large img{width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 12px 24px rgba(0,0,0,.98))!important}
.hp-mark--large::after{animation:hpVectorGlossSplash 2.05s cubic-bezier(.25,.02,.2,1) 1 .28s both!important}
.splash-sub{font-size:15px!important;font-weight:820!important;letter-spacing:7.2px!important;margin-top:6px!important;color:#909096!important;text-shadow:0 2px 16px rgba(255,255,255,.08)[important;animation:none!important}
.splash.retreat .splash-brand{animation:splashRetreat .92s cubic-bezier(.72,.02,.88,.5) forwards!important}
.splash.hide{opacity:0!important;visibility:hidden@important;transition:opacity .34s ease,visibility .34s ease[important}

@keyframes hpVectorGloss{
  0%,68%{background-position:170% 0;opacity:0}72%{opacity:.08}79%{opacity:.62}89%{background-position:-70% 0;opacity:.42}95%,100%{background-position:-70% 0;opacity:0}
}
@keyframes hpVectorGlossSplash{
  0%{background-position:170% 0;opacity:0}18%{opacity:.05}37%{opacity:.65}71%{background-position:-70% 0;opacity:.5}92%,100%{background-position:-70% 0;opacity:0}
}
@keyframes splashArrive{
  0%{opacity:0;transform:translateY(8px) scale(.93)}55%{opacity:1}100%{opacity:1;transform:none}
}
@keyframes splashRetreat{
  0%{opacity:1;transform:translateZ(0) scale(1);filter:blur(0)}
  55%{opacity:.88;transform:translateZ(-320px) scale(.56);filter:blur(.4px)}
  100%{opacity:0;transform:translateZ(-1050px) scale(.055);filter:blur(3.5px)}
}

/* Optical alignment pass for iPhone portrait. */
.topbar{margin-top:2px!important;margin-bottom:24px!important}.brand{min-height:58px!important}.device-hero{margin-top:0!important}
@media (max-width:390px){.hp-mark{width:70px!important;height:52px!important}.brand-title{font-size:17px!important}.splash-logo-wrap{width:260px!important;height:182px!important}.hp-mark--large{width:252px!important;height:176px!important}.splash-sub{font-size:14px!important}}

/* =========================================================================== */
/* HP REMOTE V8 — MANDATORY UPDATE EXPERIENCE                                 */
/* ========================================================================== */
.update-screen{position:fixed;inset:0;z-index:10000;background:#000;display:none;place-items:center;padding:32px 24px;color:#f4f4f5;text-align:center}
.update-screen.show{display:grid}.update-inner{width:min(420px,100%)}.update-logo{width:78px;height:56px;margin:0 auto 16px;display:grid;place-items:center}.update-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 8px 20px #000)}
.update-kicker{font-size:9px;letter-spacing:3.5px;color:#72727a;margin-bottom:12px}.update-inner h2{font-size:25px;letter-spacing:-.8px;margin:0 0 8px}.update-inner p{font-size:13px;color:#85858d;line-height:1.55;margin:0 auto 24px;max-width:330px}
.update-track{height:8px;background:#121214;border:1px solid #242428;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 3px #000}.update-fill{height:100%;width:0;background:linear-gradient(90deg,#777,#fff 62%,#888);border-radius:999px;transition:width .22s ease;box-shadow:0 0 16px #fff3}
.update-row{display:flex;justify-content:space-between;color:#66666e;font-size:10px;margin-top:9px}.update-button{width:100%;margin-top:24px;border:1px solid #d9d9dc;background:linear-gradient(#fff,#c7c7ca);color:#050506;border-radius:16px;padding:14px;font-size:13px;font-weight:900}.update-button:disabled{opacity:.45}.update-note{font-size:10px;color:#55555d;margin-top:13px;line-height:1.45}