/* Mac first-run prototype. Reuses lab tokens and the Prateleira/Semana styles. */
.ob-desk{max-width:1040px;margin:0 auto;padding:8px 28px 40px}
.ob-window{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;height:min(760px,calc(100dvh - 140px));min-height:560px;margin:8px auto 0;border-radius:14px;background:var(--surface);border:1px solid var(--hairline);box-shadow:0 1px 0 rgb(255 255 255 / .04) inset,0 30px 70px -30px rgb(20 12 0 / .45),0 2px 8px rgb(20 12 0 / .08);overflow:hidden;isolation:isolate;transition:background-color 400ms ease}
.ob-titlebar{grid-row:1;display:flex;gap:8px;padding:13px 14px 10px}
.ob-titlebar span{width:12px;height:12px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgb(0 0 0 / .15)}
.ob-titlebar span:nth-child(2){background:#febc2e}.ob-titlebar span:nth-child(3){background:#28c840}
.ob-foot{max-width:none;text-align:center}

/* Night scenes (welcome and done) */
.ob-window.is-night{background:radial-gradient(ellipse 60% 50% at 50% 38%,#d8a13c14,transparent),#0c0d0b;color:#faf6eb;border-color:#2a2922}
.ob-window.is-night .ob-titlebar span{opacity:.5}

/* Progress: dots joined by a quiet line; the Lumi light lands on the current step. */
.ob-progress{grid-row:2;display:flex;justify-content:center;gap:4px;padding:2px 24px 14px}
.ob-progress-step{position:relative;display:flex;align-items:center;gap:7px;padding:4px 10px;font-size:11px;font-weight:550;color:var(--text-secondary);transition:color 200ms ease}
.ob-progress-step+.ob-progress-step::before{content:'';position:absolute;left:-10px;top:50%;width:12px;height:1px;background:var(--separator)}
.ob-progress-dot{width:6px;height:6px;border-radius:50%;border:1px solid var(--separator);transition:background-color 240ms ease,border-color 240ms ease,box-shadow 300ms ease}
.ob-progress-step.is-done .ob-progress-dot{background:var(--text-secondary);border-color:var(--text-secondary)}
.ob-progress-step.is-current{color:var(--text-primary)}
.ob-progress-step.is-current .ob-progress-dot{background:var(--luvi-light);border-color:var(--luvi-light);box-shadow:0 0 8px 1px var(--glow)}

.ob-stage{grid-row:3;position:relative;min-height:0;overflow:hidden;padding:6px 44px 0}
.ob-step{display:flex;flex-direction:column;height:100%;min-height:0;max-width:760px;margin:0 auto}
.ob-head{margin:10px 0 20px}
.ob-title{font-size:26px;letter-spacing:-.8px;font-weight:650;margin:0 0 6px}
.ob-sub{margin:0;color:var(--text-secondary);font-size:14px;line-height:1.6;max-width:560px;text-wrap:pretty}
.ob-scroll{flex:1;min-height:0;overflow:auto;padding:2px 2px 24px;margin:0 -2px;mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}

.ob-footer{grid-row:4;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--hairline)}
.ob-back{justify-self:start;min-height:36px;padding:6px 12px;border:0;background:none;color:var(--text-secondary);font-size:13px;border-radius:10px}
.ob-back:hover{background:var(--sunk);color:var(--text-primary)}
.ob-footer-hint{justify-self:center;font-size:12px;color:var(--text-secondary);display:inline-grid;max-width:420px}
.ob-next{justify-self:end;min-width:150px}
.ob-next:disabled{opacity:.45}
.ob-arrow{display:inline-block;transition:translate 160ms var(--ease)}
.ob-next:hover:not(:disabled) .ob-arrow{translate:2px 0}

/* Lumi sprite: the approved artwork in articulated layers. */
.ob-luvi{position:relative;display:block;width:var(--w);aspect-ratio:1.5;perspective:360px;will-change:transform;filter:drop-shadow(0 0 22px #ffc14b22)}
.ob-luvi>span{position:absolute;inset:0;background:url('/assets/firefly-approved.png') center/contain no-repeat;transform-origin:51% 58%}
.ob-luvi-body{z-index:3;clip-path:polygon(57% 0,86% 0,86% 80%,47% 99%,29% 96%,32% 77%,48% 62%,50% 54%,46% 50%,48% 34%,56% 31%)}
.ob-luvi-wing-far{z-index:1;clip-path:polygon(25% 17%,43% 16%,54% 54%,51% 63%,41% 56%,24% 37%)}
.ob-luvi-wing-near{z-index:2;clip-path:polygon(15% 39%,33% 35%,49% 53%,52% 63%,40% 68%,20% 64%)}
.ob-luvi>.ob-luvi-tail{inset:auto;left:29%;top:73%;width:20%;height:22%;border-radius:50%;background:#ffc95a;filter:blur(10px);opacity:.55;transition:opacity 600ms ease,box-shadow 600ms ease}
.ob-luvi.is-lit>.ob-luvi-tail{opacity:.95;box-shadow:0 0 60px 20px #ffca5638}
.ob-luvi.is-flying .ob-luvi-wing-far{animation:ob-wing-far 150ms ease-in-out infinite alternate}
.ob-luvi.is-flying .ob-luvi-wing-near{animation:ob-wing-near 130ms ease-in-out infinite alternate}
@keyframes ob-wing-far{from{transform:rotateX(-14deg) rotateZ(-4deg)}to{transform:rotateX(46deg) rotateZ(5deg)}}
@keyframes ob-wing-near{from{transform:rotateY(-10deg) rotateZ(4deg)}to{transform:rotateY(42deg) rotateZ(-7deg)}}

/* Welcome / done */
.ob-cover{position:absolute;inset:0;z-index:20;background:radial-gradient(ellipse 60% 50% at 50% 38%,#d8a13c14,transparent),#0c0d0b;color:#faf6eb;pointer-events:none}
.ob-flyer{position:absolute;z-index:22;pointer-events:none;transform-origin:center}
.ob-welcome{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;text-align:center;padding-bottom:40px}
.ob-perch{height:110px;display:grid;place-items:center;margin-bottom:18px}
.ob-hello{font-size:clamp(30px,4vw,42px);font-weight:550;letter-spacing:-1.4px;color:#fff9e9;margin:0 0 14px;text-shadow:0 0 50px #ffcc611c}
.ob-hello-sub{max-width:440px;margin:0 0 30px;color:#b9b5a8;font-size:15px;line-height:1.7;text-wrap:pretty}
.ob-start{min-width:200px}
.is-waiting{opacity:0;translate:0 6px;filter:blur(3px)}
.ob-hello,.ob-hello-sub,.ob-start,.ob-blocked{transition:opacity 700ms var(--ease),translate 700ms var(--ease),filter 700ms var(--ease)}
.ob-welcome.is-done .secondary{background:transparent;border-color:#45443a;color:#d9d3c3}
.ob-menubar{position:absolute;top:0;left:0;right:0;display:flex;justify-content:flex-end;align-items:center;gap:14px;height:26px;padding:0 16px;background:#ffffff0d;font-size:11px;color:#cfc9b8;opacity:.9}
.ob-menubar-luvi{position:relative;width:16px;height:12px;background:url('/assets/firefly-approved.png') center/contain no-repeat}
.ob-menubar-luvi::after{content:'';position:absolute;inset:-7px;border-radius:50%;border:1px solid var(--brand);opacity:0}
.ob-menubar.is-pointing .ob-menubar-luvi::after{animation:ob-point 1100ms ease-out 2}
@keyframes ob-point{0%{opacity:.9;scale:.5}100%{opacity:0;scale:1.6}}

/* Goal */
.ob-goal-input{min-height:56px!important;font-size:19px!important;padding:12px 18px!important;border-radius:14px!important}
.ob-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 18px}
.ob-chip{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:6px 12px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface);font-size:13px;color:var(--text-primary);transition:background-color 160ms ease,border-color 160ms ease}
.ob-chip:hover{background:var(--sunk)}
.ob-chip:active{scale:.97}
.ob-chip[aria-pressed=true]{background:var(--brand-subtle);border-color:color-mix(in srgb,var(--luvi-light) 50%,var(--separator))}
.ob-chip-meta{font-size:11px;color:var(--text-secondary);font-variant-numeric:tabular-nums}

/* Hours: the lab week, a little more compact */
.ob-week{flex:1;min-height:0;overflow:hidden;padding-bottom:8px}
.ob-week .week{--row:8.5px}
.ob-week .kbd-hint{margin-top:10px}
.ob-step .ob-chips{margin-top:0}

/* Permission */
.ob-permission{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;max-width:620px;padding:28px;border-radius:22px;background:var(--sunk);border:1px solid var(--hairline)}
.ob-shield{width:74px;height:74px}
.ob-shield svg{width:100%;height:100%;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ob-shield-body{stroke:var(--text-secondary);stroke-width:2;fill:color-mix(in srgb,var(--brand) 6%,transparent);transition:stroke 400ms ease,fill 400ms ease}
.ob-shield-check{stroke:var(--on-brand);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 420ms var(--ease) 120ms}
.ob-permission.is-done .ob-shield-body{stroke:#d99b2b;fill:var(--brand)}
.ob-permission.is-done .ob-shield-check{stroke-dashoffset:0}
.ob-facts{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14px}
.ob-facts li{display:flex;gap:12px;align-items:center}
.ob-facts li::before{content:'';flex:none;width:5px;height:5px;border-radius:50%;background:var(--luvi-light);box-shadow:0 0 6px var(--glow)}
.ob-permission-status{margin:14px 0 0;font-size:13px;font-weight:600}
.ob-permission-status:empty{display:none}

/* Sheets (system auth, sign-in) */
.ob-scrim{position:absolute;inset:0;z-index:30;background:rgb(0 0 0 / .18)}
.ob-sheet{position:absolute;z-index:31;top:36px;left:50%;width:340px;margin-left:-170px;display:grid;justify-items:center;gap:8px;padding:24px 22px 16px;border-radius:0 0 16px 16px;background:var(--surface);border:1px solid var(--separator);border-top:0;box-shadow:0 24px 50px -18px rgb(0 0 0 / .45);text-align:center}
.ob-sheet-title{margin:0;font-size:14px;font-weight:650}
.ob-sheet-text{display:inline-grid;margin:0 0 6px;font-size:12px;color:var(--text-secondary)}
.ob-sheet-actions{display:flex;gap:8px;justify-content:center;width:100%;margin-top:8px}
.ob-sheet-button{flex:1;min-height:30px;padding:4px 10px;border:1px solid var(--separator);background:var(--surface);font-size:12px;border-radius:9px}
.ob-touch{width:76px;height:76px;min-height:76px;padding:4px;margin:6px 0;border:0;border-radius:50%;background:none;color:#e5484d}
.ob-touch svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ob-touch:hover{background:color-mix(in srgb,#e5484d 8%,transparent)}
.ob-touch-ring{stroke:var(--brand);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:1;rotate:-90deg;transform-origin:center;transition:stroke-dashoffset 680ms ease-in-out}
.ob-touch.is-reading .ob-touch-ring{stroke-dashoffset:0}
.ob-touch.is-ok{color:var(--luvi-light)}
.ob-google{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:40px;margin-top:4px;border:1px solid var(--separator);background:var(--surface);font-weight:600;font-size:13px;border-radius:11px}
.ob-google-g{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:conic-gradient(#ea4335 0 25%,#fbbc05 0 50%,#34a853 0 75%,#4285f4 0);color:#fff;font-size:11px;font-weight:800}
.ob-google[aria-busy=true]{opacity:.7}
.ob-google.is-ok{border-color:color-mix(in srgb,var(--luvi-light) 60%,var(--separator))}

/* Block test: a small browser */
.ob-browser{display:flex;flex-direction:column;height:min(330px,100%);border-radius:14px;border:1px solid var(--separator);background:var(--background);overflow:hidden;box-shadow:0 12px 30px -18px rgb(0 0 0 / .4)}
.ob-browser-bar{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--hairline);background:var(--surface)}
.ob-dots{display:flex;gap:6px}.ob-dots i{width:9px;height:9px;border-radius:50%;background:var(--separator)}
.ob-url{flex:1;display:flex;align-items:center;gap:8px;min-height:30px;padding:4px 12px;border-radius:9px;background:var(--sunk);font-size:13px}
.ob-lock{color:var(--text-secondary)}
.ob-caret{width:1px;height:15px;background:var(--text-primary);animation:ob-caret 1s steps(1) 6}
.ob-browser.is-blocked .ob-caret{display:none}
@keyframes ob-caret{50%{opacity:0}}
.ob-go{min-height:30px;padding:4px 12px;font-size:12px;border:1px solid var(--separator);background:var(--surface);border-radius:9px;white-space:nowrap}
.ob-go:not(:disabled):hover{background:var(--brand-subtle)}
.ob-page-area{position:relative;flex:1;display:grid;place-items:center;overflow:hidden;transition:background-color 500ms ease}
.ob-feed{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:80%}
.ob-feed span{aspect-ratio:16/9;border-radius:8px;background:var(--sunk)}
.ob-browser.is-blocked .ob-page-area{background:radial-gradient(ellipse 50% 60% at 50% 35%,#d8a13c18,transparent),#0f100e;color:#faf6eb}
.ob-blocked{display:grid;justify-items:center;gap:6px;text-align:center}
.ob-blocked-perch{position:absolute;top:22px;left:50%;margin-left:-35px}
.ob-blocked{margin-top:60px}
.ob-blocked-title{margin:0;font-size:20px;font-weight:550;letter-spacing:-.5px}
.ob-blocked-goal{margin:0;font-size:12px;color:#b9b5a8}.ob-blocked-goal strong{color:#ece6d6;font-weight:600}
.ob-blocked-button{margin-top:8px;padding:6px 12px;border-radius:9px;background:linear-gradient(180deg,#ffd57f,#f8bd52);color:#202124;font-size:12px;font-weight:600}

/* Paywall */
.ob-summary{display:grid;gap:8px;padding:14px 16px;border-radius:14px;background:var(--sunk);border:1px solid var(--hairline);font-size:13px}
.ob-summary-row{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:center}
.ob-summary-label{color:var(--text-secondary)}
.ob-summary-sites{display:flex;align-items:center;gap:10px}
.ob-summary-logos{display:flex;gap:6px}
.ob-plans{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.ob-plan{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px 18px 14px;text-align:left;border:1px solid var(--hairline);border-radius:18px;background:var(--surface);transition:border-color 200ms ease,background-color 200ms ease,box-shadow 300ms ease,transform 140ms var(--ease)}
.ob-plan:hover{border-color:var(--separator)}
.ob-plan:active{transform:scale(.985)}
.ob-plan[aria-checked=true]{border-color:color-mix(in srgb,var(--luvi-light) 60%,var(--separator));background:color-mix(in srgb,var(--brand-subtle) 55%,var(--surface));box-shadow:0 10px 28px -18px var(--glow)}
.ob-plan-top{display:flex;align-items:center;gap:8px}
.ob-plan-name{font-size:15px;font-weight:650}
.ob-plan-badge{padding:2px 7px;border-radius:6px;background:var(--brand-subtle);font-size:10px;font-weight:650;color:var(--text-primary)}
.ob-plan-check{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1px solid var(--separator);transition:background-color 200ms ease,box-shadow 200ms ease,border-color 200ms ease}
.ob-plan[aria-checked=true] .ob-plan-check{border-color:var(--brand);background:radial-gradient(circle,var(--on-brand) 0 3px,var(--brand) 3.5px)}
.ob-plan-price{display:flex;align-items:baseline;gap:6px}
.ob-plan-price strong{font-size:24px;letter-spacing:-.6px;font-variant-numeric:tabular-nums}
.ob-plan-price span{font-size:12px;color:var(--text-secondary)}
.ob-plan ul{list-style:none;margin:2px 0 0;padding:0;display:grid;gap:6px;font-size:12px;color:var(--text-secondary);line-height:1.45}
.ob-plan li{display:flex;gap:8px}
.ob-plan li::before{content:'✓';color:var(--luvi-light);font-weight:700}
.ob-plan li.is-off{opacity:.7}.ob-plan li.is-off::before{content:'–';color:var(--text-secondary)}
.ob-fineprint{margin:14px 0 0;font-size:11px;color:var(--text-secondary)}

@media(max-width:760px){
  .ob-desk{padding-inline:12px}
  .ob-stage{padding:4px 20px 0}
  .ob-progress-label{display:none}
  .ob-plans{grid-template-columns:1fr}
  .ob-permission{grid-template-columns:1fr}
  .ob-footer{grid-template-columns:auto 1fr auto}
  .ob-footer-hint{display:none}
  .ob-window{height:auto;min-height:calc(100dvh - 120px)}
}
:root[data-motion=reduced] .is-waiting{opacity:1;translate:none;filter:none}
@media(prefers-reduced-motion:reduce){.is-waiting{opacity:1;translate:none;filter:none}.ob-luvi .ob-luvi-wing{animation:none!important}}