:root{color-scheme:dark;--bg:#080b12;--panel:#10141e;--line:#252b38;--muted:#8990a3;--text:#f0f1f6;--purple:#a78bfa;--cyan:#36dfd0;font-family:Arial,Helvetica,sans-serif;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#18142b55,transparent 43%),var(--bg);color:var(--text)}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{opacity:.34;cursor:not-allowed}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:5px}button,a{touch-action:manipulation}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}[hidden]{display:none!important}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.app-shell{max-width:1640px;margin:auto;padding:0 44px}.topbar{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #252b3880}.brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--text);font-weight:750;font-size:27px;letter-spacing:-1px}.brand-icon{height:43px;width:43px;border:1px solid #a78bfa70;border-radius:12px;color:var(--purple);display:grid;place-items:center;background:#a78bfa10}.brand-icon svg{width:32px;height:32px;stroke-width:1.7}.brand-light{font-weight:400;color:#a5a7b8}.brand small{display:block;font-size:8px;letter-spacing:2.4px;margin-top:4px;color:var(--muted);font-weight:600}.header-note{display:flex;align-items:center;gap:9px;font-size:12px;letter-spacing:.2px;color:#a7acbd}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--cyan);display:inline-block;box-shadow:0 0 12px #36dfd040}.creator{font-size:12px;letter-spacing:.3px;color:#b4b8c6;text-decoration:none}.creator span{color:var(--purple);margin-left:9px}main{padding-top:32px}.workspace-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.eyebrow{font-size:9px;letter-spacing:2.5px;color:var(--purple);font-weight:700;margin:0 0 10px}h1{font-size:32px;font-weight:500;letter-spacing:-1.1px;margin:0}.workspace-subtitle{font-size:12px;line-height:1.6;color:var(--muted);margin:0;text-align:right}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;border:1px solid var(--line);border-radius:17px;overflow:hidden;box-shadow:0 30px 90px #0004}.board-panel{min-width:0;background:var(--panel)}.toolbar{height:70px;display:flex;align-items:center;padding:0 20px;gap:14px;border-bottom:1px solid var(--line);background:#121621}.tool-group{display:flex;gap:4px}.icon-button{width:35px;height:35px;display:grid;place-items:center;color:#9a9fb1;border:1px solid transparent;background:none;border-radius:8px;flex-shrink:0}.icon-button:hover:not(:disabled){background:#ffffff09;color:#fff}.icon-button.selected{color:var(--purple);background:#a78bfa1c;border-color:#a78bfa30}.icon-button svg{width:17px;height:17px}.tool-divider{height:22px;width:1px;display:block;background:var(--line);flex-shrink:0}.swatches{display:flex;align-items:center;gap:10px}.swatch{height:19px;width:19px;padding:0;flex-shrink:0;border-radius:50%;background:var(--swatch);border:3px solid transparent;background-clip:padding-box;position:relative}.swatch.selected:after{position:absolute;content:'';inset:-5px;border:1px solid var(--swatch);border-radius:50%;opacity:.8}.swatch:hover{transform:scale(1.12)}.brush-control{display:flex;align-items:center;gap:9px;margin-left:6px}.brush-dot{height:7px;width:7px;display:block;background:#9da3b7;border-radius:50%}.brush-control input{width:60px;accent-color:var(--purple);height:3px;cursor:pointer}.brush-control output{min-width:12px;font-size:10px;color:var(--muted)}.toolbar-end{margin-left:auto;display:flex;align-items:center;gap:4px}.toolbar-end .tool-divider{margin:0 8px}.save-button{border:1px solid #4a4266;background:#282137;color:#ddd5f7;font-size:11px;letter-spacing:.1px;display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:7px;white-space:nowrap}.save-button svg{width:16px;height:16px}.save-button:hover:not(:disabled){background:#3a2e51}.stage{height:clamp(470px,62vh,740px);min-height:420px;position:relative;overflow:hidden;background:#0b101a;isolation:isolate}.board-grid{position:absolute;inset:0;background-image:radial-gradient(#70829d25 1px,transparent 1px);background-size:25px 25px;pointer-events:none}.board-grain{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#5d419c0b,transparent 65%);pointer-events:none}.board-corner{width:14px;height:14px;position:absolute;z-index:2;pointer-events:none;opacity:.45}.corner-tl{top:20px;left:20px;border-left:1px solid #7b829b;border-top:1px solid #7b829b}.corner-tr{top:20px;right:20px;border-right:1px solid #7b829b;border-top:1px solid #7b829b}.corner-bl{bottom:20px;left:20px;border-left:1px solid #7b829b;border-bottom:1px solid #7b829b}.corner-br{bottom:20px;right:20px;border-right:1px solid #7b829b;border-bottom:1px solid #7b829b}#ink{position:absolute;inset:0;width:100%;height:100%;z-index:3;touch-action:none}#ink.pointer-mode{cursor:crosshair}.welcome{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;transition:opacity .3s}.welcome:before{content:'';position:absolute;width:310px;height:310px;border:1px solid #a78bfa08;border-radius:50%;top:4%;z-index:-1}.welcome-art{width:220px;height:80px;margin-bottom:4px;opacity:.8}.welcome-art svg{width:100%;height:100%;overflow:visible}.art-trace{stroke:var(--purple);stroke-width:2.5;fill:none;stroke-dasharray:500;stroke-dashoffset:0;animation:trace-in 2s ease both}.trace-glow{stroke-width:12;opacity:.12;filter:blur(5px)}.welcome-art circle{stroke:var(--cyan);fill:#0b101a;stroke-width:1}.welcome-art circle:last-child{fill:var(--cyan)}.welcome-kicker{font-size:8px;letter-spacing:3px;color:#8c839e;margin:10px 0 16px}.welcome h2{font-size:66px;line-height:.94;letter-spacing:-3px;font-weight:400;margin:0}.welcome h2 em{font-style:normal;color:var(--purple)}.welcome>p:not(.welcome-kicker){font-size:12px;line-height:1.65;color:#9197aa;margin:16px 0 21px}.primary-button{height:45px;padding:0 22px;border:none;border-radius:8px;background:var(--purple);color:#171024;display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:12px;box-shadow:0 5px 30px #a78bfa1f}.primary-button span{margin-left:16px}.primary-button:hover:not(:disabled){background:#bda8ff;transform:translateY(-1px)}.primary-button:disabled{opacity:.7;cursor:wait}.primary-button svg{width:18px}.text-button{display:flex;align-items:center;justify-content:center;gap:7px;color:#a1a6b8;background:none;border:0;font-size:10px;padding:14px 4px}.text-button:hover{color:#eee}.text-button svg{width:13px;height:13px}.welcome-privacy{color:#676f83;font-size:9px;margin-top:3px}.mode-label{position:absolute;z-index:4;top:25px;left:25px;display:flex;align-items:center;gap:9px;font-size:9px;color:#9ca6ba;letter-spacing:1.5px;pointer-events:none}.fullscreen-button{position:absolute;right:21px;top:21px;z-index:8;width:31px;height:31px;border:1px solid #34405750;background:#0c1221b0;color:#8c99ae;border-radius:6px;display:grid;place-items:center}.fullscreen-button svg{width:15px;height:15px}.board-signature{position:absolute;bottom:26px;left:26px;font-size:8px;letter-spacing:2px;color:#3d485f;z-index:2;pointer-events:none}.board-signature span{margin-left:9px;color:#6f5d99}.hand-cursor{position:absolute;left:50%;top:50%;width:23px;height:23px;border:1px solid #a78bfa99;border-radius:50%;transform:translate(-50%,-50%);z-index:6;pointer-events:none;box-shadow:0 0 20px #a78bfa20;transition:width .1s,height .1s,background .1s}.hand-cursor span{position:absolute;left:50%;top:50%;width:4px;height:4px;background:var(--purple);border-radius:50%;transform:translate(-50%,-50%)}.hand-cursor.drawing{width:14px;height:14px;background:#a78bfa44;border-color:var(--purple);box-shadow:0 0 25px #a78bfa55}.hand-cursor.erasing{width:44px;height:44px;background:#ffffff12;border-color:#eee}.camera-preview{position:absolute;z-index:7;bottom:24px;right:24px;width:142px;aspect-ratio:4/3;border:1px solid #4f536f;border-radius:10px;overflow:hidden;background:#0b101a;box-shadow:0 10px 35px #0006;pointer-events:none}.camera-preview video,.camera-preview canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:fill;transform:scaleX(-1)}.camera-preview canvas{z-index:1}.camera-preview>span{position:absolute;z-index:2;bottom:7px;left:8px;font-size:6px;letter-spacing:1.1px;color:#fff;background:#070a12a0;padding:3px 4px;border-radius:2px}.toast{position:absolute;z-index:10;bottom:28px;left:50%;transform:translateX(-50%);background:#1d2435f5;border:1px solid #53516a;color:#e2dfed;padding:12px 18px;max-width:85%;width:max-content;border-radius:9px;font-size:11px;line-height:1.5;box-shadow:0 8px 30px #0007;pointer-events:none}.board-footer{height:43px;display:flex;align-items:center;gap:20px;padding:0 22px;border-top:1px solid var(--line);font-size:9px;color:#7f899d}#status{display:flex;align-items:center;gap:7px;min-width:140px}.status-dot{height:5px;width:5px;background:#687286;border-radius:50%;display:block}#status[data-state=ready] .status-dot{background:var(--cyan);box-shadow:0 0 10px #36dfd044}#status[data-state=drawing] .status-dot{background:#ff73ba;box-shadow:0 0 10px #ff73ba55}#status[data-state=loading] .status-dot{background:var(--purple);animation:pulse 1s infinite}#status[data-state=error] .status-dot{background:#ff8585}.footer-hint{margin-left:auto;color:#545e74}.side-panel{border-left:1px solid var(--line);background:linear-gradient(160deg,#151723,#10131c 70%);padding:26px 26px 20px;display:flex;flex-direction:column}.side-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.tag{font-size:8px;letter-spacing:1.8px;color:#8a90a5}.tiny-spark{color:var(--purple);font-size:21px}.side-panel h2{font-size:39px;line-height:1.03;font-weight:400;letter-spacing:-1.5px;margin:0 0 14px}.side-panel h2 span{color:var(--purple)}.side-description{font-size:11px;line-height:1.65;color:var(--muted);max-width:190px;margin:0 0 28px}.steps{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:24px}.steps li{display:flex;gap:11px}.step-number{font-size:9px;font-family:monospace;color:#746c90;margin-top:2px}.steps strong{font-size:11px;font-weight:600}.steps p{font-size:10px;line-height:1.65;color:#81899f;margin:6px 0 0}.gesture-demo{display:flex;align-items:center;gap:0;margin-top:15px;height:24px}.gesture-point{display:block;width:11px;height:11px;border:1px solid var(--purple);border-radius:50%;background:#a78bfa22;flex-shrink:0}.gesture-point.two{width:8px;height:8px;border-color:var(--cyan);background:#36dfd033}.gesture-line{height:1px;background:linear-gradient(90deg,var(--purple),var(--cyan));width:22px}.gesture-caption{font-size:6px;letter-spacing:.8px;color:#6f7891;margin-left:10px;white-space:nowrap}.session-controls{margin-top:24px;padding-top:20px;border-top:1px solid var(--line)}.secondary-button{background:#1b2030;color:#bbc0d1;border:1px solid #353b4e;border-radius:7px;display:flex;align-items:center;justify-content:center;width:100%;gap:8px;height:36px;font-size:10px}.secondary-button svg{width:13px;height:13px}.side-bottom{display:flex;align-items:flex-start;gap:10px;padding-top:20px;margin-top:auto;border-top:1px solid #252b3860}.side-bottom p{margin:0;font-size:9px;line-height:1.8;color:#68748b}.side-bottom strong{color:#a0a9be;font-weight:500}.privacy-icon{width:23px;height:25px;border:1px solid #343746;border-radius:6px;display:grid;place-items:center;color:#9294b0}.privacy-icon svg{width:13px;height:13px}.page-footer{display:flex;justify-content:space-between;padding:20px 2px 24px;font-size:9px;color:#555f74;line-height:1.5}.page-footer>span:last-child{font-size:7px;letter-spacing:1.8px}.footer-star{margin:0 8px;color:#817194}.stage:fullscreen{width:100vw;height:100dvh;min-height:100dvh}.stage:fullscreen .board-grid{background-size:30px 30px}.stage:fullscreen .camera-preview{width:180px}.stage:fullscreen .fullscreen-button{background:#283146}.busy .welcome-art{opacity:.35}.busy .primary-button{cursor:wait}@keyframes trace-in{from{stroke-dashoffset:500}to{stroke-dashoffset:0}}@keyframes pulse{50%{opacity:.35}}@media(min-width:1450px){.app-shell{padding:0 64px}.workspace{grid-template-columns:minmax(0,1fr) 310px}.side-panel{padding:30px}.stage{height:clamp(560px,65vh,800px)}.side-panel h2{font-size:46px}.steps{gap:30px}.steps strong{font-size:12px}.steps p{font-size:11px}}@media(max-width:1120px){.app-shell{padding:0 24px}.workspace{grid-template-columns:minmax(0,1fr) 245px}.side-panel{padding:23px 20px}.toolbar{gap:10px;padding:0 14px}.swatches{gap:6px}.brush-control input{width:40px}.brush-control{gap:5px;margin-left:0}.save-button{padding:8px}.save-button span{display:none}.toolbar-end .tool-divider{margin:0 3px}.stage{height:580px}.side-panel h2{font-size:36px}}@media(max-width:820px){.workspace{grid-template-columns:1fr}.side-panel{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:10px 24px;padding:24px}.side-top{grid-column:1/-1;margin-bottom:5px}.side-panel h2{grid-column:1;font-size:34px;grid-row:2}.side-description{grid-column:1;grid-row:3;margin-bottom:0}.steps{grid-column:2;grid-row:2/5;gap:18px}.steps p{font-size:11px}.steps strong{font-size:12px}.gesture-demo{display:none}.side-bottom{grid-column:1;margin-top:8px;padding-top:12px}.session-controls{grid-column:1/-1;grid-row:5;margin-top:10px;display:flex;gap:10px;align-items:center;padding-top:15px}.session-controls .secondary-button{width:auto;padding:0 14px}.session-controls .text-button{padding:0 8px}.stage{height:570px}.brush-control input{width:75px}.save-button span{display:inline}.toolbar{padding:0 20px;gap:16px}.swatches{gap:10px}.topbar{height:88px}.header-note{display:none}.workspace-heading{margin-bottom:21px}.welcome h2{font-size:72px}.welcome-art{height:95px}}@media(max-width:520px){.app-shell{padding:0 13px}.topbar{height:80px}.brand{font-size:25px;gap:10px}.brand-icon{height:37px;width:37px;border-radius:10px}.brand small{font-size:7px}.creator{font-size:10px}main{padding-top:24px}.workspace-heading{margin-bottom:19px}.eyebrow{font-size:7px;letter-spacing:2px}h1{font-size:26px}.workspace-subtitle{font-size:9px}.workspace{border-radius:12px}.toolbar{height:60px;padding:0 10px;gap:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}.tool-group{gap:0}.icon-button{width:29px;height:31px}.swatches{gap:6px}.swatch{width:18px;height:18px}.swatch.selected:after{inset:-4px}.brush-control{display:none}.toolbar-end{gap:0}.toolbar-end .tool-divider{display:none}.save-button{padding:8px;border-radius:6px;margin-left:4px}.save-button span{display:none}.stage{height:530px;min-height:440px}.welcome h2{font-size:67px}.welcome-art{width:195px;height:90px;margin-bottom:0}.welcome-kicker{font-size:7px;margin-top:2px}.welcome>p:not(.welcome-kicker){font-size:12px}.welcome-privacy{font-size:8px}.board-footer{padding:0 12px;gap:12px;font-size:8px;height:39px}.footer-hint{display:none}.board-footer #stroke-count{margin-left:auto}.camera-preview{width:108px;right:15px;bottom:17px}.mode-label{left:20px;font-size:7px}.side-panel{padding:20px;grid-template-columns:110px 1fr;gap:10px 18px}.side-panel h2{font-size:30px}.side-description{font-size:10px}.steps li{gap:8px}.steps strong{font-size:10px}.steps p{font-size:10px}.side-bottom{gap:0}.privacy-icon{display:none}.side-bottom p{font-size:8px}.page-footer{font-size:8px;padding:16px 1px 20px}.page-footer>span:last-child{display:none}.board-signature{left:21px;bottom:24px;font-size:6px}.stage:fullscreen .camera-preview{width:115px}.welcome{padding:15px}.toast{font-size:10px;bottom:20px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.stage.theater{position:fixed;inset:0;width:100vw;height:100dvh;min-height:100dvh;z-index:1000}.stage.theater .camera-preview{width:160px}
/* aurora boreal animada: só transform/opacity, atrás do conteúdo */
html{background:#020617}
body{background-color:transparent!important;position:relative;isolation:isolate}
body::before,body::after{content:"";position:fixed;z-index:-1;pointer-events:none;inset:-30% -40%;will-change:transform,opacity;filter:blur(60px);opacity:.55}
body::before{background:radial-gradient(40% 22% at 30% 30%,#22d3ee55,transparent 70%),radial-gradient(35% 18% at 65% 25%,#34d39950,transparent 70%),radial-gradient(30% 20% at 50% 45%,#a78bfa45,transparent 70%);animation:aurora-a 26s ease-in-out infinite alternate}
body::after{background:radial-gradient(38% 16% at 40% 60%,#f472b640,transparent 70%),radial-gradient(42% 20% at 70% 50%,#8b5cf645,transparent 70%),radial-gradient(30% 14% at 20% 55%,#2dd4bf40,transparent 70%);animation:aurora-b 34s ease-in-out infinite alternate}
@keyframes aurora-a{0%{transform:translate3d(-6%,0,0) rotate(-6deg) scaleY(.9);opacity:.45}50%{opacity:.7}100%{transform:translate3d(8%,4%,0) rotate(5deg) scaleY(1.1);opacity:.5}}
@keyframes aurora-b{0%{transform:translate3d(7%,3%,0) rotate(4deg);opacity:.35}50%{opacity:.6}100%{transform:translate3d(-8%,-3%,0) rotate(-5deg);opacity:.45}}
body.cam-on::before,body.cam-on::after{animation-play-state:paused;opacity:.3}
@media (prefers-reduced-motion:reduce){body::before,body::after{animation:none}}
@media (max-width:760px){body::before,body::after{filter:blur(40px)}}
.mobile-start{display:none}
@media (max-width:760px){html,body{overflow-x:hidden}.mobile-start{display:flex;justify-content:center;width:100%;margin:0 0 16px;padding:16px;font-size:15px}body.cam-on .mobile-start,.welcome #start-camera{display:none}}
@media (max-width:760px){.topbar{flex-wrap:wrap;height:auto;gap:10px;padding:12px 0;justify-content:center}.topbar nav,.topbar>div:last-child{flex-wrap:wrap;justify-content:center;gap:12px}.workspace-heading{flex-direction:column;align-items:center;text-align:center}.workspace-subtitle{display:none}}
.hand-cursor{transition:background .12s,border-color .12s,box-shadow .12s,width .12s,height .12s}.hand-cursor:not(.drawing){border-color:#36dfd0;background:#36dfd022}.hand-cursor.drawing{width:18px!important;height:18px!important;background:#ff73ba88!important;border-color:#ff73ba!important;box-shadow:0 0 22px #ff73bacc!important}
.primary-button,.mobile-start{background:linear-gradient(135deg,#ff8cc6,#ff5fae);color:#1d0a18;border:1px solid #ffb3da55;border-radius:999px;font-weight:800;box-shadow:0 6px 26px #ff5fae40}
.primary-button:hover:not(:disabled),.mobile-start:hover{background:linear-gradient(135deg,#ffa3d2,#ff73ba);color:#1d0a18}
.primary-button:focus-visible,.mobile-start:focus-visible{outline:2px solid #fff;outline-offset:3px}
.primary-button svg,.mobile-start svg{stroke:currentColor}
/* 3D fx */
.fx3d{position:fixed;inset:0;pointer-events:none;z-index:-1;perspective:900px;overflow:hidden}
.fx3d i{position:absolute;display:block;transform-style:preserve-3d;animation:fx-spin var(--d,26s) linear infinite,fx-float 9s ease-in-out infinite alternate;opacity:.55;will-change:transform}
.fx3d i::before,.fx3d i::after{content:"";position:absolute;inset:0;border-radius:inherit;background:inherit;border:inherit}
.fx3d i::before{transform:translateZ(-10px);filter:brightness(.6)}
.fx3d i::after{background:linear-gradient(135deg,#fff6,#fff0 45%);border:0}
@keyframes fx-spin{from{transform:rotateX(18deg) rotateY(0) rotateZ(var(--z,0deg))}to{transform:rotateX(18deg) rotateY(360deg) rotateZ(var(--z,0deg))}}
@keyframes fx-float{from{translate:0 -14px}to{translate:0 14px}}
body.cam-on .fx3d{opacity:.25}body.cam-on .fx3d i{animation-play-state:paused}
@media (max-width:760px){.fx3d i:nth-child(n+4){display:none}}
@media (prefers-reduced-motion:reduce){.fx3d i{animation:none}.tilt3d{transform:none!important}}
.tilt3d{transition:transform .25s ease-out;transform-style:preserve-3d;will-change:transform}
.primary-button,.mobile-start,.btn3d{position:relative;transform:perspective(500px) translateZ(0);transition:transform .18s,box-shadow .18s;box-shadow:0 1px 0 #ffffff55 inset,0 -3px 0 #0003 inset,0 4px 0 #0000004d,0 10px 24px #0006}
.primary-button::after,.mobile-start::after{content:"";position:absolute;left:8%;right:8%;top:2px;height:42%;border-radius:999px;background:linear-gradient(#fff5,#fff0);pointer-events:none}
.primary-button:hover:not(:disabled),.mobile-start:hover{transform:perspective(500px) rotateX(8deg) translateY(-2px)}
.primary-button:active,.mobile-start:active{transform:perspective(500px) rotateX(-4deg) translateY(2px);box-shadow:0 1px 0 #fff5 inset,0 1px 0 #0000004d,0 4px 10px #0006}
@media (prefers-reduced-motion:reduce){.primary-button,.mobile-start{transition:none}}