@font-face{font-family:IsYun;src:url(https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2202-2@1.0/LeeSeoyun.woff)format("woff");font-weight:400;font-display:swap}:root{--chalk-green:#2f4f43;--chalk-green-dark:#22392f;--wood:#8a5a34;--wood-dark:#6e4526;--wood-light:#a8703f;--cream:#fbf3e3;--chalk-yellow:#ffd166;--chalk-yellow-dark:#e7ab2e;--coral:#ff6f61;--mint:#8fd3c7;--ink:#2c2a26;--font-display:"Jua", "Gaegu", sans-serif;--font-hand:"IsYun", "Gaegu", sans-serif}*{box-sizing:border-box}html,body{background:var(--chalk-green-dark);height:100%;font-family:var(--font-hand);color:var(--ink);margin:0;overflow:hidden}#app{border:clamp(10px, 1.4vw, 20px) solid var(--wood);border-image:linear-gradient(135deg, var(--wood-light), var(--wood) 45%, var(--wood-dark)) 1;background:radial-gradient(ellipse 55% 38% at 50% 79%, #ffffff1a, transparent 70%), radial-gradient(ellipse 60% 55% at 12% -8%, #ffffff12, transparent 60%), radial-gradient(ellipse 60% 55% at 88% -8%, #ffffff12, transparent 60%), radial-gradient(ellipse 90% 60% at 50% 0%, #ffffff0d, transparent 65%), linear-gradient(180deg, var(--chalk-green) 0%, var(--chalk-green-dark) 100%);width:100vw;height:100vh;position:relative;overflow:hidden;box-shadow:inset 0 0 40px #00000073}.chalk-tools{z-index:12;pointer-events:none;align-items:flex-end;gap:18px;display:flex;position:absolute;bottom:calc(max(150px,22vh) - 4px);left:clamp(16px,3vw,40px)}.tool-marker{background:linear-gradient(#4d9dff 0%,#2f7fe0 55%,#1f63b8 100%);border-radius:9px;width:84px;height:18px;position:relative;transform:rotate(-7deg);box-shadow:0 4px 6px #00000059,inset 0 1px #fff6}.tool-marker:before{content:"";background:#fbf3e3d9;width:16px;height:100%;position:absolute;top:0;left:28px}.tool-marker:after{content:"";border:6px solid #0000;border-left-width:0;border-right:12px solid #3a3a3a;width:0;height:0;position:absolute;top:3px;right:-12px}.tool-marker-cap{background:linear-gradient(#6cb4ff,#2f7fe0);border-radius:5px;width:16px;height:16px;position:absolute;top:1px;left:-14px;box-shadow:0 3px 4px #0000004d}.tool-eraser{background:linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 100%);border-radius:6px;width:58px;height:24px;position:relative;transform:rotate(4deg);box-shadow:0 4px 6px #00000059,inset 0 1px #ffffff40}.tool-eraser:after{content:"";background:repeating-linear-gradient(90deg,#2a2a2a 0 3px,#1a1a1a 3px 4px);border-radius:3px;height:8px;position:absolute;bottom:3px;left:3px;right:3px}.chalk-posters{z-index:10;align-items:flex-start;gap:clamp(18px,3vw,34px);display:flex;position:absolute;top:clamp(84px,13vh,120px);left:clamp(16px,3vw,40px)}.chalk-poster{width:clamp(148px,16vw,208px);font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;margin:0;padding:10px 0 0;position:relative}.chalk-poster:first-child{transform:rotate(-4deg)}.chalk-poster:nth-child(2){margin-top:16px;transform:rotate(3deg)}.chalk-poster-paper{background:var(--cream);border-radius:4px;padding:8px 8px 10px;transition:transform .15s,box-shadow .15s;display:block;box-shadow:0 10px 18px #00000059,0 0 0 1px #0000000f}.chalk-poster:hover .chalk-poster-paper,.chalk-poster:focus-visible .chalk-poster-paper{transform:translateY(-3px)scale(1.04);box-shadow:0 16px 26px #0006,0 0 0 1px #0000000f}.chalk-poster:active .chalk-poster-paper{transform:translateY(0)scale(.98)}.chalk-poster-photo{aspect-ratio:3/4;border-radius:2px;display:block;overflow:hidden}.chalk-poster-img{object-fit:cover;object-position:left;width:100%;height:100%;display:block}.chalk-poster-placeholder{background:repeating-linear-gradient(135deg,#e7dcc4,#e7dcc4 10px,#ddd0b2 10px 20px);border:1px dashed #c8b98f;border-radius:2px;justify-content:center;align-items:center;width:100%;height:100%;font-size:2.2rem;display:flex}.chalk-poster-label{text-align:center;font-family:var(--font-display);color:var(--chalk-green-dark);margin-top:8px;font-size:.95rem;display:block}.chalk-poster-magnet{z-index:2;border-radius:50%;width:20px;height:20px;position:absolute;top:0;left:50%;transform:translate(-50%);box-shadow:0 3px 4px #0006,inset 0 1px 1px #ffffff80}.chalk-poster-magnet-red{background:radial-gradient(circle at 35% 30%, #ff9a8f, var(--coral) 70%)}.chalk-poster-magnet-blue{background:radial-gradient(circle at 35% 30%,#8fc4ff,#2f7fe0 70%)}.credits{z-index:12;pointer-events:none;font-family:var(--font-hand);color:#fbf3e38c;text-shadow:0 0 2px #ffffff26;flex-direction:column;align-items:flex-end;gap:2px;font-size:clamp(.9rem,1.6vw,1.2rem);display:flex;position:absolute;bottom:calc(max(150px,22vh) + 14px);right:clamp(16px,3vw,40px)}.credits-label{color:#ffd16699;margin-bottom:2px;font-weight:700;position:relative;transform:rotate(-1deg)}.credits-label:after{content:"";background:repeating-linear-gradient(90deg,#ffd16673 0 6px,#0000 6px 10px);border-radius:2px;height:2px;margin-top:2px;display:block}.credits span:nth-child(2){transform:rotate(-1.5deg)}.credits span:nth-child(3){transform:rotate(1deg)}.floor{z-index:5;pointer-events:none;background:linear-gradient(180deg, #ffffff14 0%, transparent 6%), repeating-linear-gradient(100deg, #0000000d 0px, transparent 2px, transparent 34px, #0000000d 36px), repeating-linear-gradient(78deg, #ffffff08 0px, transparent 2px, transparent 46px, #ffffff08 48px), linear-gradient(180deg, var(--wood-light) 0%, var(--wood) 30%, var(--wood-dark) 100%);height:22%;min-height:150px;position:absolute;bottom:0;left:0;right:0;box-shadow:inset 0 -14px 30px -10px #00000059}.floor:before{content:"";background:linear-gradient(#ffd1668c,#0000);height:6px;position:absolute;top:0;left:0;right:0}#stage{width:100%;height:100%;display:block;position:absolute;inset:0}.topbar{z-index:20;pointer-events:none;align-items:baseline;gap:14px;padding:20px clamp(16px,3vw,40px);display:flex;position:absolute;top:0;left:0;right:0}.brand{font-family:var(--font-display);align-items:center;gap:10px;display:flex}.brand-badge{background:var(--chalk-yellow);width:40px;height:40px;color:var(--chalk-green-dark);box-shadow:0 3px 0 var(--chalk-yellow-dark);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:inline-flex}.brand-text{color:var(--cream);letter-spacing:.5px;text-shadow:0 2px #00000040;font-size:clamp(1.1rem,2vw,1.6rem)}.topbar-sub{color:#fbf3e3b3;font-size:.85rem}.panel{opacity:0;z-index:15;pointer-events:none;width:min(64vw,600px);transition:opacity .45s,transform .45s;position:absolute;top:34%;transform:translateY(-50%)translate(0)scale(.94)}.panel-right{right:clamp(16px,3vw,56px)}.panel-left{left:clamp(16px,3vw,56px)}.panel-right:not(.panel-visible){transform:translateY(-50%)translate(24px)scale(.94)}.panel-left:not(.panel-visible){transform:translateY(-50%)translate(-24px)scale(.94)}.panel-visible{opacity:1;transform:translateY(-50%)translate(0)scale(1)}.panel-frame{background:var(--cream);border-radius:18px;padding:14px 14px 18px;transform:rotate(-1.5deg);box-shadow:0 14px 30px #00000059,0 0 0 6px #ffffff14}.panel-right .panel-frame{transform:rotate(1.5deg)}.panel-gallery{grid-template-columns:1fr;display:grid}.gallery-shot{aspect-ratio:4/3;border-radius:12px;overflow:hidden}img.gallery-shot{object-fit:cover;object-position:left top;border:2px solid #c8b98f;width:100%;height:100%;display:block}.gallery-shot-placeholder{color:#8a7a52;background:repeating-linear-gradient(135deg,#e7dcc4,#e7dcc4 10px,#ddd0b2 10px 20px);border:2px dashed #c8b98f;flex-direction:column;justify-content:center;align-items:center;gap:6px;display:flex}.panel-photo-icon{font-size:2.4rem}.panel-photo-label{font-family:var(--font-display);font-size:.9rem}.panel-title{font-family:var(--font-display);text-align:center;color:var(--chalk-green-dark);margin-top:12px;font-size:1.05rem}.bottom-stack{z-index:25;pointer-events:none;flex-direction:column;align-items:center;gap:10px;display:flex;position:absolute;bottom:0;left:0;right:0}.bubble-wrap{pointer-events:none;justify-content:center;width:min(92vw,1000px);transition:transform .45s,max-width .45s;display:flex}.bubble-wrap.shift-left{max-width:min(50vw,1000px);transform:translate(min(-18vw,-210px))}.bubble-wrap.shift-right{max-width:min(50vw,1000px);transform:translate(min(18vw,210px))}.bubble{white-space:pre-wrap;word-break:keep-all;background:var(--cream);color:var(--ink);font-family:var(--font-hand);text-align:center;border:3px solid var(--chalk-green-dark);border-radius:22px;width:fit-content;max-width:100%;height:fit-content;max-height:44vh;padding:18px 26px;font-size:clamp(1rem,1.6vw,1.4rem);font-weight:700;line-height:1.55;position:relative;overflow-y:auto;box-shadow:0 10px 24px #0000004d}.bubble.bubble-compact{text-align:left;font-size:clamp(1rem,1.6vw,1.4em);line-height:1.5}.bubble:after{content:"";background:var(--cream);border-right:3px solid var(--chalk-green-dark);border-bottom:3px solid var(--chalk-green-dark);clip-path:polygon(0 0,100% 0,50% 100%);width:26px;height:26px;position:absolute;bottom:-16px;left:50%;transform:translate(-50%)}.bubble p{margin:0}.bubble-pop{animation:.35s bubblePop}@keyframes bubblePop{0%{opacity:.4;transform:scale(.85)}60%{opacity:1;transform:scale(1.04)}to{transform:scale(1)}}.live-caption{color:var(--cream);white-space:nowrap;text-overflow:ellipsis;background:#141e1abf;border-radius:999px;align-items:center;gap:8px;max-width:min(85vw,560px);padding:8px 16px;font-size:.95rem;display:none;overflow:hidden}.live-visible{display:flex}.live-dot{background:var(--coral);border-radius:50%;flex-shrink:0;width:8px;height:8px;animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}}.dock{pointer-events:auto;width:100%;padding-bottom:clamp(14px,2.5vh,26px)}.dock-inner{flex-direction:column;align-items:center;gap:14px;padding:0 clamp(16px,4vw,60px);display:flex}.sample-chips{flex-wrap:wrap;justify-content:center;gap:8px;max-width:780px;display:flex}.chip{font-family:var(--font-hand);border:2px solid var(--chalk-green-dark);color:var(--chalk-green-dark);cursor:pointer;background:#fbf3e3eb;border-radius:999px;padding:7px 16px;font-size:1.2rem;font-weight:700;transition:transform .15s,background .15s}.chip:hover{background:var(--chalk-yellow);transform:translateY(-2px)}.controls{flex-direction:column;align-items:center;gap:8px;display:flex}.text-fallback{gap:8px;width:min(90vw,480px);display:flex}.text-fallback input{font-family:var(--font-hand);border:2px solid var(--wood-light);border-radius:12px;outline:none;flex:1;padding:10px 14px;font-size:1rem}.text-fallback button{font-family:var(--font-display);background:var(--chalk-yellow);cursor:pointer;box-shadow:0 3px 0 var(--chalk-yellow-dark);border:none;border-radius:12px;padding:10px 16px;font-size:.9rem}.mic-btn{background:radial-gradient(circle at 35% 30%, #ffe29a, var(--chalk-yellow) 65%);width:78px;height:78px;color:var(--chalk-green-dark);box-shadow:0 6px 0 var(--chalk-yellow-dark), 0 10px 20px #00000059;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;transition:transform .15s,box-shadow .15s,background .2s;display:flex}.mic-btn:active{box-shadow:0 3px 0 var(--chalk-yellow-dark), 0 6px 14px #0000004d;transform:translateY(3px)}.mic-btn.mic-listening{background:radial-gradient(circle at 35% 30%, #ff9a8f, var(--coral) 65%);animation:1.2s ease-in-out infinite micPulse;box-shadow:0 6px #c94a3d,0 0 0 10px #ff6f6140}@keyframes micPulse{0%,to{box-shadow:0 6px #c94a3d,0 0 0 8px #ff6f6140}50%{box-shadow:0 6px #c94a3d,0 0 0 16px #ff6f611f}}.mic-btn.mic-thinking{background:radial-gradient(circle at 35% 30%,#bcdcff,#6fa8dc 65%);animation:.9s ease-in-out infinite micThink;box-shadow:0 6px #3f7cb8,0 0 0 10px #6fa8dc33}@keyframes micThink{0%,to{transform:scale(1)}50%{transform:scale(.92)}}.mic-status{font-family:var(--font-hand);color:var(--cream);text-shadow:0 1px 2px #0006;font-size:.9rem;font-weight:700}.loading-overlay{z-index:100;background:var(--chalk-green-dark);justify-content:center;align-items:center;transition:opacity .5s,visibility .5s;display:flex;position:absolute;inset:0}.loading-overlay.loading-done{opacity:0;visibility:hidden;pointer-events:none}.chalkboard{text-align:center;color:var(--cream);font-family:var(--font-display)}.chalk-spinner{border:5px solid #fbf3e340;border-top-color:var(--chalk-yellow);border-radius:50%;width:54px;height:54px;margin:0 auto 16px;animation:.9s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=720px){.panel{width:min(42vw,260px)}.bubble-wrap{width:92vw;bottom:clamp(150px,24vh,190px)}.live-caption{bottom:clamp(215px,32vh,250px)}.mic-btn{width:66px;height:66px}}