@property --body{syntax:'<color>';inherits:true;initial-value:#2A3243}
@property --edge{syntax:'<color>';inherits:true;initial-value:#4A556F}
@property --on-body{syntax:'<color>';inherits:true;initial-value:#E6EAF2}
:root{
  --bg:#D8DCE2; --bg-deep:#B6BDC8; --hint:#4B535E;
  --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);
  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:#06070A; --hint:#8E97A3; --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); color-scheme:dark; }
}
:root[data-theme="dark"]{ --bg:#15181D; --bg-deep:#06070A; --hint:#8E97A3; --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); 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) 34%, 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}
::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}

/* ---------- palco e aparelho ---------- */
.stage{position:fixed;inset:0;z-index:1;perspective:2000px;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 8s ease-in-out infinite}
.float.still{animation:none}
@keyframes bob{0%,100%{transform:translateY(-.5%) rotateZ(-.3deg)}50%{transform:translateY(.5%) rotateZ(.3deg)}}
.tab{--W:800px;--H:560px;--short:560px;--t:7px;--r:30px;--ry:0deg;--rx:-6deg;--rz:0deg;--z:0px;--spec:.5;
  position:absolute;left:50%;top:48%;width:var(--W);height:var(--H);margin-left:calc(var(--W)/-2);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)) rotateZ(var(--rz))}
