:root{
  --paper:#F0E2CF;--paper2:#E6D4BC;--paper3:#DAC4A8;
  --ink:#1C3B2E;--coral:#A04A34;--coral2:#7E3A27;
  --rule:#D2BFA7;--white:#FFF9F0;--muted:#59655E;
  --safe-bottom:max(1rem,env(safe-area-inset-bottom));
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink);font-family:'Karla',system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100dvh;background:var(--paper);color:var(--ink)}
button,input,textarea{font:inherit}
button{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.appbar{height:68px;padding:0 max(1rem,env(safe-area-inset-left));padding-right:max(1rem,env(safe-area-inset-right));display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--rule);background:rgba(240,226,207,.94);backdrop-filter:blur(12px);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand img{width:38px;height:38px}
.brand span{display:grid;line-height:1.05}.brand b{font-family:'Fraunces',Georgia,serif;font-size:1rem}.brand small{font:700 .62rem/1.3 'Courier Prime',monospace;letter-spacing:.09em;text-transform:uppercase;margin-top:.22rem;color:var(--coral2)}
.appbar-actions{display:flex;align-items:center;gap:.8rem}
.privacy-pill,.live-dot,.connection{font:700 .66rem/1 'Courier Prime',monospace;letter-spacing:.08em;text-transform:uppercase}
.privacy-pill{display:flex;align-items:center;gap:.4rem;color:var(--muted)}.privacy-pill i,.live-dot i{width:8px;height:8px;border-radius:50%;background:var(--coral)}
.link-btn{border:0;background:none;padding:.55rem .1rem;font:700 .7rem/1 'Courier Prime',monospace;letter-spacing:.07em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
main{min-height:calc(100dvh - 68px)}
.onboarding{min-height:calc(100dvh - 68px);padding:clamp(1.4rem,4vw,3rem) 1.25rem 3rem}
.onboarding-shell{width:min(100%,42rem);min-height:calc(100dvh - 130px);margin:auto;display:flex;flex-direction:column}
.onboarding-top{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem}
.onboarding-back,.onboarding-skip{border:0;background:transparent;cursor:pointer;color:var(--ink)}
.onboarding-back{font-size:1.55rem;line-height:1;padding:.45rem}
.onboarding-skip{font:700 .67rem/1 'Courier Prime',monospace;letter-spacing:.07em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;padding:.55rem .15rem}
.onboarding-progress{height:5px;background:rgba(28,59,46,.12);overflow:hidden}
.onboarding-progress span{display:block;width:25%;height:100%;background:var(--coral);transition:width .32s cubic-bezier(.16,1,.3,1)}
.onboarding-stage,.onboarding-result{flex:1;padding:clamp(2.3rem,7vw,4.8rem) 0 1rem}
.onboarding-stage h1,.onboarding-result h1{font-family:'Fraunces',Georgia,serif;font-size:clamp(2.15rem,7vw,3.7rem);line-height:1.03;letter-spacing:-.03em;margin:.35rem 0 1rem;max-width:13ch}
.onboarding-lead,.onboarding-result>p:not(.eyebrow):not(.tiny){font-size:1.05rem;line-height:1.65;color:var(--muted);max-width:35rem}
.onboarding-options{display:grid;gap:.75rem;margin-top:2rem}
.onboarding-option{width:100%;min-height:68px;display:grid;grid-template-columns:2.2rem 1fr auto;align-items:center;gap:.7rem;padding:1rem 1.05rem;border:1.5px solid rgba(28,59,46,.22);background:rgba(255,249,240,.55);color:var(--ink);text-align:left;cursor:pointer;transition:transform .15s,border-color .15s,background .15s,box-shadow .15s}
.onboarding-option:hover{transform:translateY(-2px);border-color:var(--ink);box-shadow:4px 5px 0 rgba(160,74,52,.11)}
.onboarding-option.selected{border-color:var(--coral);background:var(--paper2);box-shadow:4px 5px 0 rgba(160,74,52,.18)}
.onboarding-option .opt-icon{font-size:1.35rem}.onboarding-option b{font-size:1rem}.onboarding-option small{display:block;margin-top:.12rem;color:var(--muted);font-size:.82rem;line-height:1.35}
.onboarding-option .opt-check{font:700 .73rem/1 'Courier Prime',monospace;color:var(--coral2)}
.onboarding-note{margin-top:1.15rem;padding:1rem 1.05rem;background:var(--paper2);border-left:4px solid var(--coral);font-size:.92rem;line-height:1.55;color:var(--ink)}
.plan-card{margin-top:2rem;padding:1.4rem;background:var(--paper2);border:1.5px solid var(--ink);box-shadow:7px 8px 0 rgba(160,74,52,.14)}
.plan-label{font:700 .67rem/1.2 'Courier Prime',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--coral2)}
.plan-card h2{font-family:'Fraunces',Georgia,serif;font-size:clamp(1.65rem,5vw,2.25rem);margin:.5rem 0 .45rem}.plan-card p{margin:0;color:var(--muted);line-height:1.6}
.plan-path{display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-top:1.2rem}.plan-path span{padding:.55rem .35rem;border-top:1px solid var(--rule);font-size:.75rem}.plan-path b{display:block;font:700 .66rem/1 'Courier Prime',monospace;color:var(--coral2);margin-bottom:.2rem}
.result-actions{display:grid;gap:.75rem;margin-top:1.4rem}
.lobby{max-width:74rem;margin:auto;padding:clamp(3.5rem,8vw,7rem) 2rem;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(20rem,.75fr);gap:clamp(3rem,8vw,7rem);align-items:center}
.eyebrow{font:700 .72rem/1.3 'Courier Prime',monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--coral2);margin:0 0 .8rem}
.lobby h1,.room-top h1,dialog h2{font-family:'Fraunces',Georgia,serif;font-weight:600;letter-spacing:-.025em}
.lobby h1{font-size:clamp(2.7rem,6vw,5.5rem);line-height:1.02;margin:.3rem 0 1.2rem;max-width:11ch}.lobby h1 em{font-style:normal;color:var(--coral)}
.lead{font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.75;max-width:52ch;color:#405048}
.trust{display:flex;flex-wrap:wrap;gap:.55rem;margin-top:1.7rem}.trust span{padding:.5rem .7rem;border:1px solid var(--rule);font:700 .68rem/1.2 'Courier Prime',monospace;letter-spacing:.06em;text-transform:uppercase;background:rgba(255,249,240,.35)}
.install-card{display:none;width:100%;margin-top:1.15rem;padding:1rem 1.05rem;border:1.5px solid var(--ink);background:var(--paper2);color:var(--ink);text-align:left;box-shadow:4px 5px 0 rgba(160,74,52,.16);cursor:pointer}.install-card b{display:block;font-family:'Fraunces',Georgia,serif;font-size:1.05rem}.install-card span{display:block;margin-top:.25rem;font-size:.86rem;line-height:1.45;color:var(--muted)}
.join-card{background:var(--paper2);border:1px solid var(--rule);padding:clamp(1.5rem,4vw,2.4rem);box-shadow:10px 12px 0 rgba(160,74,52,.14)}
.field{display:grid;gap:.45rem}.field>span,.notes>span{font:700 .72rem/1.3 'Courier Prime',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
input,textarea{width:100%;border:1.5px solid rgba(28,59,46,.35);background:var(--white);color:var(--ink);padding:.85rem .9rem;border-radius:0;min-height:48px}
input:focus,textarea:focus{outline:2px solid var(--ink);outline-offset:0;border-color:var(--ink)}
.join-actions{display:grid;gap:1.1rem;margin-top:1.2rem}.room-row{display:grid;grid-template-columns:1fr auto;gap:.55rem}
.primary,.secondary{min-height:48px;padding:.75rem 1rem;border:2px solid var(--ink);font:700 .73rem/1.1 'Courier Prime',monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s,background .15s}
.primary{background:var(--coral);color:var(--paper);box-shadow:4px 4px 0 var(--ink)}.primary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.secondary{background:var(--paper);color:var(--ink)}.secondary:hover{background:var(--white)}.secondary.compact{min-height:40px;padding:.55rem .75rem;font-size:.66rem}
.or{height:1px;background:var(--rule);position:relative;margin:.35rem 0}.or span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:var(--paper2);padding:0 .65rem;color:var(--muted);font-size:.82rem}
.observer{display:flex;gap:.7rem;align-items:flex-start;margin-top:1.25rem;cursor:pointer}.observer input{width:18px;height:18px;min-height:0;accent-color:var(--coral);margin-top:.2rem}.observer span{display:grid}.observer b{font-size:.92rem}.observer small{color:var(--muted);line-height:1.45;margin-top:.1rem}
.tiny,.form-error{font-size:.82rem;line-height:1.5;color:var(--muted);margin:1.1rem 0 0}.form-error{color:var(--coral2);font-weight:700}

.room{min-height:calc(100dvh - 68px);padding:1.25rem 1.4rem calc(88px + var(--safe-bottom));max-width:100rem;margin:auto}
.room-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:0 auto 1rem;max-width:96rem}
.live-dot{display:flex;align-items:center;gap:.45rem;color:var(--coral2)}.live-dot i{animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{50%{opacity:.25}}
.room-top h1{font-size:1.45rem;margin:.35rem 0 0}.room-code{font:inherit;border:0;background:none;color:var(--coral2);padding:0;text-decoration:underline;text-decoration-style:dotted;text-underline-offset:4px;cursor:pointer}
.room-top-actions{display:flex;align-items:center;gap:.8rem}.connection{color:var(--muted)}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1rem;max-width:96rem;margin:auto;align-items:start}
.stage{min-width:0}.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}
.video-tile{position:relative;aspect-ratio:16/10;background:var(--ink);overflow:hidden;border:1px solid rgba(28,59,46,.25)}
.video-tile video{width:100%;height:100%;object-fit:cover;display:block;background:var(--ink)}.video-tile.local video{transform:scaleX(-1)}
.video-tile .video-empty{position:absolute;inset:0;display:none;place-items:center;background:linear-gradient(145deg,#294B3D,#1C3B2E)}.video-tile.camera-off .video-empty,.video-tile:not(.has-video) .video-empty{display:grid}.video-empty span{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--paper);color:var(--ink);font:600 2rem/1 'Fraunces',serif}
.video-tile footer{position:absolute;left:.65rem;right:.65rem;bottom:.55rem;display:flex;justify-content:space-between;align-items:center;gap:.4rem;color:var(--paper);text-shadow:0 1px 3px #000;padding:.35rem .45rem;background:rgba(28,59,46,.45);backdrop-filter:blur(5px)}
.video-tile footer b{font-size:.83rem}.video-tile footer span{font:700 .6rem/1 'Courier Prime',monospace;letter-spacing:.06em;text-transform:uppercase}
.video-tile.mic-off footer::after{content:"micro apagado";position:absolute;right:.45rem;bottom:-1.05rem;font:700 .54rem/1 'Courier Prime',monospace;letter-spacing:.05em;color:var(--paper)}
.waiting{text-align:center;color:var(--muted);font-size:.9rem;margin:1rem}
.coach{background:var(--paper2);border:1px solid var(--rule);padding:1rem;position:sticky;top:84px;max-height:calc(100dvh - 100px);overflow:auto}
.coach-head{display:flex;align-items:center;justify-content:space-between}.coach-head .eyebrow{margin:0}.ghost-icon{border:0;background:none;font-size:1.4rem;cursor:pointer;padding:.3rem}
.scene-field{margin-top:1rem}
.steps{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:1rem}.steps button{display:grid;grid-template-columns:2.1rem 1fr;grid-template-rows:auto auto;text-align:left;gap:.05rem .55rem;border:0;background:var(--paper);padding:.75rem;cursor:pointer;color:var(--ink)}.steps button span{grid-row:1/3;font:700 .67rem/1.4 'Courier Prime',monospace;color:var(--coral2)}.steps button b{font-family:'Fraunces',serif;font-size:1rem}.steps button small{color:var(--muted)}.steps button.active{background:var(--coral);color:var(--paper)}.steps button.active span,.steps button.active small{color:var(--paper)}
.timer-card{display:flex;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem 0;border-bottom:1px solid var(--rule)}.timer-label{display:block;font:700 .64rem/1.2 'Courier Prime',monospace;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}#timer{display:block;font:600 2.15rem/1 'Fraunces',serif;font-variant-numeric:tabular-nums;margin-top:.2rem}.timer-actions{display:grid;justify-items:end}
.notes{display:grid;gap:.45rem;margin-top:1rem}.notes span small{font:400 .7rem/1.2 'Karla',sans-serif;text-transform:none;letter-spacing:0}.notes textarea{resize:vertical;min-height:98px}
.controls{position:fixed;left:50%;bottom:var(--safe-bottom);transform:translateX(-50%);display:flex;gap:.45rem;padding:.5rem;background:rgba(28,59,46,.93);border:1px solid rgba(240,226,207,.2);z-index:30;box-shadow:0 10px 35px rgba(28,59,46,.28);backdrop-filter:blur(10px)}
.control{width:68px;min-height:56px;border:0;background:transparent;color:var(--paper);display:grid;place-items:center;align-content:center;gap:.15rem;cursor:pointer}.control span{font-size:1.15rem}.control small{font-size:.68rem}.control:not(.active){background:rgba(240,226,207,.16)}.control.pause{background:var(--paper);color:var(--ink)}.control.leave{background:var(--coral);color:var(--paper)}
.room-error{position:fixed;left:50%;bottom:calc(88px + var(--safe-bottom));transform:translateX(-50%);max-width:min(90vw,38rem);background:var(--coral2);color:var(--paper);padding:.8rem 1rem;z-index:35}
.coach.collapsed>*:not(.coach-head){display:none}.coach.collapsed{padding:.8rem}.coach.collapsed .ghost-icon{transform:rotate(45deg)}
dialog{border:2px solid var(--ink);background:var(--paper);color:var(--ink);max-width:30rem;width:calc(100% - 2rem);padding:1.6rem;box-shadow:10px 12px 0 rgba(28,59,46,.2)}dialog::backdrop{background:rgba(28,59,46,.48)}dialog h2{font-size:1.8rem;margin:.3rem 0 .6rem}dialog p:not(.eyebrow){line-height:1.6;color:var(--muted)}.dialog-actions{display:flex;gap:.7rem;justify-content:flex-end;margin-top:1.3rem;flex-wrap:wrap}
.install-instructions{font-size:1rem;line-height:1.65;color:var(--muted)}.install-instructions b{color:var(--ink)}.install-instructions ol{padding-left:1.25rem;margin:.8rem 0 0}.install-instructions li{margin:.5rem 0}
@media(max-width:900px){.lobby{grid-template-columns:1fr;max-width:44rem;padding-top:3rem}.workspace{grid-template-columns:1fr}.coach{position:static;max-height:none}.room-top-actions .connection{display:none}}
@media(max-width:620px){.appbar{height:60px}.brand small{display:none}.privacy-pill{display:none}.install-card{display:block}.install-action{font-size:.64rem}.onboarding{padding:1rem 1rem 2rem}.onboarding-shell{min-height:calc(100dvh - 90px)}.onboarding-stage,.onboarding-result{padding-top:2rem}.onboarding-stage h1,.onboarding-result h1{font-size:clamp(2rem,10vw,2.75rem)}.onboarding-option{min-height:64px;padding:.9rem}.plan-path{grid-template-columns:repeat(2,1fr)}.lobby{padding:2.5rem 1.15rem 4rem}.lobby h1{font-size:clamp(2.45rem,13vw,3.7rem)}.join-card{padding:1.25rem}.room{padding:.8rem .7rem calc(84px + var(--safe-bottom))}.room-top{align-items:center}.room-top-actions .secondary{display:none}.video-grid{grid-template-columns:1fr}.video-tile{aspect-ratio:4/3}.coach{border-left:0;border-right:0}.controls{width:calc(100% - 1rem);justify-content:space-around}.control{width:auto;flex:1;min-width:0}.control small{font-size:.62rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}