@import "//fonts.googleapis.com/css?family=Share+Tech+Mono";:root{--bg:#08111f;--bg-elevated:#0f1b2dc7;--surface:#142338b8;--surface-strong:#192b44eb;--border:#94a3b829;--border-strong:#7dd3fc47;--text:#f8fafc;--muted:#9fb0c5;--accent:#38bdf8;--accent-2:#818cf8;--success:#34d399;--shadow:0 24px 80px #02081761;--radius:24px}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;min-height:100vh;color:var(--text);-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 12% 8%,#38bdf824,#0000 30rem),radial-gradient(circle at 88% 16%,#818cf821,#0000 28rem),linear-gradient(#091321 0%,#07101c 48%,#050b14 100%);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}body:before{content:"";pointer-events:none;opacity:.16;background-image:linear-gradient(#ffffff06 1px,#0000 1px),linear-gradient(90deg,#ffffff06 1px,#0000 1px);background-size:32px 32px;position:fixed;inset:0}button,input,textarea,select{font:inherit;border:1px solid var(--border);color:var(--text);background:#08111fd1;border-radius:12px}button{cursor:pointer;padding:.7rem 1rem;font-weight:700;transition:transform .18s,border-color .18s,background .18s}button:hover{border-color:var(--border-strong);background:#38bdf81c;transform:translateY(-1px)}input,textarea,select{padding:.7rem .85rem}input:focus,textarea:focus,select:focus,button:focus-visible{outline-offset:2px;outline:2px solid #38bdf88c}.App{z-index:1;width:min(1180px,100% - 32px);margin:0 auto;padding:48px 0 64px;position:relative}.app-header{justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:28px;padding:8px 4px 20px;display:flex}.eyebrow{color:#7dd3fc;text-transform:uppercase;letter-spacing:.16em;margin-bottom:10px;font-size:.76rem;font-weight:800;display:inline-flex}.app-header h1{letter-spacing:-.055em;margin:0;font-size:clamp(2.5rem,8vw,5rem);line-height:.95}.lede{max-width:680px;color:var(--muted);margin:18px 0 0;font-size:clamp(1rem,2vw,1.18rem);line-height:1.65}.status-pill{white-space:nowrap;color:#dff8ff;border:1px solid var(--border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0f1b2db8;border-radius:999px;align-items:center;gap:9px;padding:.55rem .8rem;font-size:.82rem;font-weight:700;display:inline-flex}.status-dot{background:var(--success);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #34d3991f}.tool-grid{gap:22px;display:grid}.tool-card,.console-card{border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:linear-gradient(#142338db,#0c1828bd);position:relative;overflow:hidden}.tool-card{padding:24px}.tool-card:after{content:"";background:linear-gradient(90deg,#0000,#7dd3fc80,#0000);height:1px;position:absolute;top:0;left:0;right:0}.section-heading{align-items:flex-start;gap:16px;margin-bottom:18px;display:flex}.section-heading.compact{margin-bottom:12px}.section-number{color:#7dd3fc;letter-spacing:.08em;background:#38bdf814;border:1px solid #38bdf840;border-radius:999px;justify-content:center;align-items:center;min-width:42px;height:30px;font:700 .72rem/1 Share Tech Mono,monospace;display:inline-flex}.section-heading h2{letter-spacing:-.02em;margin:0;font-size:1.25rem}.section-heading p{color:var(--muted);margin:5px 0 0;line-height:1.5}.tool-surface{background:#050c166b;border:1px solid #94a3b81f;border-radius:18px;padding:18px;overflow:auto}.model-surface{min-height:240px}.console-card{margin-top:22px;padding:22px 24px}.console{color:#93c5fd;font-family:Share Tech Mono,monospace;font-size:.86rem}.alert{color:#fecaca;opacity:1;border-radius:12px;margin:.5rem 0;padding:.7rem .85rem;transition:opacity 3s ease-in-out}.alert.alert-fade{opacity:0}.alert-info{background-color:#38bdf829}.alert-warn{background-color:#f59e0b2e}.alert-error{background-color:#f8717129}.alert-success{color:#d1fae5;background-color:#34d39929}.successfully-saved{color:#d1fae5;text-align:center}.user-group text{fill:gray;font-family:Share Tech Mono;font-size:60px}.hidden{width:0;height:0}#stage,textarea,button,input{font-family:inherit}circle.area,rect.area{transition:fill .4s}svg #users .in-focus{fill:#fff}svg #users .not-in-focus{fill:#000}svg #users .active{fill:gray}svg #users.appear{animation:.5s ease-out forwards fadeIn}svg #users.disappear{animation:.5s ease-out forwards fadeOut}@keyframes fadeOut{0%{visibility:visible;opacity:1;display:block;transform:scale(1)}99%{visibility:visible;opacity:0;display:block;transform:scale(2)}to{visibility:hidden;opacity:0;display:none;transform:scale(2)}}@keyframes fadeIn{0%{visibility:hidden;opacity:0;display:none;transform:scale(2)}1%{visibility:visible;opacity:0;display:block;transform:scale(2)}to{opacity:1;display:block;transform:scale(1)}}svg .in-focus{fill:#38bdf8}svg .not-in-focus{fill:#0ea5e9}svg .active{fill:#0f172a}svg text{pointer-events:none}#users li{color:#fff;background-color:#07101c;width:200px;list-style:none}#users a{color:#fff;cursor:pointer;margin-left:12px}#users rect{cursor:pointer}#users text{pointer-events:none}.username{fill:#fff}.user-group-complete rect{fill:#475569}.user-group:hover text{fill:#08111f}.user-group-complete:hover rect,.user-group:hover rect{fill:#fff}.user-click{fill-opacity:0}.area-label{fill:#fff}.coloured-bg{background-color:#0ea5e9}textarea{min-height:150px;font-size:1rem}.js-area-highlight,.js-area-standard{fill:#0ea5e9}.area{stroke:#ffffffc7;stroke-width:1px}.dropper{fill:#fff;pointer-events:none}.dropped{fill:#64748b}@media (width<=700px){.App{width:min(100% - 20px,1180px);padding-top:28px}.app-header{flex-direction:column;gap:18px}.tool-card,.console-card{border-radius:18px;padding:18px}.section-heading{gap:10px}}