@property --body{syntax:'<color>';inherits:true;initial-value:#2A3243}
@property --edge{syntax:'<color>';inherits:true;initial-value:#46506A}
@property --on-body{syntax:'<color>';inherits:true;initial-value:#E6EAF2}
:root{
  --bg:#D9DDE3; --bg-deep:#B9C0CA; --hint:#4B535E;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  transition:--body 1.3s ease, --edge 1.3s ease, --on-body 1.3s ease;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#15181D; --bg-deep:#07080A; --hint:#8E97A3; color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#15181D; --bg-deep:#07080A; --hint:#8E97A3; color-scheme:dark; }
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  overflow:hidden;
  background:
    radial-gradient(60% 55% at 50% 46%, color-mix(in srgb, var(--body) 38%, var(--bg)) 0%, var(--bg) 55%, var(--bg-deep) 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums;
}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #7EA0FF;outline-offset:2px}

.stage{position:fixed;inset:0;perspective:1800px;touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab}
.stage.dragging{cursor:grabbing}
.float{position:absolute;inset:0;transform-style:preserve-3d;animation:bob 7s ease-in-out infinite}
.float.still{animation:none}
@keyframes bob{0%,100%{transform:translateY(-.6%) rotateZ(-.4deg)}50%{transform:translateY(.6%) rotateZ(.4deg)}}

.device{
  --w:min(46vw, 62vh, 430px); --h:calc(var(--w)*1.36); --t:calc(var(--w)*.032); --r:calc(var(--w)*.12);
  --fold:0; --k:0; --ry:0deg; --rx:-6deg; --z:0px; --spec:.5;
  position:absolute;left:50%;top:48%;
  width:calc(var(--w)*2);height:var(--h);
  margin-left:calc(var(--w)*-1);margin-top:calc(var(--h)/-2);
  transform-style:preserve-3d;
  transform:translate3d(var(--tx,0px),var(--ty,0px),var(--z)) rotateX(var(--rx)) rotateY(var(--ry)) translateX(calc(var(--w)*var(--k)*-.5));
}
.floor{position:absolute;left:calc(50% + var(--tx,0px));top:calc(48% + var(--ty,0px) + min(46vw,62vh,430px)*.74);width:calc(min(46vw,62vh,430px)*(2 - var(--k,0))*.9);height:5%;
  transform:translateX(-50%);background:radial-gradient(closest-side, rgba(0,0,0,.34), transparent);filter:blur(6px);pointer-events:none}
.hint{position:fixed;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);text-align:center;font-size:13px;color:var(--hint);
  pointer-events:none;transition:opacity 1s}
.hint.gone{opacity:0}

.half{position:absolute;top:0;width:var(--w);height:var(--h);transform-style:preserve-3d}
.half.L{left:0;transform-origin:100% 50%;transform:rotateY(calc(var(--fold)*1deg)) translateZ(calc((var(--t) + 1px)*var(--k)*-1))}
.half.R{left:var(--w)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{transform:translateZ(calc(var(--t)/2))}
.face.back{transform:rotateY(180deg) translateZ(calc(var(--t)/2))}

.edge{position:absolute;background:linear-gradient(90deg, color-mix(in srgb,var(--edge) 65%,#000), var(--edge) 35%, color-mix(in srgb,var(--edge) 70%,#fff) 50%, var(--edge) 65%, color-mix(in srgb,var(--edge) 65%,#000))}
.edge.side{width:var(--t);top:var(--r);height:calc(var(--h) - var(--r)*2)}
.L .edge.side{left:calc(var(--t)/-2);transform:rotateY(90deg)}
.R .edge.side{left:calc(var(--w) - var(--t)/2);transform:rotateY(90deg)}
.edge.tb{height:var(--t);width:calc(var(--w) - var(--r))}
.L .edge.tb{left:var(--r)} .R .edge.tb{left:0}
.edge.top{top:calc(var(--t)/-2);transform:rotateX(90deg)}
.edge.bot{top:calc(var(--h) - var(--t)/2);transform:rotateX(90deg)}
.edge.hinge{width:var(--t);top:calc(var(--r)*.35);height:calc(var(--h) - var(--r)*.7);left:calc(var(--w) - var(--t)/2);transform:rotateY(90deg);
  background:repeating-linear-gradient(180deg, color-mix(in srgb,var(--edge) 60%,#000) 0 6px, var(--edge) 6px 12px)}

.L .front,.R .back{border-radius:var(--r) 4px 4px var(--r)}
.R .front,.L .back{border-radius:4px var(--r) var(--r) 4px}
.front,.L .back{background:linear-gradient(135deg, color-mix(in srgb,var(--edge) 75%,#fff), var(--edge) 40%, color-mix(in srgb,var(--edge) 70%,#000))}
.glass{position:absolute;inset:calc(var(--w)*.02);background:#030405;border-radius:calc(var(--r)*.86) 3px 3px calc(var(--r)*.86);padding:calc(var(--w)*.028)}
.L .front .glass{right:0;padding-right:0}
.R .front .glass{left:0;padding-left:0;border-radius:3px calc(var(--r)*.86) calc(var(--r)*.86) 3px}
.L .back .glass{border-radius:3px calc(var(--r)*.86) calc(var(--r)*.86) 3px}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:30;
  background:linear-gradient(115deg, transparent calc(var(--spec)*100% - 22%), rgba(255,255,255,.10) calc(var(--spec)*100%), transparent calc(var(--spec)*100% + 22%))}

.screen{position:relative;width:100%;height:100%;overflow:hidden;container-type:inline-size;color:#F4F6F9;background:#000;
  touch-action:pan-x pan-y}
.L .front .screen{border-radius:calc(var(--r)*.7) 0 0 calc(var(--r)*.7)}
.R .front .screen{border-radius:0 calc(var(--r)*.7) calc(var(--r)*.7) 0}
.L .back .screen{border-radius:2px calc(var(--r)*.7) calc(var(--r)*.7) 2px}
.wall{position:absolute;top:-6%;bottom:-6%;width:212%;pointer-events:none;
  transform:translateX(calc(var(--px,0)*1%));
  background:
   radial-gradient(38% 46% at 30% 30%, color-mix(in srgb,var(--body) 80%,#6f8cff 20%) 0%, transparent 70%),
   radial-gradient(40% 50% at 72% 74%, color-mix(in srgb,var(--body) 55%,#ff7a59 45%) 0%, transparent 72%),
   radial-gradient(60% 60% at 52% 50%, color-mix(in srgb,var(--body) 70%,#000) 0%, transparent 80%),
   linear-gradient(160deg, color-mix(in srgb,var(--body) 45%,#05070c), #04050a)}
.L .front .wall{left:-6%} .R .front .wall{right:-6%} .L .back .wall{left:-56%}
.L .front .screen::after,.R .front .screen::after{content:"";position:absolute;top:0;bottom:0;width:6%;pointer-events:none;z-index:25}
.L .front .screen::after{right:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.4))}
.R .front .screen::after{left:0;background:linear-gradient(270deg,transparent,rgba(0,0,0,.4))}
.shade{position:absolute;inset:0;background:#000;opacity:calc(var(--k)*.8);pointer-events:none;z-index:40}
.ui{position:absolute;inset:0;transition:opacity .45s ease, filter .6s ease}
.off .ui{opacity:0}

/* status */
.sb{position:relative;z-index:20;display:flex;justify-content:space-between;align-items:center;height:11cqw;padding:2.4cqw 7cqw 0;font-size:4.6cqw;font-weight:600}
.sys{display:inline-flex;align-items:center;gap:1.6cqw}
.sys svg{height:3.2cqw;width:auto;display:block}
.bt{display:inline-block;width:7cqw;height:3.4cqw;border:1px solid rgba(255,255,255,.55);border-radius:1.1cqw;position:relative}
.bt::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:calc(var(--b,80%) - 2px);background:#fff;border-radius:.7cqw}
.pin{position:absolute;top:3.4cqw;left:50%;width:3.4cqw;height:3.4cqw;margin-left:-1.7cqw;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px #1e2532;z-index:35}

/* home esquerda: widgets */
.homeL{position:absolute;inset:11cqw 0 0;padding:2cqw 5.5cqw 5cqw;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:max-content;gap:3.6cqw;align-content:start;overflow:hidden}
.wg{border-radius:7cqw;background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);padding:4.4cqw 4.8cqw;overflow:hidden;position:relative}
.wg.big{grid-column:1 / -1}
.wg.wide{grid-column:1 / -1}
.wg.sq{aspect-ratio:1}
.w-day{font-size:4.4cqw;color:rgba(255,255,255,.72);font-weight:600}
.w-time{font-size:17cqw;font-weight:200;line-height:1;letter-spacing:-.02em;margin-top:1cqw}
.w-brand{font-size:6.4cqw;font-weight:800;letter-spacing:-.01em;margin-top:2cqw}
.w-brand span{font-weight:300;opacity:.75}
.w-t{font-size:3.9cqw;font-weight:600;color:rgba(255,255,255,.7)}
.w-big{font-size:12cqw;font-weight:700;line-height:1;margin-top:2cqw}
.w-s{font-size:3.6cqw;color:rgba(255,255,255,.66);margin-top:1cqw;line-height:1.25}
.rings{position:absolute;right:3.6cqw;top:3.6cqw;width:15cqw;height:15cqw}
.rings circle{fill:none;stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1)}
.nrow{display:flex;gap:3cqw;align-items:center;margin-top:2.4cqw}
.nrow .mini{width:8cqw;height:8cqw;border-radius:2.2cqw;font-size:3cqw;flex:none}
.nrow div{font-size:3.8cqw;line-height:1.25}
.nrow b{display:block;font-size:3.5cqw;color:rgba(255,255,255,.66);font-weight:600}

/* home direita */
.homeR{position:absolute;inset:0;display:flex;flex-direction:column}
.pages{position:relative;flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior:contain}
.pages::-webkit-scrollbar{display:none}
.page{position:relative;flex:0 0 100%;scroll-snap-align:start;display:grid;grid-template-columns:repeat(4,1fr);gap:3.2cqw 1.5cqw;padding:1.5cqw 4.5cqw;align-content:start}
.app{position:relative;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:1.5cqw;cursor:pointer}
.ic{width:15.2cqw;height:15.2cqw;border-radius:26%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:5.2cqw;letter-spacing:-.02em;
  background:linear-gradient(155deg, color-mix(in srgb,var(--a) 70%,#fff 30%), var(--a) 52%, color-mix(in srgb,var(--a) 68%,#000 32%));
  box-shadow:0 1cqw 2.6cqw rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14)}
.ic svg{width:58%;height:58%}
.app .lb{font-size:3.7cqw;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.app:active .ic{filter:brightness(.8)}
.fold-ic{background:rgba(255,255,255,.2);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:.9cqw;padding:2.2cqw;place-items:stretch;align-content:stretch}
.fold-ic i{border-radius:.9cqw;background:var(--a);min-width:0;min-height:0}
.dots{display:flex;justify-content:center;gap:1.8cqw;padding:1.5cqw 0 2.5cqw}
.dots i{width:1.8cqw;height:1.8cqw;border-radius:50%;background:rgba(255,255,255,.35);transition:background .3s}
.dots i.on{background:#fff}
.dock{position:relative;margin:0 3.5cqw 4cqw;padding:3.2cqw 3cqw;border-radius:9cqw;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);display:grid;grid-template-columns:repeat(4,1fr)}
.dock .lb{display:none}

/* cascata ao acordar */
.wake .page .app,.wake .dock .app{animation:pop .75s cubic-bezier(.2,1.5,.35,1) both;animation-delay:calc(var(--i)*32ms + 120ms)}
.wake .wg{animation:rise .9s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(var(--i)*90ms + 80ms)}
@keyframes pop{from{opacity:0;transform:scale(.25) translateY(14cqw)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16cqw) scale(.9)}to{opacity:1;transform:none}}
.back-in .page .app,.back-in .dock .app,.back-in .wg{animation:retn .55s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--i)*12ms)}
@keyframes retn{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:none}}

/* app aberto */
.appv{position:absolute;inset:0;opacity:0;pointer-events:none;background:#0B0D12;transition:opacity .35s}
.appv.show{opacity:1;pointer-events:auto}
.appv .in{position:absolute;inset:11cqw 0 0;overflow:auto;padding:2cqw 6cqw 14cqw;scrollbar-width:none}
.appv .in::-webkit-scrollbar{display:none}
.a-hero{display:flex;gap:4cqw;align-items:center;margin-top:2cqw}
.a-hero .ic{width:19cqw;height:19cqw;font-size:6cqw}
.a-name{font-size:9cqw;font-weight:800;letter-spacing:-.02em;line-height:1.02}
.a-cat{font-size:4cqw;color:rgba(255,255,255,.6);margin-top:.6cqw}
.a-desc{font-size:4.7cqw;line-height:1.35;color:rgba(255,255,255,.86);margin:4cqw 0 0}
.grp{margin-top:4.5cqw;border-radius:5cqw;background:#1A1D24;overflow:hidden}
.grp-t{font-size:3.6cqw;color:rgba(255,255,255,.55);margin:5cqw 2cqw 1.6cqw;font-weight:600}
.row{display:flex;align-items:center;gap:3cqw;padding:3.2cqw 4cqw;font-size:4.3cqw;border-top:1px solid rgba(255,255,255,.07);width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;cursor:default}
.row:first-child{border-top:0}
.row .ck{width:5cqw;height:5cqw;border-radius:50%;background:var(--a);display:grid;place-items:center;flex:none}
.row .ck::after{content:"";width:1.6cqw;height:2.6cqw;border:solid #fff;border-width:0 .6cqw .6cqw 0;transform:rotate(45deg) translate(-.2cqw,-.2cqw)}
.row span.v{margin-left:auto;color:rgba(255,255,255,.6)}
.row.btn{cursor:pointer;color:#8FB0FF}
.row.btn.red{color:#FF8A80}
.a-title{font-size:8cqw;font-weight:800;letter-spacing:-.02em;margin-top:1cqw}
.chart{padding:4cqw}
.chart svg{display:block;width:100%;height:28cqw}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:3.5cqw;margin-top:3.5cqw}
.kpi{border-radius:5cqw;background:#1A1D24;padding:3.6cqw 4cqw}
.kpi b{display:block;font-size:9cqw;font-weight:700;line-height:1.05}
.kpi span{font-size:3.6cqw;color:rgba(255,255,255,.6)}
.demo{font-size:3.4cqw;color:rgba(255,255,255,.45);margin-top:3cqw}
.homebar{position:absolute;left:50%;bottom:2.6cqw;width:34cqw;height:4cqw;margin-left:-17cqw;border:0;padding:0;background:none;cursor:pointer;z-index:22}
.homebar::after{content:"";position:absolute;left:0;right:0;top:1.3cqw;height:1.4cqw;border-radius:1cqw;background:rgba(255,255,255,.8)}
.sw-row{display:flex;flex-wrap:wrap;gap:3cqw;padding:4cqw}
.sw{width:10cqw;height:10cqw;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:linear-gradient(140deg, color-mix(in srgb,var(--c) 75%,#fff), var(--c) 55%, color-mix(in srgb,var(--c) 75%,#000))}
.sw[aria-pressed="true"]{box-shadow:0 0 0 .8cqw #0B0D12,0 0 0 1.6cqw #fff}
.tg{margin-left:auto;width:11cqw;height:6.6cqw;border-radius:4cqw;background:#3A3F49;position:relative;border:0;padding:0;cursor:pointer;transition:background .25s}
.tg::after{content:"";position:absolute;top:.6cqw;left:.6cqw;width:5.4cqw;height:5.4cqw;border-radius:50%;background:#fff;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.tg[aria-checked="true"]{background:#34C77B}
.tg[aria-checked="true"]::after{transform:translateX(4.4cqw)}
.hinge-svg{display:block;width:100%;height:34cqw;margin-top:3cqw}

/* sobreposições */
.zoom{position:absolute;z-index:24;display:grid;place-items:center;overflow:hidden;pointer-events:none;opacity:0;color:#fff;font-weight:800;
  background:linear-gradient(155deg, color-mix(in srgb,var(--a) 70%,#fff 30%), var(--a) 52%, color-mix(in srgb,var(--a) 68%,#000 32%))}
.folder{position:absolute;inset:0;z-index:23;display:none;flex-direction:column;align-items:center;justify-content:center;gap:4cqw;background:rgba(5,7,12,.82)}
.folder.show{display:flex}
.fpanel{width:84%;border-radius:9cqw;background:rgba(70,76,92,.9);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:5cqw 4cqw}
.fpanel h3{margin:0 0 4cqw;font-size:6.4cqw;font-weight:700;text-align:center}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5cqw 2cqw}
.fgrid .ic{width:18cqw;height:18cqw}
.ftitle{text-align:center;font-size:7cqw;font-weight:700}
.banner{position:absolute;top:2.4cqw;left:3cqw;right:3cqw;z-index:26;border-radius:6cqw;background:rgba(40,44,54,.92);box-shadow:0 2cqw 6cqw rgba(0,0,0,.45);
  display:flex;gap:3cqw;align-items:center;padding:3cqw 3.6cqw;transform:translateY(-140%);cursor:pointer;border:0;width:auto;text-align:left}
.banner .ic{width:10cqw;height:10cqw;font-size:3.4cqw;border-radius:2.8cqw;flex:none}
.banner b{display:block;font-size:3.8cqw}
.banner div span{display:block;font-size:3.9cqw;color:rgba(255,255,255,.82);line-height:1.25}
.banner em{font-style:normal;margin-left:auto;align-self:flex-start;font-size:3.2cqw;color:rgba(255,255,255,.5)}

/* tela externa (bloqueio) */
.lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;cursor:pointer}
.l-date{margin-top:14cqw;font-size:5.4cqw;font-weight:600;color:rgba(255,255,255,.85)}
.l-time{font-size:30cqw;font-weight:700;line-height:.95;letter-spacing:-.03em;margin-top:.5cqw}
.l-stack{width:88%;margin-top:auto;display:grid;gap:2.4cqw}
.l-n{border-radius:5.5cqw;background:rgba(255,255,255,.14);padding:3.4cqw 3.8cqw;display:flex;gap:3cqw;align-items:center;animation:ln .7s cubic-bezier(.2,1.3,.35,1) both}
.l-n .ic{width:9cqw;height:9cqw;font-size:3.1cqw;border-radius:2.6cqw;flex:none}
.l-n b{display:block;font-size:3.7cqw}
.l-n div span{display:block;font-size:3.8cqw;color:rgba(255,255,255,.82);line-height:1.2}
@keyframes ln{from{opacity:0;transform:translateY(8cqw) scale(.94)}to{opacity:1;transform:none}}
.l-bot{width:100%;display:flex;justify-content:space-between;align-items:center;padding:5cqw 9cqw 6cqw}
.l-btn{width:12cqw;height:12cqw;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center}
.l-btn svg{width:48%;height:48%}
.l-hint{font-size:3.8cqw;color:rgba(255,255,255,.7)}

/* verso */
.R .back{background:linear-gradient(118deg, color-mix(in srgb,var(--body) 82%,#fff) 0%, var(--body) 40%, color-mix(in srgb,var(--body) 82%,#000) 100%);
  box-shadow:inset 0 0 0 calc(var(--w)*.016) var(--edge)}
.R .back::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg, transparent calc(var(--spec)*100% - 25%), rgba(255,255,255,.22) calc(var(--spec)*100%), transparent calc(var(--spec)*100% + 25%))}
.cam{position:absolute;top:6%;left:50%;transform:translateX(-50%);width:36%;aspect-ratio:1;border-radius:26%;
  background:linear-gradient(145deg, color-mix(in srgb,var(--body) 75%,#fff), color-mix(in srgb,var(--body) 82%,#000));
  box-shadow:0 .6vmin 1.6vmin rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.2);display:grid;grid-template-columns:1fr 1fr;gap:9%;padding:12%}
.lens{display:block;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 34% 32%, #8fa3c7 0 7%, #1b2433 18%, #06080c 58%);
  box-shadow:0 0 0 .5vmin color-mix(in srgb,var(--edge) 70%,#000), inset 0 0 0 .5vmin #1a1f27}
.flash{display:block;aspect-ratio:1;border-radius:50%;margin:26%;background:radial-gradient(circle,#fff8e6,#d4c39a)}
.mono{position:absolute;left:0;right:0;bottom:11%;text-align:center;color:var(--on-body);opacity:.5;font-weight:800;font-size:calc(var(--w)*.15);letter-spacing:-.03em}
.mono small{display:block;font-size:calc(var(--w)*.045);font-weight:500;letter-spacing:.04em;margin-top:.3em}

.device.closed .front,.device.back-view .front{pointer-events:none}
.device:not(.closed):not(.back-view) .L .back{pointer-events:none}

@media (prefers-reduced-motion: reduce){
  .float{animation:none}
  .wake .page .app,.wake .dock .app,.wake .wg,.back-in .page .app,.back-in .dock .app,.back-in .wg,.l-n{animation-duration:.01s!important;animation-delay:0s!important}
}
:root{
  --ink:#14171B; --muted:#58616C; --surface:rgba(249,250,252,.94); --line:rgba(20,23,27,.12); --accent:#2F5BD3; --accent-ink:#fff; --chip:rgba(20,23,27,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --ink:#EEF1F4; --muted:#9AA3AE; --surface:rgba(27,30,36,.94); --line:rgba(255,255,255,.1); --accent:#86A4FF; --accent-ink:#0B1230; --chip:rgba(255,255,255,.07); }
}
:root[data-theme="dark"]{ --ink:#EEF1F4; --muted:#9AA3AE; --surface:rgba(27,30,36,.94); --line:rgba(255,255,255,.1); --accent:#86A4FF; --accent-ink:#0B1230; --chip:rgba(255,255,255,.07); }
.disp{font-family:"Arquivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif}
.stage{z-index:1}

/* tipografia de fundo e de primeiro plano */
.backtype{position:fixed;left:0;right:0;top:56px;transform:none;z-index:0;pointer-events:none;text-align:center;white-space:nowrap;
  font-family:"Arquivo", system-ui, sans-serif;font-weight:800;font-stretch:72%;font-size:clamp(84px,21vw,380px);line-height:.85;letter-spacing:-.02em;
  color:color-mix(in srgb,var(--c,#888) 14%,transparent);-webkit-text-stroke:2px color-mix(in srgb,var(--c,#888) 55%,transparent);opacity:0}
.fly{position:fixed;inset:0;z-index:3;display:grid;place-content:center;text-align:center;pointer-events:none;opacity:0;color:var(--ink);padding:0 6vw}
.fly-main{font-family:"Arquivo", system-ui, sans-serif;font-weight:800;font-stretch:70%;font-size:clamp(46px,11vw,170px);line-height:.9;letter-spacing:-.02em}
.fly-main span{font-weight:300;opacity:.6}
.fly-sub{margin-top:.7em;font-size:clamp(15px,1.7vw,22px);color:var(--muted);max-width:34ch;justify-self:center}
.ring{position:fixed;left:50%;top:50%;width:0;height:0;z-index:2;pointer-events:none}
.ring .rt{position:absolute;left:0;top:0;width:clamp(38px,5vw,64px);height:clamp(38px,5vw,64px);margin:calc(clamp(38px,5vw,64px)/-2) 0 0 calc(clamp(38px,5vw,64px)/-2);
  border-radius:26%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:clamp(12px,1.4vw,18px);opacity:0;
  background:linear-gradient(155deg, color-mix(in srgb,var(--a) 70%,#fff 30%), var(--a) 52%, color-mix(in srgb,var(--a) 68%,#000 32%));box-shadow:0 8px 20px rgba(0,0,0,.25)}
.ring .rt svg{width:58%;height:58%}

/* legenda do tour */
.cap{position:fixed;z-index:3;pointer-events:none;color:var(--ink);left:clamp(16px,5vw,72px);width:min(32vw,440px);top:50%;transform:translateY(-50%)}
@media (max-aspect-ratio: 23/20), (max-width: 760px){
  .cap{left:18px;right:18px;width:auto;top:auto;transform:none;bottom:calc(env(safe-area-inset-bottom,0px) + 86px)}
}
.cap-area{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--muted);font-weight:600}
.cap-area i{width:26px;height:3px;border-radius:2px;background:var(--c,#2F5BD3)}
.cap-area em{font-style:normal;margin-left:auto;font-variant-numeric:tabular-nums}
.cap-name{margin:.25em 0 0;font-family:"Arquivo", system-ui, sans-serif;font-weight:800;font-stretch:72%;font-size:clamp(40px,5.6vw,92px);line-height:.92;letter-spacing:-.02em;overflow:hidden;padding-bottom:.06em}
.cap-name span{display:inline-block}
.cap-desc{padding-bottom:.2em;margin:.6em 0 0;font-size:clamp(15px,1.35vw,19px);line-height:1.4;max-width:36ch;overflow:hidden}
.cap-desc span{display:block}
.cap-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.cap-chips b{font-weight:600;font-size:13px;padding:7px 12px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);display:inline-flex;gap:7px;align-items:center}
.cap-chips b::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--c,#2F5BD3)}
@media (max-width: 760px){ .cap-chips{display:none} .cap-name{font-size:clamp(34px,10vw,56px)} }

/* HUD do tour */
.hud{position:fixed;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);width:min(760px,calc(100vw - 24px));
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:999px;background:var(--surface);box-shadow:0 10px 30px rgba(0,0,0,.18), inset 0 0 0 1px var(--line);color:var(--ink)}
.hud[hidden]{display:none}
.hbtn{flex:none;width:38px;height:38px;border-radius:50%;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.hbtn:hover{background:var(--chip)}
.hbtn svg{width:18px;height:18px}
.hbtn.main{background:var(--accent);color:var(--accent-ink)}
.segs{flex:1;display:flex;gap:3px;align-items:center;min-width:0}
.seg{flex:1;height:22px;border:0;padding:0;background:none;cursor:pointer;position:relative}
.seg.area{flex:.35}.seg.big{flex:1.4}
.seg::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--line)}
.seg::after{content:"";position:absolute;left:0;top:9px;height:4px;border-radius:2px;background:var(--accent);width:0}
.seg.done::after{width:100%}
.seg.on::after{animation:segfill var(--d,4s) linear forwards}
.hud.paused .seg.on::after{animation-play-state:paused}
@keyframes segfill{to{width:100%}}
.hnum{flex:none;font-size:13px;font-variant-numeric:tabular-nums;color:var(--muted);min-width:44px;text-align:right}
@media (max-width:520px){ .hnum{display:none} }

/* menu hambúrguer */
.burger{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;
  background:var(--surface);box-shadow:0 6px 20px rgba(0,0,0,.16), inset 0 0 0 1px var(--line);display:grid;place-content:center;gap:5px}
.burger span{display:block;width:18px;height:2px;border-radius:1px;background:var(--ink);transition:transform .3s cubic-bezier(.3,1.3,.5,1), opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.menu{position:fixed;z-index:7;top:calc(env(safe-area-inset-top,0px) + 70px);left:12px;width:min(380px,calc(100vw - 24px));max-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 90px);
  overflow:auto;overscroll-behavior:contain;border-radius:22px;background:var(--surface);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.25), inset 0 0 0 1px var(--line);
  padding:6px 16px 16px;transform-origin:20px -20px;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
.menu[hidden]{display:none}
.menu section{padding:12px 0;border-top:1px solid var(--line)}
.menu section:first-child{border-top:0}
.menu h3{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--muted)}
.mrow{display:flex;flex-wrap:wrap;gap:8px}
.mb{border:0;cursor:pointer;border-radius:12px;padding:9px 12px;background:var(--chip);font-weight:600;font-size:14px}
.mb:hover{filter:brightness(.97)}
.mb.primary{background:var(--accent);color:var(--accent-ink);width:100%;padding:12px}
.mb[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.chs{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chs .mb{font-size:13px;padding:7px 11px;border-radius:999px}
.msearch{width:100%;border:0;border-radius:12px;padding:11px 12px;background:var(--chip);color:var(--ink);font:inherit;font-size:15px}
.mgrp{margin-top:12px}
.mgrp-t{font-size:12px;color:var(--muted);margin:0 0 6px;font-weight:600}
.mapps{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.mapp{display:flex;align-items:center;gap:10px;border:0;cursor:pointer;background:none;border-radius:12px;padding:6px 8px;text-align:left;font-size:14px;font-weight:600}
.mapp:hover{background:var(--chip)}
.mapp i{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:10px;font-weight:800;
  background:linear-gradient(155deg, color-mix(in srgb,var(--a) 70%,#fff 30%), var(--a) 52%, color-mix(in srgb,var(--a) 68%,#000 32%))}
.mapp i svg{width:62%;height:62%}
.msw{display:flex;gap:10px;flex-wrap:wrap}
.msw button{width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;background:linear-gradient(140deg, color-mix(in srgb,var(--c) 75%,#fff), var(--c) 55%, color-mix(in srgb,var(--c) 75%,#000));box-shadow:inset 0 0 0 1px var(--line)}
.msw button[aria-pressed="true"]{box-shadow:0 0 0 3px var(--surface),0 0 0 5px var(--accent)}
.mtg{display:flex;align-items:center;justify-content:space-between;padding:6px 0;font-size:14px}
.mtg button{width:46px;height:28px;border-radius:14px;border:0;cursor:pointer;background:var(--line);position:relative;transition:background .25s}
.mtg button::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.mtg button[aria-checked="true"]{background:#34C77B}
.mtg button[aria-checked="true"]::after{transform:translateX(18px)}
.mrange{display:flex;align-items:center;gap:10px;font-size:14px;margin-top:10px}
.mrange input{flex:1;accent-color:var(--accent)}
.keys{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:13px;margin:0}
.keys dt kbd{font:inherit;font-weight:700;padding:2px 7px;border-radius:6px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--line)}
.keys dd{margin:0;color:var(--muted)}

/* troca de tema com revelação circular */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}::view-transition-new(root){z-index:2}
.themebtn{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);left:68px;width:46px;height:46px;border-radius:50%;border:0;cursor:pointer;color:var(--ink);
  background:var(--surface);box-shadow:0 6px 20px rgba(0,0,0,.16), inset 0 0 0 1px var(--line);display:grid;place-items:center}
.themebtn svg{width:20px;height:20px;transition:transform .5s cubic-bezier(.3,1.4,.5,1), opacity .3s}
.themebtn .moon{position:absolute}
:root[data-os="dark"] .themebtn .sun{transform:rotate(-90deg) scale(.4);opacity:0}
:root[data-os="light"] .themebtn .moon{transform:rotate(90deg) scale(.4);opacity:0}
.apr{display:grid;grid-template-columns:repeat(3,1fr);gap:3cqw;padding:4cqw}
.apb{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;font-size:3.8cqw;cursor:pointer;color:inherit;padding:0}
.apv{width:78%;aspect-ratio:.6;border-radius:3cqw;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.apv::before{content:"";position:absolute;left:14%;right:14%;top:16%;height:16%;border-radius:1.4cqw;background:currentColor;opacity:.18}
.apv::after{content:"";position:absolute;left:14%;right:14%;top:40%;height:36%;border-radius:1.4cqw;background:currentColor;opacity:.1}
.apv.light{background:#F2F3F6;color:#111418}.apv.dark{background:#16181D;color:#fff}
.apv.auto{background:linear-gradient(135deg,#F2F3F6 50%,#16181D 50%);color:#7f8590}
.apb[aria-pressed="true"] .apv{box-shadow:0 0 0 .7cqw #2F7BFF}
.apb[aria-pressed="true"]{font-weight:700}

/* sistema do aparelho em modo claro */
:root[data-os="light"] .screen{color:#111418;background:#F2F3F5}
:root[data-os="light"] .wall{background:
  radial-gradient(38% 46% at 30% 30%, color-mix(in srgb,var(--body) 30%,#cfe0ff) 0%, transparent 70%),
  radial-gradient(40% 50% at 72% 74%, color-mix(in srgb,var(--body) 22%,#ffd6c6) 0%, transparent 72%),
  linear-gradient(160deg, color-mix(in srgb,var(--body) 16%,#f7f8fb), #e8ecf2)}
:root[data-os="light"] .wg{background:rgba(255,255,255,.66);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 1cqw 3cqw rgba(20,30,50,.06)}
:root[data-os="light"] .w-day,:root[data-os="light"] .w-t,:root[data-os="light"] .w-s,:root[data-os="light"] .nrow b{color:rgba(17,20,24,.58)}
:root[data-os="light"] .rings circle:not(.rg){stroke:rgba(0,0,0,.08)}
:root[data-os="light"] .sys svg rect{fill:#111418}
:root[data-os="light"] .bt{border-color:rgba(17,20,24,.5)}
:root[data-os="light"] .bt::after{background:#111418}
:root[data-os="light"] .app .lb{color:#111418;text-shadow:0 1px 2px rgba(255,255,255,.6)}
:root[data-os="light"] .dock{background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}
:root[data-os="light"] .fold-ic{background:rgba(255,255,255,.6)}
:root[data-os="light"] .dots i{background:rgba(17,20,24,.22)}
:root[data-os="light"] .dots i.on{background:#111418}
:root[data-os="light"] .spill{background:rgba(255,255,255,.66);color:#111418}
:root[data-os="light"] .spill svg{stroke:#111418}
:root[data-os="light"] .appv{background:#F2F2F7}
:root[data-os="light"] .a-cat,:root[data-os="light"] .grp-t,:root[data-os="light"] .row span.v,:root[data-os="light"] .kpi span,:root[data-os="light"] .s-t,:root[data-os="light"] .s-row span.c{color:rgba(17,20,24,.52)}
:root[data-os="light"] .a-desc{color:rgba(17,20,24,.82)}
:root[data-os="light"] .grp,:root[data-os="light"] .kpi{background:#fff;box-shadow:0 .5cqw 2cqw rgba(20,30,50,.05)}
:root[data-os="light"] .row{border-top-color:rgba(0,0,0,.07)}
:root[data-os="light"] .row.btn{color:#2F5BD3}
:root[data-os="light"] .row.btn.red{color:#D93025}
:root[data-os="light"] .demo{color:rgba(17,20,24,.45)}
:root[data-os="light"] .homebar::after{background:rgba(17,20,24,.75)}
:root[data-os="light"] .sw[aria-pressed="true"]{box-shadow:0 0 0 .8cqw #fff,0 0 0 1.6cqw #111418}
:root[data-os="light"] .tg:not([aria-checked="true"]){background:#E3E4E8}
:root[data-os="light"] .L .front .screen::after{background:linear-gradient(90deg,transparent,rgba(0,0,0,.12))}
:root[data-os="light"] .R .front .screen::after{background:linear-gradient(270deg,transparent,rgba(0,0,0,.12))}
:root[data-os="light"] .nav button{color:#2F5BD3}
:root[data-os="light"] .nav > span{color:rgba(17,20,24,.5)!important}
:root[data-os="light"] .nav .arr button{background:rgba(0,0,0,.06);color:#111418}
:root[data-os="light"] .folder{background:rgba(236,239,244,.78)}
:root[data-os="light"] .fpanel{background:rgba(255,255,255,.9);box-shadow:0 2cqw 6cqw rgba(20,30,50,.12)}
:root[data-os="light"] .ftitle{color:#111418}
:root[data-os="light"] .banner{background:rgba(255,255,255,.96);color:#111418;box-shadow:0 2cqw 6cqw rgba(20,30,50,.18)}
:root[data-os="light"] .banner div span{color:rgba(17,20,24,.8)}
:root[data-os="light"] .banner em{color:rgba(17,20,24,.45)}
:root[data-os="light"] .sheet{background:rgba(242,243,247,.95)}
:root[data-os="light"] .sinp{background:rgba(0,0,0,.06);color:#111418}
:root[data-os="light"] .sinp::placeholder{color:rgba(17,20,24,.45)}
:root[data-os="light"] .hinge-svg line:not(#tw-leaf){stroke:#111418}
:root[data-os="light"] .hinge-svg circle{fill:#fff;stroke:#111418}
:root[data-os="light"] #tw-log .row span{color:#111418!important}
:root[data-os="light"] #tw-log .row span:first-child{color:rgba(17,20,24,.5)!important}
:root[data-os="light"] .l-date{color:rgba(17,20,24,.75)}
:root[data-os="light"] .l-n{background:rgba(255,255,255,.6)}
:root[data-os="light"] .l-n div span{color:rgba(17,20,24,.8)}
:root[data-os="light"] .l-btn{background:rgba(0,0,0,.07)}
:root[data-os="light"] .l-btn svg{stroke:#111418}
:root[data-os="light"] .l-hint{color:rgba(17,20,24,.6)}
:root[data-os="light"] .touch{background:rgba(17,20,24,.16);box-shadow:0 0 0 1px rgba(17,20,24,.35),0 2cqw 5cqw rgba(0,0,0,.18)}
:root[data-os="light"] .touch i{border-color:#111418}
.screen,.wall,.wg,.appv,.grp,.kpi,.dock,.banner,.l-n{transition:background-color .5s ease,color .5s ease}

/* novidades dentro do aparelho */
body.touring .hint{display:none}
.pillrow{display:flex;justify-content:center;align-items:center;gap:3cqw;padding:1.2cqw 0 2.4cqw}
.pillrow .dots{padding:0}
.touch{position:absolute;z-index:28;left:50%;top:60%;width:11cqw;height:11cqw;margin:-5.5cqw 0 0 -5.5cqw;border-radius:50%;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.32);box-shadow:0 0 0 1px rgba(255,255,255,.7), 0 2cqw 5cqw rgba(0,0,0,.35)}
.touch i{position:absolute;inset:0;border-radius:50%;border:.6cqw solid #fff;opacity:0}
.spill{margin:0;border:0;cursor:pointer;display:flex;align-items:center;gap:1.6cqw;padding:1.8cqw 4cqw;border-radius:5cqw;
  background:rgba(255,255,255,.16);font-size:3.8cqw;font-weight:600}
.spill svg{width:3.6cqw;height:3.6cqw}
.sheet{position:absolute;inset:0;z-index:27;display:none;flex-direction:column;background:rgba(8,10,14,.9);padding:12cqw 5cqw 5cqw}
.sheet.show{display:flex}
.sinp{width:100%;border:0;border-radius:4cqw;padding:3cqw 4cqw;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:4.4cqw}
.sinp::placeholder{color:rgba(255,255,255,.55)}
.s-t{font-size:3.6cqw;color:rgba(255,255,255,.55);font-weight:600;margin:4cqw 1cqw 2cqw}
.s-rec{display:grid;grid-template-columns:repeat(4,1fr);gap:2cqw}
.s-list{flex:1;overflow:auto;scrollbar-width:none}
.s-list::-webkit-scrollbar{display:none}
.s-row{display:flex;align-items:center;gap:3cqw;width:100%;border:0;background:none;cursor:pointer;padding:2cqw 1cqw;text-align:left;border-radius:3cqw}
.s-row .ic{width:10cqw;height:10cqw;font-size:3.4cqw;border-radius:2.8cqw}
.s-row b{display:block;font-size:4.2cqw}
.s-row span.c{display:block;font-size:3.4cqw;color:rgba(255,255,255,.55)}
.nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:2cqw}
.nav button{border:0;background:none;cursor:pointer;color:#8FB0FF;font-size:4.4cqw;padding:1.5cqw 0}
.nav .arr{display:flex;gap:2cqw}
.nav .arr button{width:9cqw;height:9cqw;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;padding:0;color:#fff;font-size:5cqw;line-height:1}
.appv.show .grp .row{animation:rowin .55s cubic-bezier(.2,1.1,.3,1) both;animation-delay:calc(var(--i,0)*90ms + 260ms)}
@keyframes rowin{from{opacity:0;transform:translateX(6cqw)}to{opacity:1;transform:none}}
.appv.show .kpi{animation:rowin .6s cubic-bezier(.2,1.1,.3,1) both;animation-delay:calc(var(--i,0)*110ms + 420ms)}

/* sistemas reais do hub: ícone próprio sobre fundo branco e botão para abrir o sistema */
.ic.im,.rt.im,.mapp i.im{background:transparent;overflow:hidden}
.ic.im.pad{background:#fff}
.ic.im img,.rt.im img,.mapp i.im img{width:100%;height:100%;object-fit:cover;pointer-events:none}
.ic.im.pad img{width:74%;height:74%;object-fit:contain}
.zoom img{width:22%;height:22%;object-fit:contain}
.go-real{display:block;margin-top:4cqw;padding:3.4cqw;border-radius:4cqw;text-align:center;font-weight:700;font-size:4.3cqw;color:#fff;background:var(--a);text-decoration:none;box-shadow:0 1cqw 3cqw rgba(0,0,0,.3)}
.go-real:active{filter:brightness(.85)}
.shots{display:flex;gap:3cqw;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:4cqw;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots figure{margin:0;flex:0 0 100%;scroll-snap-align:start}
.shots img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:4cqw;box-shadow:0 1cqw 3cqw rgba(0,0,0,.25)}
.shots figcaption{font-size:3.3cqw;opacity:.6;margin-top:1.4cqw}
.row.fx{align-items:flex-start;line-height:1.35;font-size:3.9cqw}.row.fx .ck{flex:none;margin-top:.5cqw}