.floor{position:absolute;left:calc(50% + var(--tx,0px));top:calc(48% + var(--ty,0px) + var(--fh,280px) + 22px);width:calc(var(--fw,800px)*.92);height:5%;transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(0,0,0,.32), transparent);filter:blur(7px);pointer-events:none}
.face{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.front{transform:translateZ(calc(var(--t)/2));background:linear-gradient(135deg, color-mix(in srgb,var(--edge) 70%,#fff), var(--edge) 40%, color-mix(in srgb,var(--edge) 70%,#000))}
.face.back{transform:rotateY(180deg) translateZ(calc(var(--t)/2));
  background:linear-gradient(118deg, color-mix(in srgb,var(--body) 84%,#fff) 0%, var(--body) 42%, color-mix(in srgb,var(--body) 84%,#000) 100%);
  box-shadow:inset 0 0 0 calc(var(--short)*.006) var(--edge)}
.face.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,.2) calc(var(--spec)*100%), transparent calc(var(--spec)*100% + 25%))}
.edge{position:absolute;background:linear-gradient(90deg, color-mix(in srgb,var(--edge) 62%,#000), var(--edge) 35%, color-mix(in srgb,var(--edge) 70%,#fff) 50%, var(--edge) 65%, color-mix(in srgb,var(--edge) 62%,#000))}
.edge.h{left:var(--r);width:calc(var(--W) - var(--r)*2);height:var(--t)}
.edge.top{top:calc(var(--t)/-2);transform:rotateX(90deg)}
.edge.bot{top:calc(var(--H) - var(--t)/2);transform:rotateX(90deg)}
.edge.v{top:var(--r);height:calc(var(--H) - var(--r)*2);width:var(--t)}
.edge.lft{left:calc(var(--t)/-2);transform:rotateY(90deg)}
.edge.rgt{left:calc(var(--W) - var(--t)/2);transform:rotateY(90deg)}
.glass{position:absolute;inset:calc(var(--short)*.008);border-radius:calc(var(--r)*.94);background:#030405;padding:calc(var(--short)*.024)}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:60;
  background:linear-gradient(115deg, transparent calc(var(--spec)*100% - 22%), rgba(255,255,255,.08) calc(var(--spec)*100%), transparent calc(var(--spec)*100% + 22%))}
.fcam{position:absolute;z-index:61;width:calc(var(--short)*.011);height:calc(var(--short)*.011);border-radius:50%;background:radial-gradient(circle at 35% 35%,#3a4660,#05070a 70%);left:50%;top:calc(var(--short)*.0095);margin-left:calc(var(--short)*-.0055)}
.tab.portrait .fcam{left:calc(var(--short)*.0095);top:50%;margin:calc(var(--short)*-.0055) 0 0}
.camb{position:absolute;top:calc(var(--short)*.05);left:50%;width:calc(var(--short)*.15);aspect-ratio:1;margin-left:calc(var(--short)*-.075);border-radius:50%;
  background:linear-gradient(145deg, color-mix(in srgb,var(--body) 74%,#fff), color-mix(in srgb,var(--body) 82%,#000));box-shadow:0 .5vmin 1.5vmin rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.2);
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8%}
.tab.portrait .camb{top:calc(var(--short)*.06)}
.camb .lens{display:block;width:36%;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 .45vmin color-mix(in srgb,var(--edge) 70%,#000)}
.camb .fl{position:absolute;right:-22%;top:50%;width:12%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff8e6,#d4c39a)}
.mono{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:var(--on-body);opacity:.5;font-weight:800;font-size:calc(var(--short)*.11);letter-spacing:-.03em}
.mono small{display:block;font-size:calc(var(--short)*.03);font-weight:500;letter-spacing:.04em;margin-top:.3em}
.tab.back-view .front{pointer-events:none}

/* ---------- sistema operacional ---------- */
.screen{--o-ink:#F4F6F9;--o-muted:rgba(244,246,249,.6);--o-faint:rgba(244,246,249,.42);--o-card:#1B1E25;--o-card2:#262A34;--o-line:rgba(255,255,255,.08);
  --o-glass:rgba(255,255,255,.12);--o-gline:rgba(255,255,255,.1);--o-app:#0D0F14;--o-side:#14171D;--o-acc:#86A4FF;--o-sheet:rgba(12,14,19,.86);--o-shadow:0 1px 2px rgba(0,0,0,.45);--o-red:#FF8A80;
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:calc(var(--r)*.78);background:#000;color:var(--o-ink);font-size:calc(var(--short)/54);touch-action:none}
:root[data-os="light"] .screen{--o-ink:#111418;--o-muted:rgba(17,20,24,.58);--o-faint:rgba(17,20,24,.4);--o-card:#FFFFFF;--o-card2:#F1F2F5;--o-line:rgba(0,0,0,.07);
  --o-glass:rgba(255,255,255,.62);--o-gline:rgba(0,0,0,.05);--o-app:#F2F2F7;--o-side:#E8E9EE;--o-acc:#2F5BD3;--o-sheet:rgba(242,243,247,.9);--o-shadow:0 1px 2px rgba(255,255,255,.7);--o-red:#D93025}
.wall{position:absolute;inset:-6%;pointer-events:none;transform:translateX(calc(var(--px,0)*1%));
  background:radial-gradient(34% 46% at 26% 30%, color-mix(in srgb,var(--body) 78%,#6f8cff 22%) 0%, transparent 70%),
   radial-gradient(38% 50% at 76% 72%, color-mix(in srgb,var(--body) 52%,#ff7a59 48%) 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)}
:root[data-os="light"] .wall{background:radial-gradient(34% 46% at 26% 30%, color-mix(in srgb,var(--body) 30%,#cfe0ff) 0%, transparent 70%),
   radial-gradient(38% 50% at 76% 72%, color-mix(in srgb,var(--body) 22%,#ffd6c6) 0%, transparent 72%),
   linear-gradient(160deg, color-mix(in srgb,var(--body) 16%,#f7f8fb), #e7ebf1)}
.ui{position:absolute;inset:0;transition:opacity .5s ease}
.off .ui{opacity:0}
.dim{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;z-index:70;transition:opacity .2s}
.sb{position:absolute;z-index:40;left:0;right:0;top:0;height:2.6em;display:flex;justify-content:space-between;align-items:center;padding:0 2.4em;font-size:1em;font-weight:600;pointer-events:none}
.sb .r{display:flex;gap:.6em;align-items:center;pointer-events:auto;cursor:pointer;padding:.3em .5em;border-radius:1em}
.sb svg{height:.85em;width:auto;display:block}
.bt{display:inline-block;width:1.9em;height:.92em;border:1px solid currentColor;border-radius:.3em;position:relative;opacity:.8}
.bt::after{content:"";position:absolute;left:1px;top:1px;bottom:1px;width:calc(var(--b,80%) - 2px);background:currentColor;border-radius:.18em}

/* tela inicial */
.home{position:absolute;inset:3.4em 0 8.4em;display:grid;grid-template-columns:29em 1fr;gap:3em;padding:0 3.2em}
.tab.portrait .home{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:2.6em;padding:0 2.6em;inset:3.6em 0 8.6em}
.wgs{display:grid;grid-template-columns:1fr 1fr;gap:1.6em;align-content:start;grid-auto-rows:max-content}
.tab.portrait .wgs{grid-template-columns:2fr 1fr 1fr}
.wg{border-radius:2.2em;background:var(--o-glass);box-shadow:inset 0 0 0 1px var(--o-gline);padding:1.4em 1.5em;position:relative;overflow:hidden;cursor:pointer;border:0;text-align:left;color:inherit}
.wg.big{grid-column:1/-1}
.tab.portrait .wg.big{grid-column:auto}
.wg.sq{aspect-ratio:1}
.wg.wide{grid-column:1/-1}
.tab.portrait .wg.wide{display:none}
.tab.portrait .rings{display:none}
.w-day{font-size:1.15em;font-weight:600;color:var(--o-muted)}
.w-time{font-size:5em;font-weight:200;line-height:1;letter-spacing:-.02em;margin-top:.1em}
.w-brand{font-size:1.6em;font-weight:800;margin-top:.35em}
.w-brand span{font-weight:300;opacity:.7}
.w-t{font-size:1em;font-weight:600;color:var(--o-muted)}
.w-big{font-size:3.2em;font-weight:700;line-height:1;margin-top:.25em}
.w-s{font-size:.95em;color:var(--o-muted);margin-top:.3em;line-height:1.25}
.rings{position:absolute;right:1em;top:1em;width:3.8em;height:3.8em}
.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)}
.rings .trk{stroke:var(--o-line)}
.nrow{display:flex;gap:.8em;align-items:center;margin-top:.8em;border:0;background:none;padding:0;text-align:left;cursor:pointer;width:100%;color:inherit}
.nrow .ic{width:2.3em;height:2.3em;font-size:.8em;border-radius:.6em;flex:none}
.nrow div{font-size:1em;line-height:1.25}
.nrow b{display:block;font-size:.9em;color:var(--o-muted);font-weight:600}
.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:2em 1em;align-content:start;padding-top:.6em}
.tab.portrait .grid{grid-template-columns:repeat(4,1fr);gap:2.2em 1em}
.app{position:relative;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:.5em;cursor:pointer;color:var(--o-ink)}
.ic{width:5.2em;height:5.2em;border-radius:24%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1em;letter-spacing:-.02em;flex:none;
  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 .3em .8em rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.14)}
.ic b{font-size:1.65em;font-weight:800}
.ic svg{width:56%;height:56%}
.app .lb{font-size:.95em;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--o-shadow)}
.app:active .ic{filter:brightness(.85)}
.dock{position:absolute;z-index:30;left:50%;bottom:1.6em;transform:translateX(-50%);display:flex;align-items:center;gap:1.1em;padding:1em 1.1em;border-radius:2.4em;
  background:var(--o-glass);box-shadow:inset 0 0 0 1px var(--o-gline), 0 .6em 2em rgba(0,0,0,.18)}
.dock .ic{width:4.6em;height:4.6em}
.dock .ic b{font-size:1.45em}
.dock .lb{display:none}
.dock .sep{width:1px;height:3.8em;background:var(--o-line);margin:0 .2em}
.homebar{position:absolute;z-index:45;left:50%;bottom:.55em;width:12em;height:1.3em;margin-left:-6em;border:0;padding:0;background:none;cursor:pointer}
.homebar::after{content:"";position:absolute;left:0;right:0;top:.45em;height:.4em;border-radius:1em;background:var(--o-ink);opacity:.75}
.wake .grid .app,.wake .dock .app{animation:pop .75s cubic-bezier(.2,1.5,.35,1) both;animation-delay:calc(var(--i)*26ms + 100ms)}
.wake .wg{animation:rise .9s cubic-bezier(.2,1.2,.3,1) both;animation-delay:calc(var(--i)*80ms + 60ms)}
@keyframes pop{from{opacity:0;transform:scale(.25) translateY(3em)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(4em) scale(.92)}to{opacity:1;transform:none}}
.back-in .grid .app,.back-in .dock .app,.back-in .wg{animation:retn .55s cubic-bezier(.2,1,.3,1) both;animation-delay:calc(var(--i)*10ms)}
@keyframes retn{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}

/* bloqueio */
.lock{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;cursor:pointer;background:transparent}
.lock[hidden]{display:none}
.l-date{margin-top:4.6em;font-size:1.6em;font-weight:600;color:var(--o-muted)}
.l-time{font-size:9.5em;font-weight:700;line-height:.95;letter-spacing:-.03em}
.l-stack{width:min(36em,80%);margin-top:auto;display:grid;gap:.8em}
.l-n{border-radius:1.6em;background:var(--o-glass);padding:1em 1.2em;display:flex;gap:1em;align-items:center;animation:ln .7s cubic-bezier(.2,1.3,.35,1) both}
.l-n .ic{width:2.6em;height:2.6em;border-radius:.7em;font-size:.8em}
.l-n b{display:block;font-size:1em}
.l-n div span{display:block;font-size:1.05em;color:var(--o-muted)}
@keyframes ln{from{opacity:0;transform:translateY(2em) scale(.95)}to{opacity:1;transform:none}}
.l-hint{margin:1.6em 0 2.6em;font-size:1.05em;color:var(--o-muted)}

/* janelas de app */
.apps{position:absolute;inset:0;z-index:20;display:none;background:#000}
.apps.show{display:block}
.pane{position:absolute;top:0;bottom:0;left:0;width:100%;overflow:hidden;background:var(--o-app);display:flex;transition:border-radius .3s}
.apps.split .pane{border-radius:1.2em}
.pane[hidden]{display:none}
.side{width:22em;flex:none;background:var(--o-side);padding:4em 1.4em 2em;display:flex;flex-direction:column;gap:.4em;overflow:auto;scrollbar-width:none}
.side-h{display:flex;gap:.9em;align-items:center;margin:0 .4em 1.4em}
.side-h .ic{width:3.6em;height:3.6em}
.side-h .ic b{font-size:1.2em}
.side-h b{display:block;font-size:1.35em}
.side-h span{font-size:.95em;color:var(--o-muted)}
.side-n button,.side-rel button{display:flex;align-items:center;gap:.7em;width:100%;border:0;background:none;cursor:pointer;padding:.7em .8em;border-radius:.8em;font-size:1.1em;text-align:left;color:var(--o-ink)}
.side-n button[aria-pressed="true"]{background:var(--o-acc);color:#fff;font-weight:600}
:root[data-os="dark"] .side-n button[aria-pressed="true"]{color:#0B1230}
.side-rel button .ic{width:1.9em;height:1.9em;border-radius:.5em;font-size:.6em}
.side-rel button .ic b{font-size:1.4em}
.side-t{font-size:.9em;color:var(--o-faint);font-weight:600;margin:1.6em .8em .3em}
.pmain{flex:1;min-width:0;overflow:auto;padding:3.8em 3em 4em;scrollbar-width:none}
.pmain::-webkit-scrollbar,.side::-webkit-scrollbar{display:none}
.mh{display:flex;align-items:center;justify-content:space-between;gap:1em;flex-wrap:wrap}
.mh-t{display:flex;gap:.8em;align-items:center}
.mh-t .ic{display:none;width:3em;height:3em}
.mh-t .ic b{font-size:1em}
.mh h2{margin:0;font-size:2.5em;font-weight:800;letter-spacing:-.02em}
.seg{display:none;background:var(--o-card2);border-radius:.8em;padding:.25em}
.seg button{border:0;background:none;cursor:pointer;padding:.5em 1em;border-radius:.6em;font-size:1em;color:var(--o-ink)}
.seg button[aria-pressed="true"]{background:var(--o-card);box-shadow:0 .1em .4em rgba(0,0,0,.12);font-weight:600}
.pane.compact .side{display:none}
.pane.compact .seg{display:flex}
.pane.compact .mh-t .ic{display:grid}
.pane.compact .pmain{padding:3.8em 2em 4em}
.desc{font-size:1.3em;line-height:1.4;color:var(--o-muted);margin:.6em 0 0;max-width:38em}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(13em,1fr));gap:1.2em;margin-top:1.8em}
.card{border-radius:1.5em;background:var(--o-card);padding:1.3em 1.5em;box-shadow:0 .2em .8em rgba(0,0,0,.05)}
.kpi b{display:block;font-size:2.6em;font-weight:700;line-height:1.05}
.kpi span{font-size:.95em;color:var(--o-muted)}
.chart{margin-top:1.2em}
.chart .ct{font-size:1em;font-weight:600;color:var(--o-muted)}
.chart svg{display:block;width:100%;height:11em;margin-top:.6em}
.act{margin-top:1.2em}
.row{display:flex;align-items:center;gap:.9em;padding:.85em 0;border-top:1px solid var(--o-line);font-size:1.08em;width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;color:var(--o-ink)}
.row:first-of-type{border-top:0}
.row .v{margin-left:auto;color:var(--o-muted)}
.row.btn{cursor:pointer;color:var(--o-acc)} .row.btn.red{color:var(--o-red)}
.dot{width:.6em;height:.6em;border-radius:50%;background:var(--a);flex:none}
.demo{font-size:.9em;color:var(--o-faint);margin-top:1.2em}
.caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(15em,1fr));gap:1.2em;margin-top:1.6em}
.cap-card{border-radius:1.5em;background:var(--o-card);padding:1.4em;min-height:8em;display:flex;flex-direction:column;gap:.8em}
.cap-card .ck{width:2.2em;height:2.2em;border-radius:50%;background:var(--a);display:grid;place-items:center}
.cap-card .ck::after{content:"";width:.6em;height:1em;border:solid #fff;border-width:0 .22em .22em 0;transform:rotate(45deg) translate(-.05em,-.1em)}
.cap-card b{font-size:1.2em}
.grp-t{font-size:.95em;color:var(--o-faint);font-weight:600;margin:1.8em .2em .6em}
.tabc{animation:tabin .45s cubic-bezier(.2,1,.3,1)}
@keyframes tabin{from{opacity:0;transform:translateY(1em)}to{opacity:1;transform:none}}
.tabc .card,.tabc .cap-card{animation:rowin .55s cubic-bezier(.2,1.1,.3,1) both;animation-delay:calc(var(--i,0)*80ms + 120ms)}
@keyframes rowin{from{opacity:0;transform:translateY(1.4em)}to{opacity:1;transform:none}}
.mt{position:absolute;z-index:5;top:.7em;left:50%;margin-left:-2.4em;width:4.8em;height:1.8em;border:0;border-radius:1em;background:transparent;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:.35em}
.mt i{width:.45em;height:.45em;border-radius:50%;background:var(--o-ink);opacity:.55}
.mt:hover{background:var(--o-line)}
.mtmenu{position:absolute;z-index:6;top:2.8em;left:50%;transform:translateX(-50%);min-width:15em;border-radius:1.2em;background:var(--o-card);box-shadow:0 1em 3em rgba(0,0,0,.3), inset 0 0 0 1px var(--o-line);padding:.4em;display:grid}
.mtmenu[hidden]{display:none}
.mtmenu button{border:0;background:none;cursor:pointer;text-align:left;padding:.75em 1em;border-radius:.8em;font-size:1.05em;color:var(--o-ink)}
.mtmenu button:hover{background:var(--o-card2)}
.mtmenu button.red{color:var(--o-red)}
.divider{position:absolute;z-index:8;top:0;bottom:0;width:1.2em;margin-left:-.6em;cursor:col-resize;display:none;align-items:center;justify-content:center;touch-action:none}
.apps.split .divider{display:flex}
.divider i{width:.4em;height:4em;border-radius:1em;background:rgba(255,255,255,.6)}
.picker{position:absolute;z-index:7;top:0;bottom:0;right:0;border-radius:1.2em;background:var(--o-sheet);display:none;flex-direction:column;padding:4em 2em 2em;overflow:auto}
.picker.show{display:flex}
.picker h3{margin:0 0 1.4em;font-size:1.5em}
.picker .pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.4em,1fr));gap:1.6em .6em}
.drawbar{display:flex;gap:.7em;align-items:center;margin-top:1.4em;flex-wrap:wrap}
.drawbar button{width:2.6em;height:2.6em;border-radius:50%;border:0;cursor:pointer;background:var(--c);box-shadow:inset 0 0 0 1px var(--o-line)}
.drawbar button[aria-pressed="true"]{box-shadow:0 0 0 .2em var(--o-app),0 0 0 .4em var(--o-acc)}
.drawbar .tx{width:auto;border-radius:1em;padding:0 1.1em;background:var(--o-card2);color:var(--o-ink);font-size:1em}
.canvas-wrap{margin-top:1.2em;border-radius:1.5em;overflow:hidden;background:var(--o-card);
  background-image:linear-gradient(var(--o-line) 1px,transparent 1px),linear-gradient(90deg,var(--o-line) 1px,transparent 1px);background-size:2em 2em;height:24em;position:relative}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.hinge-svg{display:block;width:100%;height:13em}
.apr{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2em;padding:.6em 0}
.apb{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:.6em;font-size:1em;cursor:pointer;color:inherit;padding:0}
.apv{width:70%;aspect-ratio:1.4;border-radius:.8em;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(127,127,127,.35)}
.apv::before{content:"";position:absolute;left:10%;top:16%;width:30%;bottom:16%;border-radius:.4em;background:currentColor;opacity:.16}
.apv::after{content:"";position:absolute;left:46%;right:10%;top:16%;height:30%;border-radius:.4em;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 .25em #2F7BFF}
.apb[aria-pressed="true"]{font-weight:700}
.sws{display:flex;gap:.9em;flex-wrap:wrap;padding:.4em 0}
.sws button{width:2.8em;height:2.8em;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))}
.sws button[aria-pressed="true"]{box-shadow:0 0 0 .2em var(--o-card),0 0 0 .4em var(--o-ink)}
.tg{margin-left:auto;width:3.2em;height:1.95em;border-radius:1em;background:var(--o-card2);position:relative;border:0;padding:0;cursor:pointer;transition:background .25s}
.tg::after{content:"";position:absolute;top:.17em;left:.17em;width:1.6em;height:1.6em;border-radius:50%;background:#fff;box-shadow:0 .1em .3em rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.tg[aria-checked="true"]{background:#34C77B}
.tg[aria-checked="true"]::after{transform:translateX(1.25em)}

/* sobreposições do sistema */
.zoom{position:absolute;z-index:35;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%))}
.banner{position:absolute;z-index:48;top:.8em;left:50%;width:min(34em,70%);margin-left:calc(min(34em,70%)/-2);border-radius:1.6em;background:var(--o-card);box-shadow:0 .8em 2.4em rgba(0,0,0,.3);
  display:flex;gap:1em;align-items:center;padding:.9em 1.1em;transform:translateY(-160%);cursor:pointer;border:0;text-align:left;color:var(--o-ink)}
.banner .ic{width:2.8em;height:2.8em;border-radius:.75em;font-size:.85em}
.banner b{display:block;font-size:1em}
.banner div span{display:block;font-size:1.05em;color:var(--o-muted)}
.banner em{font-style:normal;margin-left:auto;align-self:flex-start;font-size:.85em;color:var(--o-faint)}
.overlay{position:absolute;inset:0;z-index:46;display:none}
.overlay.show{display:block}
.switcher{background:rgba(0,0,0,.55)}
:root[data-os="light"] .switcher{background:rgba(220,224,230,.7)}
.sw-list{position:absolute;inset:0;display:flex;align-items:center;gap:3em;padding:0 8%;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory}
.sw-list::-webkit-scrollbar{display:none}
.sw-card{flex:none;width:36%;scroll-snap-align:center;cursor:pointer;border:0;background:none;padding:0;color:var(--o-ink);text-align:left;touch-action:none}
.sw-lb{display:flex;gap:.6em;align-items:center;margin-bottom:.7em;font-weight:600;font-size:1.05em}
.sw-lb .ic{width:2em;height:2em;border-radius:.5em;font-size:.6em}
.sw-lb .ic b{font-size:1.4em}
.sw-shot{position:relative;width:100%;aspect-ratio:var(--ar,1.43);border-radius:1.4em;overflow:hidden;box-shadow:0 1em 3em rgba(0,0,0,.35);background:var(--o-app)}
.sw-shot .pane{position:absolute;left:0;top:0;transform-origin:0 0;pointer-events:none}
.sw-empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font-size:1.3em;color:var(--o-ink)}
.cc{background:rgba(0,0,0,.35)}
:root[data-os="light"] .cc{background:rgba(200,205,214,.35)}
.cc-panel{position:absolute;top:2.8em;right:2em;width:27em;display:grid;grid-template-columns:repeat(4,1fr);gap:1em;grid-auto-rows:6em}
.tile{border:0;cursor:pointer;border-radius:1.6em;background:var(--o-sheet);box-shadow:inset 0 0 0 1px var(--o-gline);color:var(--o-ink);display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4em;font-size:.9em;padding:.6em;text-align:center}
.tile svg{width:2.2em;height:2.2em}
.tile[aria-pressed="true"]{background:#fff;color:#111418}
:root[data-os="light"] .tile[aria-pressed="true"]{background:#2F5BD3;color:#fff}
.tile.w2{grid-column:span 2}.tile.h2{grid-row:span 2}
.bright{position:relative;overflow:hidden;cursor:ns-resize;touch-action:none;justify-content:flex-end;padding-bottom:1em}
.bright .fill{position:absolute;left:0;right:0;bottom:0;background:#fff;height:var(--bv,100%)}
.bright svg{position:relative;z-index:1;color:#7d8590}
.spot{background:var(--o-sheet)}
.spot-in{width:min(40em,80%);margin:5em auto 0;display:flex;flex-direction:column;max-height:calc(100% - 7em)}
.sinp{width:100%;border:0;border-radius:1.2em;padding:.9em 1.2em;background:var(--o-card2);color:var(--o-ink);font:inherit;font-size:1.3em}
.sinp::placeholder{color:var(--o-faint)}
.s-t{font-size:.95em;color:var(--o-faint);font-weight:600;margin:1.4em .3em .7em}
.s-list{overflow:auto;scrollbar-width:none}
.s-row{display:flex;align-items:center;gap:1em;width:100%;border:0;background:none;cursor:pointer;padding:.6em .4em;text-align:left;border-radius:1em;color:var(--o-ink)}
.s-row:hover{background:var(--o-card2)}
.s-row .ic{width:2.8em;height:2.8em;border-radius:.75em;font-size:.85em}
.s-row b{display:block;font-size:1.1em}
.s-row span.c{display:block;font-size:.9em;color:var(--o-muted)}
.touch{position:absolute;z-index:80;left:50%;top:60%;width:3.4em;height:3.4em;margin:-1.7em 0 0 -1.7em;border-radius:50%;pointer-events:none;opacity:0;
  background:rgba(255,255,255,.3);box-shadow:0 0 0 1px rgba(255,255,255,.75), 0 .6em 1.5em rgba(0,0,0,.35)}
:root[data-os="light"] .touch{background:rgba(17,20,24,.16);box-shadow:0 0 0 1px rgba(17,20,24,.4), 0 .6em 1.5em rgba(0,0,0,.18)}
.touch i{position:absolute;inset:0;border-radius:50%;border:.18em solid currentColor;opacity:0}
.screen,.wall,.wg,.pane,.side,.card,.dock,.banner,.tile{transition:background-color .5s ease,color .5s ease}

/* ---------- camadas do tour ---------- */
.disp{font-family:"Arquivo",system-ui,sans-serif}
.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%}
.cap{position:fixed;z-index:3;pointer-events:none;color:var(--ink);left:clamp(16px,4vw,64px);width:min(28vw,420px);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}
.cap-name{margin:.25em 0 0;font-family:"Arquivo",system-ui,sans-serif;font-weight:800;font-stretch:72%;font-size:clamp(38px,5vw,84px);line-height:.92;letter-spacing:-.02em;overflow:hidden;padding-bottom:.06em}
.cap-name span{display:inline-block}
.cap-desc{margin:.6em 0 0;font-size:clamp(15px,1.3vw,19px);line-height:1.4;max-width:36ch;overflow:hidden;padding-bottom:.2em}
.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(32px,9vw,52px)} }
.hud{position:fixed;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);transform:translateX(-50%);width:min(800px,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-b{flex:1;height:22px;border:0;padding:0;background:none;cursor:pointer;position:relative}
.seg-b.area{flex:.35}.seg-b.big{flex:1.4}
.seg-b::before{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:var(--line)}
.seg-b::after{content:"";position:absolute;left:0;top:9px;height:4px;border-radius:2px;background:var(--accent);width:0}
.seg-b.done::after{width:100%}
.seg-b.on::after{animation:segfill var(--d,4s) linear forwards}
.hud.paused .seg-b.on::after{animation-play-state:paused}
@keyframes segfill{to{width:100%}}
.hnum{flex:none;font-size:13px;color:var(--muted);min-width:64px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:520px){ .hnum{display:none} }
body.touring .hint{display:none}

/* ---------- menu e botão de tema ---------- */
.burger,.themebtn{position:fixed;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);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)}
.burger{left:14px;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)}
.themebtn{left:68px;display:grid;place-items:center}
.themebtn svg{width:20px;height:20px;grid-area:1/1;transition:transform .5s cubic-bezier(.3,1.4,.5,1), opacity .3s}
: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}
.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;-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.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)}
.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}
@media (prefers-reduced-motion: reduce){
  .float{animation:none}
  .wake .grid .app,.wake .dock .app,.wake .wg,.back-in .grid .app,.back-in .dock .app,.back-in .wg,.l-n,.tabc,.tabc .card,.tabc .cap-card{animation-duration:.01s!important;animation-delay:0s!important}
}
.dock{transition:transform .45s cubic-bezier(.2,1,.3,1), opacity .3s}
.in-app .dock{opacity:0;transform:translate(-50%,160%);pointer-events:none}
.pane{transition:left .45s cubic-bezier(.2,1,.3,1), width .45s cubic-bezier(.2,1,.3,1), border-radius .3s}
.apps.dragging .pane,.apps.dragging .picker{transition:none}
.picker{transition:left .45s cubic-bezier(.2,1,.3,1), width .45s cubic-bezier(.2,1,.3,1)}
.divider{transition:left .45s cubic-bezier(.2,1,.3,1)}
.apps.dragging .divider{transition:none}
.tw-sch{display:block;width:100%;height:12em}

/* sistemas reais do hub: ícone próprio sobre fundo branco, grade com rolagem 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:16%;height:16%;object-fit:contain}
.grid{position:relative;min-height:0;min-width:0;grid-template-columns:repeat(6,minmax(0,1fr));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding-bottom:1em}
.grid::-webkit-scrollbar{display:none}
.tabc .card+.card{margin-top:1em}
.go-real{display:block;margin-top:1.2em;padding:.95em;border-radius:1.1em;text-align:center;font-weight:700;font-size:1.05em;color:#fff;background:var(--a);text-decoration:none;box-shadow:0 .3em .9em rgba(0,0,0,.18)}
.go-real:active{filter:brightness(.85)}
.tab.portrait .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.shots{display:flex;gap:1em;overflow-x:auto;scroll-snap-type:x mandatory;margin:1.2em 0;scrollbar-width:none}
.shots::-webkit-scrollbar{display:none}
.shots figure{margin:0;flex:0 0 min(100%,34em);scroll-snap-align:start}
.shots img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:1.1em;box-shadow:0 .3em 1em rgba(0,0,0,.18)}
.shots figcaption{font-size:.85em;color:var(--o-faint);margin-top:.4em}
.row.fx{align-items:flex-start;line-height:1.4}.row.fx .ck{flex:none;margin-top:.2em}