@font-face{font-family:StudioDisplay;src:url('/fonts/black-han-sans.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
/* Sound, motion and the companion are part of each theme, not the generated app. */
.workspace{--entry-motion:message-soft;--companion-motion:companion-float;--scene-color:#56867d;--scene-paper:#f8fffd;--scene-stroke:#538074}
.studio-atmosphere{display:flex;align-items:center;flex:none;gap:5px;min-height:37px;padding:3px 12px;border-bottom:1px solid var(--hair);background:#ffffff66;white-space:nowrap}
.studio-atmosphere button{border:0;background:transparent;min-height:27px;padding:3px 5px;gap:4px;font-size:.69rem;font-weight:500;color:var(--muted)}
.studio-atmosphere button[aria-pressed=true]{color:var(--ink);background:var(--wash)}
.studio-atmosphere [data-audio=music]{font-weight:650}.track-name{font-size:.62rem;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;flex:1}.volume-control{display:flex;align-items:center;flex:0 1 45px;min-width:30px;margin:0}.volume-control input{width:100%;height:18px;padding:0;accent-color:var(--accent);cursor:pointer}
.music-bars{display:flex;align-items:center;justify-content:center;gap:2px;width:14px;height:16px}.music-bars i{display:block;width:2px;height:4px;border-radius:2px;background:currentColor}.music-bars i:nth-child(2){height:10px}.music-bars i:nth-child(3){height:7px}
[data-music=playing] .music-bars i{animation:music-level 1.2s ease-in-out infinite alternate}[data-music=playing] .music-bars i:nth-child(2){animation-delay:-.4s}[data-music=playing] .music-bars i:nth-child(3){animation-delay:-.8s}
.helper-tag{margin-left:7px;padding-left:7px;border-left:1px solid var(--hair);font-size:.64rem;color:var(--muted)}
.welcome-bubble{position:relative;padding:17px 16px 15px}.welcome-mark{display:block;color:var(--scene-stroke);font:400 1.6rem/1 Georgia,serif;margin-bottom:9px}.welcome-bubble>b{display:block;font-size:1.08rem;line-height:1.45;letter-spacing:-.025em}.welcome-bubble p{margin-top:8px;font-size:.85rem;line-height:1.7;color:var(--muted)}
.making-status{display:flex;align-items:center;gap:9px;min-height:30px;font-size:.85rem}.making-status small{display:block;color:var(--muted);margin-top:2px;font-size:.73rem}.bubble:has(.making-status){border-color:var(--scene-stroke)}.bubble .cancel-request{border:0;background:none;padding:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;font-size:.7rem}
.thinking-dots{display:flex;gap:3px;flex:none}.thinking-dots i{width:5px;height:5px;border-radius:50%;background:var(--scene-stroke);animation:thinking 1.3s ease-in-out infinite}.thinking-dots i:nth-child(2){animation-delay:.15s}.thinking-dots i:nth-child(3){animation-delay:.3s}
.assistant:is([data-state=wait],[data-state=run])>.avatar{animation:helper-attention 2.2s ease-in-out infinite}
.message-arrive .bubble{animation:var(--entry-motion) .38s ease-out both}
.turn-error{padding-top:7px;color:#9c3a29}.bubble .result-link{display:flex;align-items:center;gap:10px;width:100%;margin:12px 0 2px;padding:12px;background:var(--wash);border:1px solid var(--scene-stroke);border-radius:11px;text-align:left;color:var(--ink)}
.result-link>span:nth-child(2){flex:1;min-width:0}.result-link strong,.result-link small,.result-link em{display:block}.result-link strong{font-size:.89rem;line-height:1.4;overflow-wrap:anywhere}.result-link small{font:650 .57rem/1.4 system-ui;letter-spacing:.09em;margin-bottom:4px;color:var(--muted)}.result-link em{font-size:.7rem;font-style:normal;font-weight:500;margin-top:5px;color:var(--muted)}.result-link>.icon{width:13px;transform:rotate(-90deg);flex:none}.result-icon{display:grid;place-items:center;width:31px;height:37px;border:1px solid var(--hair);background:#ffffff9c;border-radius:6px;flex:none}.result-icon .icon{width:18px;height:18px}
.result-link[aria-pressed=true]{box-shadow:inset 3px 0 var(--scene-stroke)}.result-link:hover{filter:brightness(.97);transform:translateY(-1px)}
.preview{position:relative}.empty-canvas{overflow:hidden;padding:22px;gap:0}.empty-canvas h3{font-size:clamp(1.15rem,2vw,1.65rem);font-weight:650;letter-spacing:-.045em;margin:18px 0 9px}.empty-canvas>p{max-width:310px;line-height:1.7}.empty-canvas::before{background-size:19px 19px;inset:8%;opacity:.45}
.studio-scene{position:relative;width:290px;height:250px;max-width:100%;flex:none;color:var(--scene-stroke)}
.scene-ring{position:absolute;inset:24px 27px 30px;border:1px solid color-mix(in srgb,var(--scene-stroke) 23%,transparent);border-radius:50%;background:radial-gradient(ellipse at 50% 40%,#fff7,transparent 70%)}
.scene-ring::before,.scene-ring::after{content:'';position:absolute;border:1px solid color-mix(in srgb,var(--scene-stroke) 13%,transparent);border-radius:inherit;inset:-16px}.scene-ring::after{inset:16px}
.scene-companion{position:absolute;left:calc(50% - 56px);top:63px;width:112px;height:108px;z-index:1;animation:var(--companion-motion) 5s ease-in-out infinite}
.companion-face{position:absolute;inset:0;border:2px solid var(--scene-stroke);border-radius:34px;background:linear-gradient(140deg,#fff,var(--scene-paper));box-shadow:inset 0 -9px 0 #00000006,0 8px 20px #193a2d0c;transform:rotate(-5deg)}
.companion-face:after{content:'';position:absolute;bottom:25px;left:calc(50% - 8px);width:16px;height:7px;border:2px solid var(--scene-stroke);border-top:0;border-radius:0 0 20px 20px}
.companion-face .agent-avatar{position:absolute;right:6px;top:6px;width:24px;height:24px;border:0;background:transparent;color:var(--scene-stroke);opacity:.8}.companion-face .agent-avatar>.icon{width:19px;height:19px}
.companion-face:has(img) .agent-avatar{inset:8px;width:calc(100% - 16px);height:calc(100% - 16px);opacity:1;border-radius:18px}.companion-face:has(img) .agent-avatar img{max-width:100%;width:100%;height:100%;object-fit:contain}.companion-face:has(img) .companion-eyes,.companion-face:has(img):after{display:none}
.companion-eyes{position:absolute;left:30px;right:30px;top:39px;display:flex;justify-content:space-between;animation:companion-blink 6s infinite}.companion-eyes i{width:8px;height:12px;border-radius:5px;background:var(--scene-stroke)}
.companion-aerial{position:absolute;width:2px;height:22px;left:53px;top:-18px;background:var(--scene-stroke);transform:rotate(-10deg)}.companion-aerial:before{content:'';position:absolute;width:9px;height:9px;left:-4px;top:-6px;border:2px solid var(--scene-stroke);border-radius:50%;background:var(--scene-paper)}
.companion-hand{position:absolute;top:55px;left:-16px;width:14px;height:29px;background:var(--scene-paper);border:2px solid var(--scene-stroke);border-radius:8px;transform:rotate(22deg)}.companion-hand.hand-right{left:auto;right:-16px;top:34px;transform:rotate(-28deg);transform-origin:bottom;animation:companion-wave 5s ease-in-out infinite}
.scene-shadow{position:absolute;left:calc(50% - 51px);top:190px;width:102px;height:10px;background:color-mix(in srgb,var(--scene-stroke) 12%,transparent);border-radius:50%;filter:blur(2px)}
.scene-orbit{position:absolute;font:400 28px/1 Georgia,serif;opacity:.7}.orbit-one{left:34px;top:60px;animation:orbit-drift 6s ease-in-out infinite}.orbit-two{right:30px;top:120px;font-size:19px;animation:orbit-drift 7s ease-in-out -3s infinite}.orbit-three{right:58px;top:38px;font-size:36px}
.scene-stamp{position:absolute;bottom:5px;left:50%;transform:translateX(-50%) rotate(-3deg);white-space:nowrap;padding:5px 13px;border:1px solid var(--hair);background:#ffffffbf;border-radius:20px;font-size:.72rem;letter-spacing:.025em;box-shadow:0 3px 8px #233c3105}
.scene-steps{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:27px;font-size:.64rem;letter-spacing:.01em;color:var(--muted)}.scene-steps i{display:block;width:22px;height:1px;background:var(--hair)}
[data-scene-state=building] .companion-hand{animation:companion-work .8s ease-in-out infinite alternate}[data-scene-state=building] .companion-face{box-shadow:inset 0 -9px 0 #00000006,0 0 0 7px color-mix(in srgb,var(--scene-stroke) 8%,transparent)}
.studio-celebration{position:absolute;pointer-events:none;z-index:3;left:50%;top:45%;width:0;height:0;color:var(--scene-stroke)}.studio-celebration i{position:absolute;font:400 22px Georgia;opacity:0;animation:celebrate 1.65s ease-out both;animation-delay:calc(var(--n)*.012s)}
/* Coding Gallery: lively, substantial ink outlines, title lettering and 8-bit sound. */
[data-theme=arcade] .workspace{--scene-stroke:#29223f;--scene-paper:#ffdc5d;--entry-motion:message-pop;--companion-motion:companion-hop}
:is([data-theme=arcade],[data-theme=festival]) :is(.welcome-bubble>b,.empty-canvas h3,.gate h1,.pane-title h1,.pane-title h2){font-family:StudioDisplay,'Malgun Gothic',sans-serif;font-weight:400;letter-spacing:0;line-height:1.45}
:is([data-theme=arcade],[data-theme=festival]) .pane-title h1{font-size:1.15rem}
:is([data-theme=arcade],[data-theme=festival]) .bubble{border:2px solid #292438;box-shadow:3px 3px 0 #292438;border-radius:5px 15px 15px 15px;padding:12px 14px}
:is([data-theme=arcade],[data-theme=festival]) .mine .bubble{border-radius:15px 5px 15px 15px;background:#ffe786}
:is([data-theme=arcade],[data-theme=festival]) .avatar{border:2px solid #292438;box-shadow:1px 2px #292438;background:#fff2a3;border-radius:9px}
:is([data-theme=arcade],[data-theme=festival]) .result-link{border:2px solid #292438;box-shadow:2px 2px #292438;background:#c5f0d1;border-radius:8px}
:is([data-theme=arcade],[data-theme=festival]) .write-row{border:2px solid #292438;box-shadow:2px 3px #292438}
[data-theme=arcade] .companion-face{border-width:3px;border-radius:22px;background:#ffdc5d;box-shadow:5px 6px 0 #292438}
[data-theme=arcade] .companion-hand{border-width:3px;border-radius:5px;background:#faf8ff}
[data-theme=arcade] .scene-stamp{border:2px solid #292438;border-radius:5px;box-shadow:3px 3px #292438;background:#fff8d4;font-weight:700}
[data-theme=arcade] .scene-ring{border:2px dashed #7187cf;background:#dce7ff88;transform:rotate(-15deg);border-radius:36px}
[data-theme=arcade] .thinking-dots i{border-radius:1px;background:#5367d9}
[data-theme=arcade] .studio-celebration i:nth-child(3n){color:#e89400}[data-theme=arcade] .studio-celebration i:nth-child(3n + 1){color:#5d6edc}
/* Question Festival: friendly bunting, springy replies and a little parade. */
[data-theme=festival] .workspace{--scene-stroke:#354727;--scene-paper:#e8f6af;--entry-motion:message-pop;--companion-motion:companion-sway}
[data-theme=festival] .canvas:has(.empty-canvas){background-image:var(--flags),linear-gradient(#feffed,#f2f7d9);background-repeat:repeat-x,no-repeat;background-size:168px 14px,100% 100%}
[data-theme=festival] .companion-face{border-width:3px;border-radius:44% 44% 38% 38%;background:#e4f69c;box-shadow:4px 5px #354727}
[data-theme=festival] .scene-ring{background:#ffea9777;border:2px dashed #aac267}.scene-orbit{user-select:none}[data-theme=festival] .orbit-one{color:#cd4c70;font-size:40px;transform:rotate(-15deg)}[data-theme=festival] .orbit-two{color:#466ed4;font-size:34px}
[data-theme=festival] .scene-stamp{background:#fff0a3;border:2px solid #354727;border-radius:8px;box-shadow:3px 3px #354727}
[data-theme=festival] .thinking-dots i:nth-child(1){background:#d05f79}[data-theme=festival] .thinking-dots i:nth-child(2){background:#617ed3}[data-theme=festival] .thinking-dots i:nth-child(3){background:#798e27}
[data-theme=festival] .studio-celebration i{background:#f3d474;width:9px;height:16px;font-size:0;border-radius:2px}[data-theme=festival] .studio-celebration i:nth-child(3n){background:#e27596}[data-theme=festival] .studio-celebration i:nth-child(3n + 1){background:#7496dc}
/* Paper: a sketchbook companion, a folded result card, and soft pencil rhythm. */
[data-theme=paper] .workspace{--scene-stroke:#916747;--scene-paper:#fff6e1;--entry-motion:message-paper;--companion-motion:companion-sway}
[data-theme=paper] .bubble{border-radius:3px 12px 5px 7px;background:#fffdf5;box-shadow:2px 3px 0 #ae987b26;border-color:#bda88b}.mine .bubble{transition:background-color .15s}
[data-theme=paper] .mine .bubble{background:#eee0c6}[data-theme=paper] .welcome-mark{font-size:2rem}.welcome-mark{line-height:1}
[data-theme=paper] .result-link{border-radius:2px;background:linear-gradient(135deg,#fff8e9 calc(100% - 15px),#d8c4a5 0);border-style:dashed}
[data-theme=paper] .scene-ring{border-radius:3px;border-color:#c9b99c;transform:rotate(8deg);background:repeating-linear-gradient(#fff9eb 0 19px,#e2d4ba 20px)}
[data-theme=paper] .companion-face{border-radius:12px 23px 10px 16px;background:#fff7e7;box-shadow:3px 5px #c3ad8d}
[data-theme=paper] .scene-stamp{border:1px dashed #916747;border-radius:1px;background:#fff2d5;transform:translateX(-50%) rotate(-6deg)}
[data-theme=paper] .companion-aerial:before{border-radius:1px;transform:rotate(45deg);background:#db9361}
/* Orbit: quiet light, long orbits and radio-like reply pulses. */
[data-theme=orbit] .workspace{--scene-stroke:#7964ac;--scene-paper:#ece6ff;--entry-motion:message-signal;--companion-motion:companion-float}
[data-theme=orbit] .bubble{border-radius:16px;border-color:#c5bbdc;box-shadow:0 3px 14px #5344780c}[data-theme=orbit] .mine .bubble{background:#e4dcef}
[data-theme=orbit] .canvas:has(.empty-canvas){background:radial-gradient(circle at 20% 30%,#c7bce044 1px,transparent 2px) 0 0/33px 37px,linear-gradient(155deg,#f6f2ff,#e6e0f6)}
[data-theme=orbit] .scene-ring{border:1px solid #a999c8;transform:rotate(-28deg) scaleY(.58);background:none}.scene-ring{transition:background .3s}
[data-theme=orbit] .companion-face{border-radius:48%;border:7px solid #c9bbeb;outline:1px solid #8d79b7;background:#403652;box-shadow:0 0 24px #beaceb55}
[data-theme=orbit] .companion-eyes i{background:#e4d5ff;box-shadow:0 0 6px #dfbcff}.companion-eyes{transform-origin:center}
[data-theme=orbit] .companion-face:after{border-color:#c5b4e2}[data-theme=orbit] .companion-face .agent-avatar{color:#d0c1f0;top:0;right:2px}
[data-theme=orbit] .scene-stamp{border-color:#b2a3cd;background:#f3edffbb}.scene-steps{position:relative}
[data-theme=orbit] .thinking-dots i{animation-name:signal-pulse}[data-theme=orbit] .result-link{background:#ebe5f7;border-color:#ad9bc9}
/* Coast: a small postal messenger and replies that arrive like postcards. */
[data-theme=coast] .workspace{--scene-stroke:#377e80;--scene-paper:#fef1d5;--entry-motion:message-letter;--companion-motion:companion-sway}
[data-theme=coast] .bubble{border-color:#9cbbaf;border-radius:4px 12px 12px 12px;background:#fffdf5}[data-theme=coast] .mine .bubble{background:#d8eee3}
[data-theme=coast] .result-link{border-style:dashed;background:#f8eedb;border-color:#55918d}
[data-theme=coast] .scene-ring{border-radius:43% 55% 46% 50%;background:#d8eee799;border:1px solid #9dcac4;transform:rotate(-9deg)}
[data-theme=coast] .companion-face{border-radius:17px;background:linear-gradient(32deg,transparent 43%,#a5b6a04d 44% 45%,transparent 46%),linear-gradient(-32deg,#fff6df 43%,#a5b6a04d 44% 45%,#fff6df 46%);box-shadow:3px 5px #8db9ae44}
[data-theme=coast] .scene-stamp{border:2px dotted #b3a084;background:#fff4df;border-radius:2px;transform:translateX(-50%) rotate(-6deg)}
[data-theme=coast] .studio-celebration i{font-size:30px}.studio-atmosphere button:hover{background:var(--wash)}
@keyframes companion-float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-9px) rotate(2deg)}}
@keyframes companion-hop{0%,40%,60%,100%{transform:translateY(0)}50%{transform:translateY(-10px) rotate(-3deg)}}
@keyframes companion-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg) translateY(-4px)}}
@keyframes companion-wave{0%,65%,100%{transform:rotate(-28deg)}74%,88%{transform:rotate(-55deg)}81%,95%{transform:rotate(-20deg)}}
@keyframes companion-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.13)}}
@keyframes companion-work{from{transform:rotate(-12deg)}to{transform:rotate(15deg) translateY(-6px)}}
@keyframes orbit-drift{0%,100%{translate:0 0}50%{translate:0 -7px}}
@keyframes thinking{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}
@keyframes signal-pulse{0%,100%{opacity:.25;scale:.7}50%{opacity:1;scale:1.15}}
@keyframes helper-attention{0%,100%{transform:rotate(0)}45%{transform:rotate(-6deg)}55%{transform:rotate(3deg)}}
@keyframes music-level{from{scale:1 .45}to{scale:1 1.1}}
@keyframes message-soft{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes message-pop{0%{opacity:0;transform:scale(.96) translateY(5px)}70%{transform:scale(1.015)}100%{opacity:1;transform:scale(1)}}
@keyframes message-paper{from{opacity:0;transform:rotate(-2deg) translateY(5px)}to{opacity:1;transform:none}}
@keyframes message-signal{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@keyframes message-letter{from{opacity:0;transform:translateX(-9px) rotate(-1deg)}to{opacity:1;transform:none}}
@keyframes celebrate{0%{opacity:0;transform:translate(0,20px) rotate(0) scale(.4)}18%{opacity:.95}75%{opacity:.7}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(.85)}}
.workspace[data-motion=off] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(prefers-reduced-motion:reduce){.workspace *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1100px) and (min-width:761px){.track-name{display:none}.studio-atmosphere{justify-content:space-between}}
@media(max-width:760px){.studio-atmosphere{padding-inline:8px;gap:3px}.track-name{font-size:.6rem}.volume-control{flex-basis:35px}.empty-canvas h3{font-size:1.25rem}.studio-scene{scale:.9;margin-block:-10px}.scene-steps{gap:7px;font-size:.6rem}.scene-steps i{width:12px}.helper-tag{font-size:.6rem}}
@media(max-width:370px){.track-name{display:none}.studio-atmosphere{justify-content:space-between}.studio-atmosphere button{font-size:.65rem}.welcome-bubble>b{font-size:1rem}}
@media(max-height:650px){.studio-scene{height:220px;scale:.85;margin-block:-24px}.scene-steps{margin-top:16px}.empty-canvas{padding:16px}.empty-canvas h3{margin-top:13px}}
.make-card{display:grid;gap:8px;min-width:0;margin-top:2px}
.make-steps{display:flex;gap:4px;margin:0;padding:0;list-style:none;font-size:.72rem;counter-reset:step}.make-steps li{flex:1;min-width:0;padding:5px 4px;border-radius:999px;background:#0000000f;color:var(--muted);text-align:center;white-space:nowrap;counter-increment:step}.make-steps li::before{content:counter(step) '. ';font-weight:700}
.make-steps li.now{background:var(--accent,#f4ce59);color:var(--on-accent,#24323c);font-weight:700}.make-steps li.done{background:#1baf7a29;color:inherit}.make-steps li.done::before{content:'✓ '}
.make-headline{display:flex;align-items:center;gap:8px;margin:0;font-size:.9rem;font-weight:650}.make-headline b{font-size:1.1rem}
.make-queue{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0}.make-queue i{width:12px;height:12px;border-radius:50%;background:var(--muted);opacity:.45}.make-queue b{padding:1px 9px;border-radius:999px;background:var(--accent,#f4ce59);color:var(--on-accent,#24323c);font-size:.75rem}
.make-clock{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px}.make-clock b{font-size:1.9rem;line-height:1;font-variant-numeric:tabular-nums}.make-clock small{color:var(--muted);font-size:.78rem}
.make-bar{height:12px;border-radius:999px;background:#0000001a;overflow:hidden}.make-bar i{display:block;width:0;height:100%;border-radius:inherit;background:repeating-linear-gradient(45deg,var(--accent,#f4ce59) 0 10px,color-mix(in srgb,var(--accent,#f4ce59) 65%,white) 10px 20px);background-size:28px 28px;animation:make-stripes 1s linear infinite;transition:width .8s ease}
@keyframes make-stripes{to{background-position:28px 0}}.make-card.slow .make-bar i{animation-duration:.5s}
.make-rule{margin:0;padding:8px 10px;border-radius:10px;font-size:.8rem;font-weight:600;line-height:1.45}.make-rule.can{background:#1baf7a1f}.make-rule.cannot{background:#eb68341f}
.make-hint{margin:0;color:var(--muted);font-size:.72rem;line-height:1.45}
.bubble .make-card .cancel-request{justify-self:start;padding:6px 14px;border:1px solid var(--hair);border-radius:999px;background:#fff;color:inherit;text-decoration:none;font-size:.8rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.make-bar i{animation:none;transition:none}}
.make-ahead{margin:0;font-size:.85rem}.make-ahead b{font-size:1.1rem}