@font-face{font-family:Instrument Sans;font-style:normal;font-weight:400 600;font-display:swap;src:url(/fonts/InstrumentSans-Roman-latin.woff2)format("woff2")}@font-face{font-family:Commit Laravel Sans;font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/CommitLaravelSans-400-latin.woff2)format("woff2")}@font-face{font-family:Commit Laravel Sans;font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/CommitLaravelSans-500-latin.woff2)format("woff2")}@font-face{font-family:Commit Laravel Sans;font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/CommitLaravelSans-600-latin.woff2)format("woff2")}:root{--cloud-1:#f5f9ff;--cloud-2:#e9f3ff;--cloud-3:#c7e1ff;--cloud-4:#71a8ff;--cloud-5:#0070fe;--cloud-6:#0057ff;--cloud-7:#004ae0;--cloud-8:#0132a8;--cloud-9:#061e76;--cloud-10:#050941;--cloud-11:#00001e;--sand-1:#fdfdfc;--sand-2:#f9f9f8;--sand-3:#f3f3f2;--sand-4:#eeeeec;--sand-5:#e9e9e6;--sand-6:#e3e3e0;--sand-7:#dbdbd7;--sand-8:#c8c7c1;--sand-9:#90908c;--sand-10:#868682;--sand-11:#706f6c;--sand-12:#1b1b18;--slate-1:#fcfcfd;--slate-2:#f9f9fb;--slate-3:#f0f0f3;--slate-4:#e8e8ec;--slate-5:#e0e1e6;--slate-6:#d9d9e0;--slate-7:#cdced6;--slate-8:#b9bbc6;--slate-9:#8b8d98;--slate-10:#80838d;--slate-11:#60646c;--slate-12:#11181c;--jade-9:#29a383;--amber-9:#ffc53d;--red-9:#e5484d;--red-11:#ce2c31;--laravel-red:#f53003;--brand:var(--cloud-6);--brand-hover:var(--cloud-7);--text-default:var(--slate-12);--text-strong:var(--slate-11);--text-muted:var(--slate-10);--text-link:var(--cloud-7);--text-link-hover:var(--cloud-9);--border-default:var(--slate-3);--border-strong:var(--slate-6);--bg-default:#fff;--bg-subtle:var(--slate-1);--bg-section-start:var(--slate-2);--bg-section-end:#fff;--bg-section-gradient:linear-gradient(180deg, var(--bg-section-start), var(--bg-section-end));--font-sans:"Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;--font-mono:"Commit Laravel Sans", "CommitMonolaravel-new", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--text-xs:13px;--text-sm:14px;--text-base:16px;--text-lg:18px;--text-xl:20px;--text-2xl:24px;--text-3xl:28px;--text-4xl:32px;--text-5xl:40px;--text-6xl:48px;--text-7xl:56px;--text-8xl:64px;--text-9xl:72px;--leading-body:1.5;--leading-heading:1.375;--leading-display:1.2;--space-0:0px;--space-0-5:2px;--space-1:4px;--space-1-5:6px;--space-2:8px;--space-2-5:10px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-9:36px;--space-10:40px;--space-12:48px;--space-14:56px;--space-16:64px;--space-18:72px;--space-20:80px;--space-24:96px;--space-28:112px;--space-32:128px;--space-36:144px;--space-40:160px;--space-48:192px;--space-56:224px;--space-64:256px;--space-72:288px;--space-80:320px;--space-96:384px;--dot-gap:10px;--dot-ink:#0057ff29;--dot-grid:radial-gradient(circle at .5px .5px, var(--dot-ink) .5px, transparent .5px);--radius-none:0px;--radius-xs:2px;--radius-sm:4px;--radius-md:6px;--radius-lg:8px;--radius-xl:12px;--radius-2xl:16px;--shadow-xs:0 0 1px 0 #00000008, 0 1px 2px 0 #0000000f;color:var(--text-default);background:var(--bg-default);font-family:var(--font-sans);font-feature-settings:"ss02" 1, "ss09" 1;font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}html,body{height:100%}html{background:var(--bg-default);min-width:320px}html.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{background:var(--bg-default);min-width:320px;margin:0;position:relative;overflow:hidden}button,input{font:inherit}button{color:inherit}:focus-visible{outline:2px solid var(--cloud-5);outline-offset:2px;border-radius:var(--radius-xs)}.app-shell{isolation:isolate;isolation:isolate;flex-direction:column;width:100%;height:100dvh;display:flex}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}.topbar{z-index:10;justify-content:space-between;align-items:center;gap:var(--space-4);min-height:44px;padding:var(--space-1-5) var(--space-5);background:#fff;flex:none;display:flex;position:relative}.topbar:after{background:var(--border-default);content:"";width:100%;height:1px;position:absolute;bottom:0;right:0}.brand-lockup{align-items:center;gap:var(--space-2);-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-touch-callout:none;min-width:0;display:flex}.powered-by{color:var(--text-strong);font-size:var(--text-xs);white-space:nowrap;flex:none;line-height:1.7}.brand-lockup .brand-wordmark{flex:none;width:120px;max-width:32vw}.brand-lockup .brand-wordmark svg{width:100%;height:auto;display:block}.server-tabs{flex:none;min-width:0;max-width:100%;overflow:hidden}.server-tabs-list{align-items:center;gap:var(--space-0-5);max-width:100%;padding:var(--space-0-5);border-radius:var(--radius-lg);background:var(--slate-2);scrollbar-width:none;margin:0;list-style:none;display:flex;overflow-x:auto}.server-tabs-list::-webkit-scrollbar{display:none}.server-tabs-list a{gap:var(--space-1-5);min-height:40px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);color:var(--text-strong);font-size:var(--text-base);white-space:nowrap;border:1px solid #0000;align-items:center;font-weight:500;text-decoration:none;display:flex}.server-tabs-list a:hover{background:var(--slate-3);color:var(--text-default)}.server-tabs-list a[aria-current=page]{color:var(--text-default);background:#fff;border-color:#11181c14}.server-tabs-list a[aria-current=page]:hover{background:#fff}.framework-mark{color:var(--slate-12);flex:none;justify-content:center;align-items:center;display:inline-flex}.framework-mark svg{display:block}.framework-mark[data-adapter=laravel],.framework-mark[data-adapter=rails]{color:#f53003}.framework-mark[data-adapter=flask]{color:#3572a5}.framework-mark[data-adapter=go]{color:#00add8}.workspace{flex:1;min-height:0;display:flex}.tools{gap:var(--space-5);width:236px;padding:var(--space-5);border-right:1px solid var(--border-default);background:var(--bg-subtle);flex-direction:column;flex:none;display:flex;overflow-y:auto}.tool-section{border:0;min-width:0;margin:0;padding:0}.tool-label{margin:0 0 var(--space-2);color:var(--cloud-6);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:0;font-weight:600;line-height:1.7}.swatches{gap:var(--space-2);flex-wrap:wrap;display:flex}.swatch{width:var(--space-8);height:var(--space-8);outline:1px solid var(--border-strong);background:var(--swatch);cursor:pointer;border:3px solid #fff;border-radius:50%;padding:0;transition:outline-color .1s ease-out}.swatch:hover{outline-color:var(--brand)}.swatch.selected{outline:2px solid var(--brand)}.brush-picker{gap:var(--space-1-5);display:grid}.brush-option{grid-template-columns:var(--space-9) minmax(0, 1fr);align-items:center;gap:var(--space-2);min-height:34px;padding:var(--space-1) var(--space-2);border-radius:var(--radius-md);color:var(--text-strong);font-size:var(--text-sm);text-align:left;cursor:pointer;background:#ffffffa8;border:1px solid #11181c14;display:grid;position:relative}.brush-option:after{width:max(100%, var(--space-12));height:max(100%, var(--space-12));content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.brush-option:hover{color:var(--text-default);background:#fff}.brush-option.selected{background:var(--cloud-1);color:var(--cloud-8);outline:2px solid var(--cloud-6);outline-offset:-2px;border-color:#0057ff47}.brush-sample{width:var(--space-8);height:var(--space-4);color:currentColor;flex:none;display:block;position:relative}.brush-sample:before{content:"";background:currentColor;border-radius:999px;height:4px;position:absolute;top:50%;left:1px;right:1px;transform:translateY(-50%)rotate(-8deg)}.brush-sample[data-brush=marker]:before{opacity:.58;border-radius:1px;height:7px}.brush-sample[data-brush=calligraphy]:before{border-radius:0;height:5px;transform:translateY(-50%)rotate(-8deg)skew(-28deg)}.brush-sample[data-brush=spray]:before{background:radial-gradient(circle at 12% 62%,currentColor 0 1px,#0000 1.5px),radial-gradient(circle at 28% 32%,currentColor 0 1.5px,#0000 2px),radial-gradient(circle at 45% 58%,currentColor 0 1px,#0000 1.5px),radial-gradient(circle at 62% 38%,currentColor 0 1px,#0000 1.5px),radial-gradient(circle at 78% 64%,currentColor 0 1.5px,#0000 2px),radial-gradient(circle at 92% 30%,currentColor 0 1px,#0000 1.5px);height:auto;inset:0;transform:none}.brush-sample[data-brush=pixel]:before{border-radius:0;width:6px;height:6px;top:4px;left:1px;transform:none;box-shadow:5px 0,10px -3px,15px -3px,20px -6px,25px -6px}.width-label{justify-content:space-between;display:flex}.width-label output{color:var(--text-default);font-family:var(--font-mono)}input[type=range]{width:100%;height:3px;accent-color:var(--brand);cursor:pointer;margin:11px 0 0}.sticker-hint{margin:calc(-1 * var(--space-1)) 0 var(--space-2-5);color:var(--text-strong);font-size:var(--text-xs);line-height:var(--leading-body)}.sticker-grid{gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.sticker-size-label{margin-top:var(--space-3);justify-content:space-between;display:flex}.sticker-size-label output{color:var(--text-default);font-family:var(--font-mono)}.sticker-button{min-width:0;height:76px;padding:var(--space-1);border-radius:var(--radius-md);cursor:grab;background:#ffffffb8;border:1px solid #11181c14;place-items:center;display:grid;position:relative;overflow:hidden}.sticker-button:hover{background:#fff}.sticker-button[aria-pressed=true]{border-color:var(--cloud-6);background:var(--cloud-1);outline:2px solid var(--cloud-6);outline-offset:-2px}.sticker-button.dragging{opacity:.6;transform:scale(.96)}.sticker-button.just-unlocked{animation:.6s ease-out sticker-unlock}@keyframes sticker-unlock{0%{opacity:0;transform:scale(.72)rotate(-6deg)}55%{opacity:1;transform:scale(1.08)rotate(2deg)}to{opacity:1;transform:scale(1)rotate(0)}}.sticker-button img{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.admin-panel{gap:var(--space-2-5);padding-top:var(--space-4);border-top:1px solid #11181c14;margin-top:auto;display:grid}.admin-panel[hidden]{display:none}.admin-panel .tool-label{margin-bottom:0}.admin-tool-button,.admin-clear-button{min-height:34px;padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-md);font-size:var(--text-sm);cursor:pointer;font-weight:500}.admin-tool-button{background:#ffffffb3;border:1px solid #11181c1f}.admin-tool-button:hover{background:#fff}.admin-tool-button[aria-pressed=true]{border-color:var(--cloud-6);background:var(--cloud-1);color:var(--cloud-6)}.admin-size-label{margin-top:var(--space-1);justify-content:space-between;display:flex}.admin-size-label output{color:var(--text-default);font-family:var(--font-mono);font-variant-numeric:tabular-nums}.admin-clear-button{color:#991b1b;background:#fee2e294;border:1px solid #b91c1c3d}.admin-clear-button:hover{background:#fecacab8}.canvas-frame{background-image:var(--dot-grid), linear-gradient(158deg, var(--cloud-2) 0%, var(--cloud-1) 46%, #fff 100%);background-size:var(--dot-gap) var(--dot-gap), cover;flex:1;min-width:0;position:relative;overflow:hidden}.canvas-grid{background-image:var(--dot-grid);background-size:var(--dot-gap) var(--dot-gap);pointer-events:none;position:absolute;inset:0}#drawing-surface{z-index:2;cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:absolute;inset:0}.sticker-layer,.remote-cursor-layer{pointer-events:none;position:absolute;inset:0;overflow:hidden}.sticker-layer{z-index:3}.remote-cursor-layer{z-index:4}.canvas-sticker{object-fit:contain;width:13.2%;height:17.15%;display:block;position:absolute;transform:translate(-50%,-50%)}.remote-cursor{width:28px;height:28px;color:var(--slate-12);will-change:left, top;background:#fff;border:1px solid #11181c24;border-radius:50%;place-items:center;display:grid;position:absolute;transform:translate(-50%,-50%);box-shadow:0 1px 3px #11181c1f}.remote-cursor svg{display:block}.remote-cursor[data-adapter=laravel],.remote-cursor[data-adapter=rails]{color:#f53003}.remote-cursor[data-adapter=flask]{color:#3572a5}.remote-cursor[data-adapter=go]{color:#00add8}.eraser-preview{width:var(--eraser-preview-width,0);height:var(--eraser-preview-height,0);background:#fff3;border:1px dashed #11181c8c;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.canvas-frame[data-tool=sticker] #drawing-surface{cursor:copy}.canvas-frame[data-tool=eraser] #drawing-surface{cursor:none}.canvas-frame[data-drop-target=true]:after{z-index:6;inset:var(--space-2);border:2px dashed var(--cloud-6);border-radius:var(--radius-lg);pointer-events:none;content:"";position:absolute}.empty-prompt{z-index:1;gap:var(--space-1-5);color:var(--text-strong);text-align:center;pointer-events:none;opacity:1;transition:opacity .4s ease-out;display:grid;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.empty-prompt span{color:var(--text-default);font-size:var(--text-2xl);letter-spacing:-.01em;font-weight:500;line-height:var(--leading-heading)}.empty-prompt small{color:var(--text-strong);font-size:var(--text-sm)}.canvas-frame[data-ink=true] .empty-prompt,.canvas-frame[data-drawn=true] .empty-prompt{opacity:0}.canvas-meta{z-index:5;right:var(--space-4);bottom:var(--space-3);gap:var(--space-1-5);pointer-events:none;justify-items:end;display:grid;position:absolute}.server-presence{gap:var(--space-1-5);max-width:min(520px, calc(100vw - var(--space-8)));padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-lg);background:#ffffffd1;border:1px solid #11181c14;justify-items:end;display:grid}.server-presence-label{color:var(--text-strong);font-family:var(--font-mono);font-size:var(--text-base);margin:0}.server-presence-list{justify-content:flex-end;gap:var(--space-1-5) var(--space-2-5);flex-wrap:wrap;margin:0;padding:0;list-style:none;display:flex}.server-presence-item{align-items:center;gap:var(--space-1-5);font-family:var(--font-mono);font-size:var(--text-base);white-space:nowrap;display:inline-flex}.server-presence-name{color:var(--text-strong)}.server-presence-count{min-width:var(--space-6);padding:var(--space-0-5) var(--space-1-5);border-radius:var(--radius-sm);color:var(--text-strong);font-variant-numeric:tabular-nums;text-align:center;background:#11181c0f}.server-presence-item[data-active=true] .server-presence-count{color:var(--slate-12);background:#29a38329}.confetti-layer{z-index:40;pointer-events:none;position:fixed;inset:0;overflow:hidden}.confetti-piece{top:-18px;left:var(--confetti-left);background:var(--confetti-color);opacity:0;width:8px;height:14px;animation:confetti-fall var(--confetti-duration) cubic-bezier(.2, .65, .35, 1) var(--confetti-delay) forwards;border-radius:2px;position:absolute}@keyframes confetti-fall{0%{opacity:0;transform:translateY(-4vh)rotate(0)}10%{opacity:1}to{opacity:1;transform:translate3d(var(--confetti-drift), 108vh, 0) rotate(var(--confetti-spin))}}.credit-toast{z-index:50;left:var(--space-4);bottom:var(--space-4);align-items:end;gap:var(--space-4);width:min(380px, calc(100vw - (2 * var(--space-4))));padding:var(--space-4);border-radius:var(--radius-xl);background:#fff;animation:.42s cubic-bezier(.2,.8,.2,1) credit-toast-in;display:flex;position:fixed;box-shadow:0 0 0 1px #11181c14,0 16px 40px #11181c2e}.credit-toast-copy{gap:var(--space-0-5);flex:1;min-width:0;display:grid}.credit-toast-kicker,.credit-toast-title,.credit-toast-description{margin:0}.credit-toast-kicker{color:var(--cloud-6);font-family:var(--font-mono);font-size:var(--text-xs);text-transform:uppercase;font-weight:600}.credit-toast-title{color:var(--text-default);font-size:var(--text-lg);font-weight:600}.credit-toast-description{color:var(--text-strong);font-size:var(--text-base);line-height:var(--leading-body)}.credit-toast-code{margin-top:var(--space-1);padding:var(--space-2) var(--space-2-5);border-radius:var(--radius-md);background:var(--slate-2);color:var(--cloud-9);font-family:var(--font-mono);font-size:var(--text-base);overflow-wrap:anywhere;-webkit-user-select:all;user-select:all;font-weight:600}.credit-toast-dismiss{min-height:34px;padding:var(--space-1-5) var(--space-2-5);border-radius:var(--radius-md);background:var(--cloud-2);color:var(--cloud-8);font-size:var(--text-sm);cursor:pointer;border:0;flex:none;font-weight:500}.credit-toast-dismiss:hover{background:var(--cloud-3)}@keyframes credit-toast-in{0%{opacity:0;transform:translateY(var(--space-3)) scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@media (max-width:900px){.topbar{padding-inline:var(--space-4);flex-wrap:wrap}.workspace{flex-direction:column}.tools{align-items:center;gap:var(--space-4);width:100%;padding:var(--space-3) var(--space-4);border-right:0;border-bottom:1px solid var(--border-default);flex-flow:wrap;overflow-x:auto}.swatches{flex-wrap:nowrap}.tool-section:first-of-type{flex:1}.brush-section{flex:1 0 100%}.brush-picker{gap:var(--space-2);padding:var(--space-0-5);scrollbar-width:none;display:flex;overflow-x:auto}.brush-picker::-webkit-scrollbar{display:none}.brush-option{grid-template-columns:var(--space-9) auto;min-width:108px;min-height:44px;font-size:var(--text-base);flex:none}.sticker-section{flex:1 0 100%}.sticker-hint{display:none}.sticker-grid{scrollbar-width:none;grid-template-rows:66px;grid-template-columns:none;grid-auto-columns:76px;grid-auto-flow:column;overflow-x:auto}.sticker-grid::-webkit-scrollbar{display:none}.sticker-button{height:66px}.admin-panel{border-top:0;flex:1 0 100%;grid-template-columns:minmax(100px,auto) minmax(140px,1fr) minmax(150px,auto);align-items:end;margin-top:0;padding-top:0}.admin-panel>.tool-label:first-child{grid-column:1/-1}.canvas-frame{flex:1}}@media (max-width:640px){.powered-by{display:none}.topbar{gap:var(--space-1-5)}.server-tabs{width:100%}.server-presence-list{grid-template-columns:repeat(2,max-content);display:grid}.admin-panel{grid-template-columns:1fr}.admin-panel>.tool-label:first-child{grid-column:auto}.empty-prompt span{font-size:var(--text-xl)}.credit-toast{flex-direction:column;align-items:stretch}.credit-toast-dismiss{width:100%;min-height:44px;font-size:var(--text-base)}}@media (min-width:641px){.server-tabs-list a{min-height:32px;padding:var(--space-1-5) var(--space-2-5);font-size:var(--text-sm)}.server-presence-label,.server-presence-item{font-size:var(--text-xs)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important}.sticker-button.just-unlocked,.credit-toast{animation:none}}