:root{font-family:Trebuchet MS,Arial,sans-serif;color:#181612;background:#177d79;font-synthesis:none;--win-gray: #c5c5c5;--win-blue: #071f80;--ink: #17130e;--paper: #fffdf2}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:repeating-linear-gradient(135deg,rgb(255 255 255 / 5%) 0 4px,transparent 4px 10px),#177d79}button,input,textarea{font:inherit}button{color:inherit}.app-shell{width:min(1480px,calc(100vw - 24px));min-height:calc(100vh - 24px);margin:12px auto;padding:3px;border:2px solid;border-color:#fff #292929 #292929 #fff;background:var(--win-gray);box-shadow:8px 10px #00000047}.title-bar{display:flex;align-items:center;justify-content:space-between;min-height:42px;padding:5px 7px;color:#fff;background:linear-gradient(90deg,#061b70,#175bc7 70%,#52a4df)}.title-bar>div{display:flex;align-items:center;gap:9px}.title-mark{display:grid;width:28px;height:28px;place-items:center;border:1px solid white;color:#ffe23b;background:#c51b25;font-weight:900;transform:rotate(-3deg)}.room-label{padding-left:10px;border-left:1px solid rgb(255 255 255 / 50%);font-size:13px}.window-button,.send-button,.mode-switcher button,.emotion-wheel button,.avatar-picker button{border:2px solid;border-color:#fff #363636 #363636 #fff;background:var(--win-gray);box-shadow:1px 1px #111}.window-button:active,.send-button:active,.mode-switcher button:active,.emotion-wheel button:active,.avatar-picker button:active,.selected{border-color:#363636 #fff #fff #363636!important;box-shadow:inset 1px 1px #111!important}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 318px;min-height:calc(100vh - 112px);margin-top:4px;gap:4px}.comic-scroll{overflow:auto;height:calc(100vh - 112px);padding:20px;border:2px solid;border-color:#343434 #fff #fff #343434;background:radial-gradient(circle at 1px 1px,rgb(0 0 0 / 8%) 1px,transparent 1.5px) 0 0 / 8px 8px,#f4ecd5}.comic-grid{display:grid;grid-template-columns:repeat(2,minmax(300px,1fr));gap:15px;max-width:1100px;margin:auto}.comic-panel{position:relative;overflow:hidden;min-height:430px;border:4px solid var(--ink);background-color:#e8e0c4;isolation:isolate}.comic-panel:before{position:absolute;inset:0;z-index:-2;content:"";opacity:.7}.backdrop-0:before{background:radial-gradient(circle at 65% 18%,#fff6ae 0 11%,transparent 12%),linear-gradient(#97cfdf 0 55%,#7ca870 55% 100%)}.backdrop-1:before{background:repeating-linear-gradient(90deg,transparent 0 55px,rgb(0 0 0 / 12%) 56px 58px),linear-gradient(#e9c9a6 0 58%,#8e6953 58% 100%)}.backdrop-2:before{background:radial-gradient(circle,rgb(255 255 255 / 70%) 0 1px,transparent 2px) 0 0 / 17px 17px,linear-gradient(#202748 0 62%,#55505f 62% 100%)}.backdrop-3:before{background:repeating-radial-gradient(ellipse at 50% 110%,#d9d0ae 0 18px,#b8aa83 19px 22px),#d9d0ae}.panel-number{position:absolute;top:6px;right:8px;z-index:5;padding:2px 5px;border:2px solid var(--ink);background:#ffeb36;font:700 10px/1 monospace}.balloon-row{position:relative;z-index:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));align-items:start;gap:8px;min-height:190px;padding:24px 16px 4px}.balloon{position:relative;display:flex;flex-direction:column;gap:2px;max-height:174px;padding:13px 15px;border:3px solid var(--ink);border-radius:50%;color:var(--ink);background:var(--paper);box-shadow:3px 4px #0000001f;text-align:center;font-family:Comic Sans MS,Trebuchet MS,sans-serif;line-height:1.12;transform:rotate(var(--tilt, -1deg))}.balloon:nth-child(2n){--tilt: 1deg}.balloon:after{position:absolute;bottom:-26px;left:calc(50% - 7px);width:18px;height:34px;content:"";background:var(--paper);clip-path:polygon(0 0,100% 0,30% 100%);filter:drop-shadow(-2px 1px 0 var(--ink)) drop-shadow(2px 1px 0 var(--ink))}.balloon strong{font-size:11px;text-transform:uppercase}.balloon span{overflow:hidden;overflow-wrap:anywhere}.balloon-whisper{border-style:dashed;font-size:.9em}.balloon-think{border-radius:46% 54% 44% 56%/56% 48% 52% 44%}.balloon-think:after{bottom:-27px;width:15px;height:15px;border:3px solid var(--ink);border-radius:50%;background:var(--paper);clip-path:none;filter:none;box-shadow:12px 13px 0 -4px var(--paper),12px 13px 0 -1px var(--ink)}.balloon-action{grid-column:1 / -1;border-radius:0;background:#fff6a4;font-weight:700;text-align:left;transform:none}.balloon-action:after{display:none}.cast-row{position:absolute;right:0;bottom:-12px;left:0;z-index:1;display:grid;grid-template-columns:repeat(var(--speaker-count),minmax(0,1fr));align-items:end;height:255px;padding:0 10px}.cast-member{position:relative;display:flex;align-items:center;justify-content:end;height:100%;min-height:0;margin:0;flex-direction:column}.cast-member img{max-width:100%;height:min(245px,100%);object-fit:contain;object-position:bottom;filter:drop-shadow(2px 3px 0 rgb(255 255 255 / 55%))}.camera-close .cast-member img{height:280px;max-width:82%}.faces-left img{transform:scaleX(-1)}.cast-member figcaption{position:absolute;bottom:13px;padding:2px 5px;border:2px solid var(--ink);background:#fff9c9;font-size:10px;font-weight:800;text-transform:uppercase}.control-panel{overflow:auto;height:calc(100vh - 112px);padding:5px;border:2px solid;border-color:#343434 #fff #fff #343434;background:var(--win-gray)}.panel-section{margin-bottom:7px;padding:8px;border:2px groove #eee}.panel-section h2{margin:-2px 0 8px;font-size:13px;text-transform:uppercase}.roster{min-height:76px;max-height:150px;margin:0;padding:3px;overflow:auto;border:2px solid;border-color:#343434 #fff #fff #343434;background:#fff;list-style:none}.roster li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:6px;min-height:32px;padding:2px 4px;font-size:12px}.roster li.is-me{color:#fff;background:#15359a}.roster img{width:27px;height:27px;object-fit:contain;object-position:top}.roster em{font-size:10px}.identity-section label{display:grid;gap:4px;margin-bottom:8px;font-size:12px}.identity-section input,.composer textarea{width:100%;padding:6px;border:2px solid;border-color:#343434 #fff #fff #343434;color:#111;background:#fff}.avatar-picker{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.avatar-picker button{height:58px;padding:2px}.avatar-picker img{width:100%;height:100%;object-fit:contain}.emotion-wheel{position:relative;width:184px;height:184px;margin:4px auto 8px;border:3px ridge #eee;border-radius:50%;background:radial-gradient(circle,#e7e7e7 0 28%,#9b9b9b 29% 30%,#d5d5d5 31% 100%)}.emotion-wheel button{position:absolute;display:grid;width:38px;height:38px;padding:3px;place-items:center;border-radius:50%;font-size:11px;font-weight:800}.emotion-wheel button img{max-width:100%;max-height:100%;image-rendering:pixelated}.emotion-wheel button:nth-child(1){top:4px;left:73px}.emotion-wheel button:nth-child(2){top:20px;right:20px}.emotion-wheel button:nth-child(3){top:73px;right:4px}.emotion-wheel button:nth-child(4){right:20px;bottom:20px}.emotion-wheel button:nth-child(5){bottom:4px;left:73px}.emotion-wheel button:nth-child(6){bottom:20px;left:20px}.emotion-wheel button:nth-child(7){top:73px;left:4px}.emotion-wheel button:nth-child(8){top:20px;left:20px}.emotion-wheel .wheel-center{top:66px;left:66px;width:46px;height:46px;border-radius:50%;font-size:9px}.emotion-section p{min-height:28px;margin:0;font-size:11px;text-align:center}.composer{display:grid;gap:6px;padding:8px;border:2px groove #eee}.mode-switcher{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.mode-switcher button{padding:4px 2px;font-size:10px;text-transform:uppercase}.composer textarea{resize:vertical}.send-button{padding:7px;font-weight:800}.send-button:disabled{color:#747474;text-shadow:1px 1px white}.empty-comic{max-width:780px;margin:9vh auto 0;padding:30px;border:4px solid var(--ink);background:var(--paper);text-align:center;transform:rotate(-.4deg)}.empty-cast{display:flex;justify-content:center;height:250px;gap:22px}.empty-cast img{min-width:0;max-width:30%;height:100%;object-fit:contain}.empty-comic h1{margin:18px 0 8px;font-family:Comic Sans MS,Trebuchet MS,sans-serif}.status-bar{display:grid;grid-template-columns:auto auto 1fr;gap:4px;margin-top:4px;font-size:11px}.status-bar span{padding:4px 6px;border:1px solid;border-color:#555 #fff #fff #555}@media(max-width:980px){.workspace{grid-template-columns:1fr}.comic-scroll{height:auto;min-height:65vh}.control-panel{display:grid;grid-template-columns:1fr 1fr;height:auto}.composer{grid-column:1 / -1}}@media(max-width:680px){.app-shell{width:100%;min-height:100vh;margin:0;border-width:0}.title-bar{align-items:flex-start}.title-bar>div{align-items:flex-start;flex-wrap:wrap}.room-label{width:100%;padding-left:0;border-left:0}.comic-scroll{padding:8px}.comic-grid{grid-template-columns:1fr}.comic-panel{min-height:410px}.control-panel{display:block}.status-bar{grid-template-columns:1fr}}