:root{--ink:#08040e;--panel:#15101f;--panel-2:#1d1529;--line:#3a294a;--muted:#a091b5;--text:#f9f3ff;--violet:#9d67ff;--green:#65ff98;--red:#ff4056;--phone-w:402px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(900px 640px at 78% -12%,#2c174c 0%,transparent 68%),#08050d;color:var(--text);font:14px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.45}.workspace{max-width:1500px;margin:auto;padding:26px 26px 34px}.workspace-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.studio-brand{display:flex;align-items:center;gap:11px}.studio-brand strong{display:block;font-size:18px;letter-spacing:-.03em}.studio-brand span:not(.studio-mark){display:block;color:#9f91b2;font-size:11px;margin-top:2px}.studio-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:linear-gradient(145deg,#ffdc78,#ff7a5a 45%,#9c59ff);color:#1a0a20;font-weight:900;box-shadow:0 6px 20px #c4618f45}.isolation-pill{border:1px solid #4b345f;background:#1b1128;color:#d2baf1;border-radius:999px;padding:7px 11px;font-size:11px}.work-grid{display:grid;grid-template-columns:minmax(340px,1fr) minmax(460px,.9fr);gap:24px;align-items:start}.config-panel,.preview-panel{border:1px solid var(--line);background:linear-gradient(145deg,#181222,#100c18);box-shadow:0 24px 70px #0008;border-radius:22px}.config-panel{overflow:hidden;min-height:calc(100vh - 112px)}.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:20px 21px;border-bottom:1px solid var(--line)}.panel-heading h1{font-size:17px;margin:0 0 4px;letter-spacing:-.02em}.panel-heading p{margin:0;color:var(--muted);font-size:11px}.collapse-btn,.small-btn{border:1px solid #57416e;background:#251736;color:#f5ecff;border-radius:9px;padding:8px 10px;font-size:11px;font-weight:760}.config-scroll{padding:18px 20px 22px;max-height:calc(100vh - 194px);overflow:auto}.config-panel.collapsed{min-height:auto}.config-panel.collapsed .config-scroll{display:none}.lock-banner{display:flex;align-items:center;gap:9px;padding:11px 12px;border-radius:11px;border:1px solid #493b57;background:#20152b;color:#cebddd;font-size:11px;line-height:1.4;margin-bottom:16px}.lock-banner b{color:#ffd07c}.lock-dot{font-size:9px;color:#ffba5a}.config-section{border-top:1px solid #2b2037;padding-top:17px;margin-top:17px}.config-section:first-of-type{border-top:0;padding-top:0;margin-top:0}.config-section h2{font-size:13px;margin:0;color:#efe5fa;letter-spacing:-.01em}.hint{font-size:10px;color:#9887a7;line-height:1.45;margin:7px 0 10px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:11px}.field{display:block;position:relative}.field>span{display:block;font-size:10px;color:#b8a9c5;margin-bottom:5px}.field input,.field select,.pin-actions input{width:100%;border:1px solid #49365a;border-radius:9px;background:#0d0914;color:#fff4ff;padding:9px 10px;outline:0}.field input:focus,.field select:focus,.pin-actions input:focus{border-color:#b47aff;box-shadow:0 0 0 3px #9e62ff1f}.field input[type=range]{padding:0;accent-color:#bb76ff;margin-top:8px}.field output{position:absolute;right:8px;top:26px;color:#cda6fa;font-size:10px}.upload-tile{display:flex;align-items:center;gap:10px;margin-top:10px;padding:10px;border-radius:10px;border:1px dashed #674b7e;background:#110d19;color:#d8cce1;cursor:pointer}.upload-tile.full{width:100%}.upload-tile input{display:none}.upload-tile small{display:block;color:#897a99;font-size:9px;margin-top:3px}.upload-icon{display:grid;place-items:center;width:29px;height:29px;border-radius:8px;background:#291c39;color:#d3a1ff;font-size:17px}.section-row{display:flex;justify-content:space-between;align-items:center}.small-btn{padding:7px 9px;background:#241536}.small-btn:hover,.collapse-btn:hover{border-color:#a77cff;background:#2d1a44}.sku-row{display:grid;grid-template-columns:48px 1fr auto;gap:9px;align-items:center;margin-top:10px;padding:9px;border:1px solid #362744;background:#120d1a;border-radius:11px}.sku-thumb{width:48px;height:62px;object-fit:contain;border-radius:6px;border:1px solid #59446b;background:#07050a}.sku-fields{display:grid;grid-template-columns:1fr 1fr;gap:6px}.sku-fields input{width:100%;min-width:0;background:#0b0810;border:1px solid #3c2d4a;color:#fff;padding:7px 8px;border-radius:7px;font-size:10px}.sku-actions{display:flex;gap:4px;align-self:start}.icon-btn{width:25px;height:25px;border:1px solid #4d3758;background:#21152c;color:#e3c6f9;border-radius:7px}.icon-btn.danger{color:#ff94a0}.compact{margin-top:12px}.sound-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.sound-tile{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 9px;background:#120d1a;border:1px solid #342540;border-radius:8px;font-size:10px;color:#d4c4df}.sound-tile input{display:none}.sound-tile label{cursor:pointer;color:#bb91df}.sound-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pin-actions{display:grid;grid-template-columns:1fr auto auto;gap:7px;margin-top:10px}.config-actions{display:flex;align-items:center;gap:8px;margin-top:19px;padding-top:17px;border-top:1px solid #2b2037}.action-btn{border:1px solid #5d4670;background:#25183a;color:#f7efff;border-radius:10px;padding:10px 12px;font-weight:800;font-size:11px}.action-btn.primary{border:0;background:linear-gradient(135deg,#cd78ff,#6c5cff);box-shadow:0 8px 22px #a75eff33}.action-btn.active{background:linear-gradient(135deg,#70e79b,#3eae78);color:#0e291b}.save-state{font-size:10px;color:#72d596}.preview-panel{padding:16px;display:flex;flex-direction:column;align-items:center;position:sticky;top:14px}.preview-heading{width:100%;display:flex;justify-content:space-between;align-items:center;color:#b6a6c7;font-size:11px;margin-bottom:12px}.live-status{color:#79e49d;font-size:10px;letter-spacing:.1em}.live-status i{display:inline-block;width:7px;height:7px;background:#62ef91;border-radius:50%;box-shadow:0 0 0 4px #62ef9120;margin-right:5px}.phone-frame{height:min(82vh,844px);aspect-ratio:402 / 844;width:auto;padding:8px;border-radius:43px;background:#030208;box-shadow:0 28px 65px #000b,0 0 0 1px #5b4a68;flex:none}.phone-screen{width:100%;height:100%;border-radius:35px;overflow:hidden;background:#05020c;position:relative}.preview-note{font-size:10px;color:#897a9a;margin-top:11px}.stage{position:absolute;inset:0;overflow:hidden;isolation:isolate;background:radial-gradient(ellipse at 50% 42%,#351660 0%,#160922 29%,#090310 66%,#030107 100%);transition:background .5s}.stage.has-bg{background-image:linear-gradient(#05010a99,#05010acc),var(--stage-bg),radial-gradient(ellipse at 50% 42%,#351660 0%,#160922 29%,#090310 66%,#030107 100%);background-size:cover;background-position:center}.stage:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#fff 0 1px,transparent 1.3px),radial-gradient(#a5ffc2 0 1px,transparent 1.5px),radial-gradient(#f0bfff 0 .8px,transparent 1.25px);background-size:71px 93px,107px 129px,43px 57px;background-position:4px 10px,29px 46px,15px 33px;opacity:.48;animation:starDrift 18s linear infinite;pointer-events:none}.stage:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#8f3cff40 0%,transparent 41%),linear-gradient(180deg,#02010a55 0%,transparent 25%,#02010780 100%);z-index:-1}.hud{position:absolute;z-index:50;left:0;right:0;top:0;height:60px;padding:12px 14px;display:flex;align-items:center;justify-content:space-between}.hud-back{width:28px;height:28px;border:1px solid #b497cd55;border-radius:50%;background:#130b1dbb;color:#fff;font-size:20px;line-height:1}.hapa-brand{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:5px;align-items:center;color:#fff;font-size:10px;font-weight:900;letter-spacing:-.03em}.hapa-brand img{width:34px;height:24px;object-fit:contain;filter:drop-shadow(0 2px 5px #000)}.balance{display:flex;align-items:center;gap:4px;padding:5px 8px 5px 5px;border:1px solid #b795d474;border-radius:999px;background:#120b1acc;color:#f4ebff;font-size:9px}.balance .coin{display:grid;place-items:center;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#ffe29b,#d98a35);color:#6f3b08;font-weight:900}.balance .add{color:#d6b0ff;font-size:14px;line-height:9px}.scene-title{position:absolute;z-index:5;left:0;right:0;top:79px;text-align:center;text-transform:uppercase;letter-spacing:.22em}.scene-title small{display:block;color:#c6b0df;font-size:8px;margin-bottom:7px}.scene-title strong{font-size:17px;text-shadow:0 0 19px #a363ff88}.scene-title p{font-size:9px;letter-spacing:.09em;color:#9f8fac;margin:8px 0}.ground-glow{position:absolute;z-index:0;left:50%;bottom:9%;width:290px;height:124px;transform:translateX(-50%);background:radial-gradient(ellipse,#5bff9568 0%,#9d4aff25 35%,transparent 69%);filter:blur(13px);opacity:.55}.energy-ring{position:absolute;z-index:1;left:50%;top:49%;width:310px;height:310px;transform:translate(-50%,-50%) rotateX(67deg);border:2px solid #78ffac66;border-radius:50%;box-shadow:0 0 26px #5ffb9677,inset 0 0 28px #ae5cff33;opacity:0}.energy-ring.r2{width:250px;height:250px;border-color:#c476ff5c;transform:translate(-50%,-50%) rotateX(67deg) rotateZ(20deg)}.phase-entrance .energy-ring,.phase-hover .energy-ring,.phase-burst .energy-ring{opacity:.8;animation:ringPulse 2.4s ease-in-out infinite}.phase-burst .energy-ring{animation:ringBurst .72s ease-out both}.energy-beam{position:absolute;z-index:3;left:50%;top:47%;width:140%;height:2px;transform:translate(-50%,-50%) rotate(-12deg) scaleX(0);background:linear-gradient(90deg,transparent,#dcfff0,#78ff9c,white,#dcfff0,transparent);box-shadow:0 0 10px #6cff9c,0 0 25px #73ffab;opacity:0}.phase-burst .energy-beam{animation:beamBurst .82s cubic-bezier(.2,.82,.2,1) both}.pumpkin-wrap{position:absolute;z-index:8;left:50%;top:49%;width:240px;height:194px;transform:translate(-50%,-50%);transform-style:preserve-3d;opacity:0;filter:drop-shadow(0 22px 20px #000a)}.pumpkin-wrap img{width:100%;height:100%;object-fit:contain;display:block}.pumpkin-wrap .pumpkin-aura{position:absolute;inset:-34px;background:radial-gradient(ellipse,#73ff9a88 0%,#51d97738 30%,transparent 69%);filter:blur(17px);z-index:-1;opacity:.65}.pumpkin-wrap .pumpkin-rim{position:absolute;inset:5% 3%;border:1px solid #b3ffc274;border-radius:48%;box-shadow:0 0 14px #6affad66,inset 0 0 20px #85ffb04d;opacity:.6}.phase-entrance .pumpkin-wrap{animation:pumpkinEnter 1.35s cubic-bezier(.12,.82,.18,1) forwards}.phase-hover .pumpkin-wrap,.phase-burst .pumpkin-wrap{opacity:1;animation:pumpkinFloat 2.7s cubic-bezier(.37,.1,.25,1) infinite}.phase-burst .pumpkin-wrap{animation:pumpkinBurst .88s cubic-bezier(.12,.74,.23,1) both}.phase-entrance .pumpkin-wrap .pumpkin-aura,.phase-hover .pumpkin-wrap .pumpkin-aura{animation:auraBreathe 1.6s ease-in-out infinite}.phase-burst .pumpkin-wrap .pumpkin-aura{animation:auraBurst .8s ease-out both}.phase-result .pumpkin-wrap,.phase-sold .pumpkin-wrap{opacity:0;transform:translate(-50%,-50%) scale(.62);transition:opacity .35s,transform .5s}.spark-field{position:absolute;z-index:4;inset:18% 6% 18%;opacity:0;background-image:radial-gradient(circle,#eafff0 0 1px,transparent 1.7px),radial-gradient(circle,#8bffb0 0 1px,transparent 1.8px);background-size:41px 53px,73px 67px;background-position:10px 3px,22px 21px}.phase-entrance .spark-field,.phase-hover .spark-field,.phase-burst .spark-field{opacity:.6;animation:sparkDrift 2.4s linear infinite}.phase-burst .spark-field{animation:sparkBurst .75s ease-out both}.pull-cta{position:absolute;z-index:22;left:50%;bottom:9%;transform:translateX(-50%);border:1px solid #bfffce77;background:linear-gradient(135deg,#4bde83,#2c6e57);color:#effff4;border-radius:999px;padding:12px 22px;letter-spacing:.12em;text-transform:uppercase;font-size:10px;font-weight:900;box-shadow:0 0 22px #51ff9780,0 11px 20px #0008}.pull-cta:hover{filter:brightness(1.15)}.phase-entrance .pull-cta,.phase-hover .pull-cta,.phase-burst .pull-cta{opacity:0;pointer-events:none;transition:.2s}.hint-copy{position:absolute;z-index:4;bottom:17%;left:0;right:0;text-align:center;color:#cdb9dd;font-size:9px;letter-spacing:.14em;text-transform:uppercase}.phase-entrance .hint-copy,.phase-hover .hint-copy,.phase-burst .hint-copy{opacity:0}.result-layer{position:absolute;z-index:30;inset:0;opacity:0;pointer-events:none;background:linear-gradient(#08020c11,#08020cbb 58%,#08020ce8);transform:translateY(14px)}.phase-result .result-layer,.phase-sold .result-layer{opacity:1;transform:none;pointer-events:auto;transition:opacity .4s,transform .4s}.result-heading{position:absolute;top:79px;left:0;right:0;text-align:center;color:#eafde9;text-transform:uppercase;letter-spacing:.2em;font-size:10px}.result-heading strong{display:block;color:#d9ffdf;font-size:20px;letter-spacing:.04em;margin-top:7px;text-shadow:0 0 18px #8bff9a77}.result-card{position:absolute;left:50%;top:43%;width:188px;height:264px;transform:translate(-50%,-50%) scale(.72) rotate(-4deg);border-radius:12px;border:3px solid #f4fff6;overflow:hidden;background:#eaf5ef;box-shadow:0 0 0 1px #71ff9b,0 0 32px #59ff9780,0 18px 30px #000b;opacity:0}.result-card img{width:100%;height:100%;object-fit:contain;display:block}.phase-result .result-card,.phase-sold .result-card{animation:cardReveal .74s cubic-bezier(.13,.82,.2,1) .12s forwards}.result-copy{position:absolute;left:0;right:0;top:62%;text-align:center;opacity:0}.phase-result .result-copy,.phase-sold .result-copy{animation:copyRise .42s ease-out .5s forwards}.result-copy b{display:block;font-size:17px;color:#f4fff4}.result-copy span{display:block;font-size:11px;color:#cae7d0;margin-top:4px}.result-price{display:block!important;font-size:23px!important;font-weight:900;color:#b2ffca!important;text-shadow:0 0 16px #62ff9680;margin-top:7px}.result-actions{position:absolute;left:16px;right:16px;bottom:20px;display:flex;gap:8px}.result-actions button{flex:1;border:1px solid #88c89b;border-radius:10px;padding:11px 5px;background:#16251e;color:#eaffee;font-size:11px;font-weight:900}.result-actions .sell-btn{border:0;background:linear-gradient(135deg,#e9fff1,#8bffb5);color:#092314;box-shadow:0 6px 16px #68ff9b55}.result-actions .replay-btn{background:#191025;border-color:#76528c;color:#eedfff}.result-back,.sound-toggle{position:absolute;z-index:51;top:72px;border:1px solid #9d7db255;background:#170e21cc;color:#f8efff;border-radius:50%;width:30px;height:30px}.result-back{left:14px;font-size:19px}.sound-toggle{right:14px;font-size:13px}.sold-stamp{position:absolute;z-index:60;left:50%;top:43%;transform:translate(-50%,-50%) scale(3.5) rotate(-13deg);opacity:0;color:#fff;pointer-events:none;font-size:39px;font-weight:1000;letter-spacing:.06em;font-style:italic;padding:6px 13px;border:5px solid #ff314d;border-radius:8px;text-shadow:2px 3px 0 #7a071c,0 0 9px #fff5;box-shadow:0 0 0 3px #ff314d55,0 0 22px #ff294d,0 0 40px #ff294d66,inset 0 0 0 2px #ff9aab;mix-blend-mode:screen}.sold-stamp:after{content:"";position:absolute;inset:-18px -30px;z-index:-1;background:radial-gradient(ellipse,#ff365355,transparent 66%);filter:blur(13px)}.phase-sold .sold-stamp{animation:soldImpact .68s cubic-bezier(.1,.84,.2,1) .06s forwards}.sold-caption{position:absolute;left:0;right:0;bottom:16%;text-align:center;color:#ff8c9b;font-size:9px;letter-spacing:.28em;text-transform:uppercase;opacity:0}.phase-sold .sold-caption{animation:copyRise .3s ease-out .46s forwards}.toast{position:fixed;z-index:100;left:50%;bottom:22px;transform:translate(-50%,18px);opacity:0;pointer-events:none;background:#f1fff5;color:#123d24;border-radius:9px;padding:9px 13px;font-size:11px;font-weight:800;transition:.25s}.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes starDrift{to{background-position:74px 122px,-56px 165px,58px -43px}}@keyframes ringPulse{0%,100%{transform:translate(-50%,-50%) rotateX(67deg) scale(.91);opacity:.35}50%{transform:translate(-50%,-50%) rotateX(67deg) scale(1.08);opacity:.9}}@keyframes ringBurst{0%{transform:translate(-50%,-50%) rotateX(67deg) scale(.9);opacity:1}100%{transform:translate(-50%,-50%) rotateX(67deg) scale(1.8);opacity:0}}@keyframes beamBurst{0%{transform:translate(-50%,-50%) rotate(-12deg) scaleX(0);opacity:0}24%{opacity:1}100%{transform:translate(-50%,-50%) rotate(-12deg) scaleX(1.15);opacity:0}}@keyframes pumpkinEnter{0%{opacity:0;transform:translate(-50%,-92%) translateZ(-220px) rotateX(-32deg) rotateY(-28deg) rotateZ(-16deg) scale(.25)}52%{opacity:1;transform:translate(-50%,-40%) translateZ(85px) rotateX(11deg) rotateY(19deg) rotateZ(7deg) scale(1.15)}77%{transform:translate(-50%,-53%) translateZ(0) rotateX(-4deg) rotateY(-10deg) rotateZ(-3deg) scale(.96)}100%{opacity:1;transform:translate(-50%,-50%) translateZ(20px) rotateX(0) rotateY(0) rotateZ(0) scale(1)}}@keyframes pumpkinFloat{0%,100%{transform:translate(-50%,-50%) translate3d(-4px,2px,18px) rotateX(3deg) rotateY(-8deg) rotateZ(-2deg) scale(1)}25%{transform:translate(-50%,-50%) translate3d(5px,-9px,38px) rotateX(-5deg) rotateY(10deg) rotateZ(2deg) scale(1.025)}52%{transform:translate(-50%,-50%) translate3d(-6px,-15px,28px) rotateX(2deg) rotateY(-7deg) rotateZ(-1deg) scale(1.04)}78%{transform:translate(-50%,-50%) translate3d(4px,-5px,12px) rotateX(-3deg) rotateY(9deg) rotateZ(2deg) scale(1.01)}}@keyframes pumpkinBurst{0%{opacity:1;transform:translate(-50%,-50%) translateZ(20px) scale(1)}37%{transform:translate(-50%,-50%) translateZ(110px) scale(1.18) rotateY(10deg)}100%{opacity:0;transform:translate(-50%,-50%) translateZ(320px) scale(1.48) rotateY(-14deg)}}@keyframes auraBreathe{50%{transform:scale(1.16);opacity:.95}}@keyframes auraBurst{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}@keyframes sparkDrift{to{background-position:61px 88px,-37px 105px}}@keyframes sparkBurst{0%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.5)}}@keyframes cardReveal{0%{opacity:0;transform:translate(-50%,-44%) scale(.48) rotate(-12deg)}55%{opacity:1;transform:translate(-50%,-50%) scale(1.05) rotate(3deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)}}@keyframes copyRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes soldImpact{0%{opacity:0;transform:translate(-50%,-50%) scale(3.4) rotate(-13deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(.78) rotate(-13deg)}38%{transform:translate(-50%,-50%) scale(1.12) rotate(-13deg)}59%{transform:translate(-50%,-50%) scale(.96) rotate(-13deg)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(-13deg)}}
@media (max-width:900px){.workspace{padding:14px}.workspace-top{margin-bottom:14px}.work-grid{grid-template-columns:1fr}.config-panel{order:2;min-height:auto}.config-scroll{max-height:none}.preview-panel{order:1;position:relative;top:auto}.phone-frame{height:min(78vh,844px)}}@media (max-width:520px){.workspace{padding:10px}.workspace-top{align-items:flex-start}.isolation-pill{display:none}.preview-panel{border-radius:17px;padding:10px}.phone-frame{height:calc(100vh - 112px);max-height:760px;border-radius:34px}.phone-screen{border-radius:28px}.field-grid{grid-template-columns:1fr}.sound-grid{grid-template-columns:1fr}.sku-fields{grid-template-columns:1fr}.config-scroll{padding:15px}.panel-heading{padding:16px}.preview-note{display:none}}

/* Keep the stage fully visible in a short desktop workbench viewport. */
.phone-frame{height:min(calc(100vh - 190px),844px);min-height:0}
.sold-stamp{color:#ff304f;background:#ff304f14;text-shadow:2px 3px 0 #7a071c,0 0 9px #ff7180;mix-blend-mode:normal}
@media (max-width:520px){.phone-frame{height:calc(100vh - 112px);max-height:760px}}