:root{color-scheme:light;--ink:#51415c;--muted:#817482;--paper:#fffaf0;--line:#e4dcd9;--plum:#786485;--apricot:#e9a48a;--mint:#b9cdb9}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#f4f0e8;color:var(--ink);font-family:ui-rounded,"SF Pro Rounded",system-ui,sans-serif}button,input{font:inherit}button{color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button,a{transition:transform .16s,background .16s,box-shadow .16s}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #765589;outline-offset:4px}button:active{transform:translateY(2px)}button:disabled{opacity:.42;cursor:default}svg{display:block;width:100%;height:100%}.icon-library{position:absolute;width:0;height:0;overflow:hidden}p,h1,h2,h3{margin:0}.game-shell{width:min(1420px,calc(100% - 64px));margin:auto}.game-shell .topbar{grid-template-columns:42px minmax(0,1fr) auto;gap:16px;padding:21px 0}.game-shell .home-link{width:42px;height:42px;border:1px solid #ded5d2;background:var(--paper);border-radius:50%;color:var(--ink);box-shadow:0 2px 0 #e1d9d3;font-size:22px}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:49px;height:49px;background:#eee0d9;border-radius:16px;transform:rotate(-7deg);padding:3px}.eyebrow{font-size:9px;font-weight:800;letter-spacing:.17em;line-height:1.5}.brand .eyebrow{margin-bottom:3px}h1{font-size:29px;letter-spacing:-.055em;line-height:1.1}.header-actions{display:flex;align-items:center;gap:19px}.status-pill{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}.mode-dot{width:7px;height:7px;background:#c4a572;border-radius:50%;box-shadow:0 0 0 4px #eae0ce}.mode-dot.is-live{background:#6d9473;box-shadow:0 0 0 4px #dfe8d9}

.studio{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:23px;min-height:620px;height:calc(100svh - 144px);max-height:920px}.booth{display:flex;flex-direction:column;min-width:0;border:1px solid #aa91ab;border-radius:28px;overflow:hidden;background:#baa0be;box-shadow:0 8px 30px #59465c0b}.booth-marquee{display:flex;align-items:center;justify-content:center;gap:22px;padding:15px;background:#806989;color:#fff1d5;font-size:10px;letter-spacing:.22em;font-weight:750;border-bottom:4px solid #a38aa7}.marquee-spark{font-size:20px;color:#f1d498;line-height:1}.booth-body{position:relative;display:flex;flex:1;flex-direction:column;min-height:0;padding:23px 35px 0;background:#a48bab}.stage{position:relative;flex:1;min-height:0;overflow:hidden;border:7px solid #695573;border-radius:19px;background:#e8ded7;box-shadow:0 0 0 3px #d2b9c9,0 6px 0 #8a7195}.stage video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.stage canvas{display:block;width:100%;height:100%}.curtain{position:absolute;top:0;bottom:0;width:25px;background:repeating-linear-gradient(90deg,#8b7296 0 8px,#977da1 8px 18px);border-bottom:5px solid #80698a}.curtain-left{left:0;border-radius:0 0 16px 0}.curtain-right{right:0;border-radius:0 0 0 16px}.curtain:after{position:absolute;content:"";inset:42% 0 auto;height:13px;background:#e6c590;border-block:2px solid #c69d63;transform:rotate(-7deg)}.curtain-right:after{transform:rotate(7deg)}.booth-caption{display:flex;align-items:center;gap:7px;min-height:37px;color:#fff4df;font-size:10px;padding:0 3px}.caption-dot{width:5px;height:5px;background:#f2d89d;border-radius:50%}.caption-hint{margin-left:auto;color:#fff3dfbf}.viewfinder-corners{position:absolute;inset:17px;pointer-events:none;z-index:1}.viewfinder-corners i{position:absolute;width:24px;height:24px;border-color:#fff8e3aa;border-style:solid}.viewfinder-corners i:nth-child(1){left:0;top:0;border-width:2px 0 0 2px;border-radius:5px 0 0}.viewfinder-corners i:nth-child(2){right:0;top:0;border-width:2px 2px 0 0;border-radius:0 5px 0 0}.viewfinder-corners i:nth-child(3){left:0;bottom:0;border-width:0 0 2px 2px;border-radius:0 0 0 5px}.viewfinder-corners i:nth-child(4){right:0;bottom:0;border-width:0 2px 2px 0;border-radius:0 0 5px}.overlay{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:14px}.hidden{display:none!important}.overlay-panel{display:grid;justify-items:center;text-align:center;gap:11px;width:100%;max-width:480px}.welcome-art{width:min(380px,82%);height:auto;aspect-ratio:430/240;margin-bottom:-2px}.badge{font-size:8px;letter-spacing:.18em;font-weight:800;color:#8e738a}.overlay h2{font-size:clamp(26px,3vw,39px);letter-spacing:-.055em;line-height:1.05}.overlay-copy{font-size:12px;color:#80707c;line-height:1.6}.primary-button{margin-top:5px;padding:14px 24px;border:1px solid #665070;border-radius:14px;background:#776083;color:#fff8e9;box-shadow:0 4px 0 #594664;font-size:14px;font-weight:750}.primary-button:hover{background:#8b6c97}.privacy-note{font-size:9px;color:#857780;line-height:1.5;max-width:290px;margin-top:4px}.fallback-camera{width:100px;height:100px}.booth-console{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:18px 24px 21px;background:#f4dfc4;border-top:1px solid #e9ceae;box-shadow:inset 0 4px 0 #fae9d3}.console-note .eyebrow{font-size:8px;color:#9b826e}.console-note p{font-size:12px;font-weight:750;margin-top:5px}.action-row{display:flex;align-items:center;gap:8px}.action-button{display:flex;align-items:center;gap:7px;justify-content:center;min-height:43px;min-width:78px;border:1px solid #dbbfa5;border-radius:13px;background:#fff0da;box-shadow:0 3px 0 #d7b99e;padding:10px;font-size:11px;font-weight:750}.action-button>span:first-child{font-size:17px;line-height:1}.action-button.is-on{background:#d4deca;border-color:#a2b497;box-shadow:0 3px 0 #a7b39b;color:#48604b}.action-button.shuffle{background:#e9a48a;border-color:#cb8c74;box-shadow:0 3px 0 #bd806a;color:#653f3e}.action-button:hover:not(:disabled){filter:brightness(1.03)}.controls{display:flex;flex-direction:column;gap:20px;border:1px solid #e4d9d3;border-radius:27px;padding:23px 19px;background:var(--paper)}.toolkit-heading{display:flex;justify-content:space-between;align-items:center;gap:7px}.toolkit-heading .eyebrow{color:#9a8a93;font-size:8px;margin-bottom:5px}.toolkit-heading h2{font-size:22px;letter-spacing:-.05em}.toolkit-heading>span{font-size:32px;color:#b79ac0}.preset-strip{display:grid;grid-template-columns:1fr 1fr;gap:13px 11px}.preset-button{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;border:1px solid #e2d6d0;border-radius:10px;background:#fffdf7;padding:6px 6px 10px;box-shadow:0 3px 0 #e7ddd4;transform:rotate(-2deg)}.preset-button:nth-child(even){transform:rotate(2deg)}.effect-art{height:81px;overflow:hidden;border-radius:5px;margin-bottom:8px;background:#dfc9db}.effect-art svg{transition:transform .18s}.bubble-art{background:#c8dfe0}.eyes-art{background:#f2d5a0}.star-art{background:#7f6c95}.jelly-art{background:#d4e4cf}.confetti-art{background:#e6c3bc}.preset-button strong{font-size:10px;font-weight:750;white-space:nowrap}.preset-button:hover .effect-art svg{transform:scale(1.08) rotate(-3deg)}.preset-button.is-active{outline:2px solid #897291;outline-offset:2px;background:#f2e7ef;box-shadow:0 4px 0 #c4acc9}.selection-dot{display:none;position:absolute;right:10px;top:10px;width:7px;height:7px;background:#6c507c;border:2px solid #fff7df;border-radius:50%}.is-active .selection-dot{display:block}.dial-panel{display:grid;grid-template-columns:1fr;gap:7px;padding-top:17px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}.section-heading h3{font-size:11px}.section-heading>span{font-size:9px;color:var(--muted)}.dial-panel label{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700}.dial-panel output{font-size:10px;color:#988697;font-variant-numeric:tabular-nums;font-weight:500}input[type=range]{width:100%;height:14px;margin:0 0 3px;accent-color:#8d7298;cursor:pointer}#sparkleRange{accent-color:#ad955f}#colorRange{accent-color:#c58079}.tip{display:flex;align-items:center;gap:9px;font-size:10px;color:#887888;line-height:1.6;margin-top:auto}.tip>span{color:#b393ba;font-size:28px}.studio-footer{display:flex;justify-content:space-between;gap:15px;padding:13px 3px;font-size:10px;color:#94828b}.studio-footer>span{font-style:italic}.studio-footer>div{display:flex;gap:13px;align-items:center}#stopButton{border:0;border-bottom:1px solid #c5b4be;background:transparent;padding:0 0 2px;font-size:10px;color:#766079}.sparkle-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:3}.sparkle{position:absolute;width:12px;height:12px;background:var(--sparkle-color);clip-path:polygon(50% 0,63% 35%,100% 50%,63% 63%,50% 100%,35% 63%,0 50%,35% 35%);animation:sparklePop 780ms ease-out forwards}@keyframes sparklePop{0%{opacity:0;transform:scale(.2) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translateY(-40px) scale(1.5) rotate(60deg)}}
@media(min-width:1001px) and (max-height:790px){.game-shell .topbar{padding:15px 0}.studio{height:calc(100svh - 127px);min-height:584px}.controls{padding:18px;gap:15px}.effect-art{height:72px}.preset-strip{gap:11px}.dial-panel{gap:5px;padding-top:13px}.welcome-art{width:min(320px,78%)}.overlay-panel{gap:8px}.booth-console{padding:15px 18px 17px}.booth-body{padding-top:20px}}
@media(max-width:1150px){.game-shell{width:calc(100% - 34px)}.studio{grid-template-columns:minmax(0,1fr) 263px;gap:16px}.controls{padding:21px 16px}.console-note{display:none}.booth-console{justify-content:center}.booth-body{padding-inline:27px}.curtain{width:18px}.header-actions{gap:12px}.welcome-art{width:min(330px,80%)}.caption-hint{font-size:9px}}
@media(max-width:850px){.studio{display:flex;flex-direction:column;height:auto;max-height:none;min-height:0}.booth{min-height:620px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:20px}.toolkit-heading{grid-column:1/-1}.preset-strip{grid-column:1;grid-row:2/4}.dial-panel{grid-column:2;grid-row:2;padding-top:0;border-top:0;align-content:start}.tip{grid-column:2}.effect-art{height:80px}.status-pill{display:none}.booth-body{min-height:465px}.booth-console{justify-content:space-between}.console-note{display:block}.studio-footer{font-size:9px}}
@media(max-width:540px){.game-shell{width:calc(100% - 24px)}.game-shell .topbar{grid-template-columns:36px minmax(0,1fr) auto;gap:10px;padding:17px 0}.game-shell .topbar>.header-actions{grid-column:auto;justify-self:end}.game-shell .home-link{width:35px;height:35px}.brand-mark{display:none}h1{font-size:22px}.brand .eyebrow{font-size:8px}
.booth{border-radius:22px;min-height:530px}.booth-marquee{font-size:8px;gap:13px;padding:12px}.booth-body{padding:17px 18px 0;min-height:395px}.curtain{width:10px}.stage{border-width:5px;border-radius:14px}.booth-caption{font-size:9px;min-height:34px}.caption-hint{display:none}.console-note{display:none}.booth-console{justify-content:center;padding:14px 12px 18px}.action-row{width:100%;justify-content:center}.action-button{flex:1;font-size:10px;min-width:0}.controls{display:flex;padding:21px;border-radius:22px}.preset-strip{grid-template-columns:repeat(3,1fr);gap:13px 9px}.effect-art{height:76px}.preset-button strong{font-size:8px}.dial-panel{padding-top:18px;border-top:1px solid var(--line);gap:8px}.tip{margin:0}.overlay h2{font-size:27px}.overlay-copy{font-size:11px}.privacy-note{font-size:8px}.studio-footer{flex-direction:column;gap:7px;padding-block:14px}.viewfinder-corners{inset:11px}.fallback-camera{width:75px;height:75px}.booth-marquee .marquee-spark{font-size:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the camera invitation entirely inside the viewfinder on shorter laptops. */
.welcome-art{width:min(360px,82%);height:clamp(96px,calc(100svh - 680px),200px);aspect-ratio:auto}
@media(min-width:851px) and (max-height:790px){.overlay-panel{gap:7px}.overlay h2{font-size:30px}.primary-button{padding:12px 22px}.privacy-note{margin-top:2px}.welcome-art{height:105px}}
@media(min-width:851px){
  .studio{grid-template-rows:minmax(0,1fr)}
  .controls{min-height:0;padding:21px 19px;gap:18px}
  .dial-panel{grid-template-columns:62px minmax(0,1fr);column-gap:10px;row-gap:10px}
  .dial-panel .section-heading{grid-column:1/-1}
  .dial-panel label{grid-column:1;font-size:10px;gap:5px}
  .dial-panel input{grid-column:2;margin:0}
}
@media(min-width:851px) and (max-height:940px){
  .controls{padding:16px;gap:12px}
  .preset-strip{gap:9px 11px}
  .preset-button{padding:5px 5px 7px}
  .effect-art{height:clamp(42px,calc(40svh - 270px),81px);margin-bottom:5px}
  .dial-panel{grid-template-columns:62px minmax(0,1fr);column-gap:10px;row-gap:10px;padding-top:13px}
  .dial-panel .section-heading{grid-column:1/-1;margin-bottom:3px}
  .dial-panel label{grid-column:1;font-size:10px;gap:5px}
  .dial-panel input{grid-column:2;margin:0}
  .dial-panel output{font-size:9px}
  .tip{font-size:9px;line-height:1.4}
}