:root{color:#15171b;background:#f4efe3;font-family:Trebuchet MS,system-ui,sans-serif;font-synthesis:none;--ink: #15171b;--paper: #f4efe3;--yellow: #ffd43b;--red: #ef4f3f;--blue: #4169e1}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background-color:var(--paper);background-image:radial-gradient(rgba(21,23,27,.1) .65px,transparent .65px);background-size:7px 7px}button,select,textarea,input{font:inherit}.site-header{height:92px;padding:0 clamp(22px,5vw,78px);display:flex;align-items:center;justify-content:space-between;border-bottom:4px solid var(--ink);background:#f4efe3f0}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:14px}.brand-burst{display:grid;place-items:center;width:55px;height:55px;color:#fff;background:var(--red);border:3px solid var(--ink);border-radius:52% 48% 50% 45%;box-shadow:4px 4px 0 var(--ink);font:900 21px Impact,Arial Black,sans-serif;transform:rotate(-5deg)}.brand strong{display:block;font:900 23px Impact,Arial Black,sans-serif;text-transform:uppercase;letter-spacing:.02em}.brand small,.prototype-stamp{font:11px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.08em}.prototype-stamp{padding:9px 12px;border:2px solid var(--ink);background:var(--yellow);transform:rotate(2deg)}main{width:min(1450px,calc(100% - 44px));margin:0 auto}.intro{padding:68px 0 48px;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);column-gap:8vw;align-items:end}.eyebrow{grid-column:1 / -1;margin:0 0 15px;font:700 12px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.12em;color:#55504a}h1{margin:0;font:900 clamp(48px,6.1vw,92px)/.92 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-.055em}h1 em{color:var(--red);font-style:normal;-webkit-text-stroke:2px var(--ink);text-shadow:4px 4px 0 var(--ink)}.lede{margin:0 0 4px;max-width:470px;font-size:17px;line-height:1.65}code{font-family:ui-monospace,SFMono-Regular,monospace;font-size:.86em;background:#fff9;padding:2px 5px}.live-console{margin:0 0 28px;padding:16px 18px 13px;display:grid;grid-template-columns:minmax(175px,1.25fr) minmax(145px,.8fr) minmax(145px,.8fr) minmax(160px,1fr) minmax(160px,auto);gap:11px 13px;align-items:end;color:#fffdf6;background:var(--ink);border:4px solid var(--ink);box-shadow:8px 8px 0 var(--red)}.live-heading{align-self:center;display:flex;align-items:center;gap:11px}.live-heading>span:last-child{min-width:0;display:flex;flex-direction:column}.live-heading small,.live-console label{font:9px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.08em}.live-heading strong{overflow:hidden;font-size:15px;text-overflow:ellipsis;white-space:nowrap}.live-dot{width:15px;height:15px;flex:0 0 auto;border-radius:50%;border:2px solid white;background:#858585;box-shadow:0 0 0 3px #ffffff1f}.live-console[data-state=connecting] .live-dot,.live-console[data-state=joining] .live-dot{background:var(--yellow);animation:live-pulse 1s ease-in-out infinite}.live-console[data-state=joined] .live-dot{background:#4bdb78}.live-console[data-state=error] .live-dot{background:var(--red)}.live-console label{display:flex;flex-direction:column;gap:5px}.live-console select,.live-console input{height:40px;padding:0 9px;border:2px solid white;box-shadow:none;background:#fffdf6;color:var(--ink);font:700 13px Trebuchet MS,sans-serif}.live-actions{display:flex;gap:7px}.connect-button,.share-room-button{min-height:40px;padding:0 12px;border:2px solid white;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;white-space:nowrap;cursor:pointer}.connect-button{background:var(--blue)}.share-room-button{background:transparent}.connect-button:hover,.share-room-button:hover:not(:disabled){background:var(--red)}.share-room-button:disabled{opacity:.45;cursor:not-allowed}.live-console>p{grid-column:1 / -1;margin:0;color:#c9c9c6;font:9px ui-monospace,SFMono-Regular,monospace;text-align:right}@keyframes live-pulse{50%{opacity:.45}}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);min-height:675px;border:4px solid var(--ink);box-shadow:12px 13px 0 var(--ink);background:#fffaf0}.controls{padding:28px;border-right:4px solid var(--ink);background:var(--yellow)}.step{display:flex;align-items:center;gap:10px;margin:14px 0 9px}.step:first-child{margin-top:0}.step span{display:grid;place-items:center;width:25px;height:25px;border:2px solid var(--ink);border-radius:50%;background:#fff;font:700 12px ui-monospace,SFMono-Regular,monospace}.step label{font-weight:800;font-size:14px;text-transform:uppercase;letter-spacing:.03em}select,textarea,input{width:100%;color:var(--ink);border:3px solid var(--ink);border-radius:0;background:#fffdf6;box-shadow:4px 4px 0 var(--ink);outline:none}select{height:48px;padding:0 12px;font-weight:700}input{height:48px;padding:0 12px}textarea{padding:12px;resize:none;line-height:1.4}select:focus,textarea:focus,input:focus,button:focus-visible{outline:4px solid var(--blue);outline-offset:2px}.count{margin-top:7px;text-align:right;font:11px ui-monospace,SFMono-Regular,monospace}.tone-card{margin-top:18px;padding:12px;display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:center;border:3px solid var(--ink);background:#fffdf6}.tone-icon{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;color:#fff;background:var(--blue);border:2px solid var(--ink)}.tone-card span:last-child{min-width:0;display:flex;flex-direction:column}.tone-card small{font:9px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase}.tone-card strong{margin:2px 0;font-size:17px}.tone-card em{overflow:hidden;color:#625e56;font: 10px ui-monospace,SFMono-Regular,monospace;text-overflow:ellipsis;white-space:nowrap}.add-button{width:100%;height:53px;margin-top:16px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;border:3px solid var(--ink);background:var(--blue);color:#fff;box-shadow:5px 5px 0 var(--ink);font-weight:800;text-transform:uppercase;cursor:pointer}.add-button>span:last-child{font-size:24px}.add-button:active:not(:disabled){transform:translate(5px,5px);box-shadow:none}.strip-actions{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:8px}.small-action{height:36px;border:2px solid var(--ink);background:#fffdf6;font-size:11px;font-weight:800;text-transform:uppercase;cursor:pointer}.small-action:active:not(:disabled){background:var(--ink);color:#fff}button:disabled{cursor:not-allowed;filter:grayscale(.7);opacity:.46;box-shadow:none}.download-button{width:100%;height:55px;margin-top:22px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border:3px solid var(--ink);background:var(--red);color:#fff;box-shadow:5px 5px 0 var(--ink);font-weight:800;text-transform:uppercase;cursor:pointer}.download-button span{font-size:24px}.download-button:active{transform:translate(5px,5px);box-shadow:none}.status{min-height:36px;margin:18px 0 0;font:10px/1.5 ui-monospace,SFMono-Regular,monospace}.status.error{color:#a51008;font-weight:700}.stage-wrap{position:relative;min-width:0;display:grid;place-items:center;padding:56px clamp(28px,5vw,75px) 42px;background-color:#74bbdf;background-image:radial-gradient(rgba(21,23,27,.2) .8px,transparent .8px);background-size:8px 8px;overflow:hidden}.conversation-stage{display:block;padding:32px clamp(24px,3.6vw,54px) 42px;overflow:hidden}.strip-heading{margin-bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:20px;text-transform:uppercase}.strip-heading span{font:900 clamp(25px,3vw,40px) Impact,"Arial Black",sans-serif;letter-spacing:.02em}.strip-heading strong{padding:7px 10px;border:2px solid var(--ink);background:var(--yellow);font:11px ui-monospace,SFMono-Regular,monospace;white-space:nowrap}.comic-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:27px 22px}.panel-card{position:relative;min-width:0;padding-bottom:34px;border:4px solid var(--ink);background:#fffdf6;box-shadow:8px 9px #15171bdb}.panel-card:only-child{grid-column:1 / -1;width:min(100%,720px);justify-self:center}.panel-card:nth-child(odd){transform:rotate(-.25deg)}.panel-card:nth-child(2n){transform:rotate(.25deg)}.panel-card canvas{display:block;width:100%;height:auto;background:#fff}.panel-meta{position:absolute;left:10px;bottom:8px;margin:0;font:10px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase}.remove-panel{position:absolute;right:8px;bottom:5px;height:25px;padding:0 8px;border:2px solid var(--ink);background:var(--red);color:#fff;font:800 9px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;cursor:pointer}.empty-strip{min-height:420px;grid-column:1 / -1;display:grid;place-content:center;justify-items:center;padding:40px;border:4px dashed rgba(21,23,27,.55);text-align:center;background:#fffdf659}.empty-strip span{font:900 90px/1 Impact,Arial Black,sans-serif;color:#15171b24}.empty-strip strong{font-size:22px;text-transform:uppercase}.empty-strip p{margin-bottom:0;font:11px ui-monospace,SFMono-Regular,monospace}.stage-caption{margin:24px 0 0;font:11px ui-monospace,SFMono-Regular,monospace;text-transform:uppercase;letter-spacing:.06em}.tape{position:absolute;z-index:2;width:110px;height:30px;background:#fff1aad1;border-left:1px dashed #9e8e4e;border-right:1px dashed #9e8e4e}.tape-one{left:7%;top:7%;transform:rotate(-12deg)}.tape-two{right:5%;bottom:10%;transform:rotate(9deg)}footer{width:min(1450px,calc(100% - 44px));margin:56px auto 0;padding:24px 0 34px;display:flex;justify-content:space-between;gap:20px;border-top:2px solid var(--ink);font:10px/1.5 ui-monospace,SFMono-Regular,monospace;text-transform:uppercase}@media(max-width:1200px){.live-console{grid-template-columns:1fr 1fr 1fr}.live-heading{grid-column:span 2}.live-actions{grid-column:3;grid-row:1}.comic-strip{grid-template-columns:1fr}}@media(max-width:900px){.intro{grid-template-columns:1fr;gap:25px}.live-console{grid-template-columns:1fr 1fr}.live-heading{grid-column:1 / -1}.live-actions{grid-column:1 / -1;grid-row:auto}.live-actions>button{flex:1}.workspace{grid-template-columns:1fr}.controls{border-right:0;border-bottom:4px solid var(--ink)}.stage-wrap{min-height:520px}.comic-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.site-header{height:78px;padding:0 17px}.brand strong{font-size:18px}.brand-burst{width:46px;height:46px;font-size:17px}.prototype-stamp{display:none}main{width:min(100% - 24px,1450px)}.intro{padding-top:45px}.live-console{grid-template-columns:1fr;padding:15px}.live-console label,.live-heading,.live-actions{grid-column:1}.live-actions{flex-direction:column}.live-console>p{text-align:left;line-height:1.5}h1{font-size:clamp(42px,14vw,68px)}.workspace{box-shadow:7px 8px 0 var(--ink)}.stage-wrap{padding:28px 14px 30px;min-height:330px}.comic-strip{grid-template-columns:1fr}.strip-heading{align-items:flex-end}.strip-heading span{font-size:28px}footer{width:calc(100% - 24px);flex-direction:column}}@media(prefers-reduced-motion:no-preference){.panel-card{animation:panel-in .5s cubic-bezier(.2,.8,.2,1) both}@keyframes panel-in{0%{opacity:0;transform:translateY(16px) rotate(-1.2deg)}}}