.notebook{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--paper);color:var(--ink)}.notebook:before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.4;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E")}.notebook:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 12% -10%,oklch(100% .05 80 / .55),transparent 58%),radial-gradient(140% 120% at 90% 115%,oklch(45% .05 60 / .14),transparent 60%)}.notebook__header{position:relative;z-index:2;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--gutter);padding:clamp(1rem,2.4vh,2rem) var(--gutter) .75rem;border-bottom:1px solid var(--paper-edge)}.notebook__problem{min-width:0;flex:1}.notebook__problem-label{font-size:var(--text-micro);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#885c54}.notebook__problem-text{margin:.25rem 0 0;font-family:var(--font-hand-alt);font-size:clamp(1.125rem,.9rem + .7vw,1.5rem);line-height:1.35;color:var(--ink);overflow-wrap:anywhere}.notebook__meta{display:flex;flex-direction:column;align-items:flex-end;gap:.4rem;flex:none}.notebook .notebook__status{color:#333843;background:#382b1d17}.notebook__page{position:relative;z-index:1;flex:1;overflow-y:auto;overflow-x:hidden;padding:0 var(--gutter) 30vh;scrollbar-width:thin;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule-gap) - 1px),var(--rule) calc(var(--rule-gap) - 1px),var(--rule) var(--rule-gap)),linear-gradient(to right,transparent 3.9rem,var(--rule-margin) 3.9rem,var(--rule-margin) calc(3.9rem + 1px),transparent calc(3.9rem + 1px))}.notebook__lines{margin:0;padding:var(--rule-gap) 0 0 5.25rem;list-style:none}.notebook__line{font-family:var(--font-hand);font-size:var(--text-hand);font-weight:500;line-height:var(--rule-gap);color:var(--ink);overflow-wrap:break-word;transform:translateY(var(--drift, 0)) rotate(var(--tilt, 0deg));transform-origin:left center}.notebook__word{display:inline-block;white-space:pre}.ink{animation:ink-in var(--ink-dur, 70ms) var(--ease-out-expo) backwards}@keyframes ink-in{0%{opacity:0;filter:blur(1.4px)}to{opacity:1;filter:blur(0)}}.notebook__nib{display:inline-block;width:.14em;height:.78em;margin-left:.06em;vertical-align:-.06em;border-radius:1px;background:var(--ink);animation:nib-blink 1.05s steps(1,end) infinite}@keyframes nib-blink{0%,55%{opacity:1}56%,to{opacity:.12}}.notebook__placeholder{padding:calc(var(--rule-gap) * 2) 0 0 5.25rem;font-family:var(--font-hand-alt);font-size:clamp(1.1rem,.9rem + .6vw,1.4rem);color:var(--ink-soft);max-width:42ch}.notebook__error{margin:var(--rule-gap) 0 0 5.25rem;padding:.75rem 1rem;max-width:48ch;border-left:3px solid var(--alarm);background:#ec5c5514;font-size:var(--text-sm);color:#822c28;border-radius:0 var(--radius-sm) var(--radius-sm) 0}@media(prefers-reduced-motion:reduce){.ink,.notebook__nib{animation:none}}.notebook--compact{--text-hand: 20px;--rule-gap: 1.75rem;--gutter: 1rem}.notebook--compact .notebook__lines,.notebook--compact .notebook__placeholder,.notebook--compact .notebook__error{padding-left:3.25rem;margin-left:0}.notebook--compact .notebook__page{background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--rule-gap) - 1px),var(--rule) calc(var(--rule-gap) - 1px),var(--rule) var(--rule-gap)),linear-gradient(to right,transparent 2.25rem,var(--rule-margin) 2.25rem,var(--rule-margin) calc(2.25rem + 1px),transparent calc(2.25rem + 1px))}.notebook--compact .notebook__problem-text{font-size:1rem;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.room{min-height:100dvh;display:grid;place-items:center;padding:var(--gutter);background:radial-gradient(90% 70% at 15% 0%,oklch(30% .03 265),transparent 62%),radial-gradient(70% 60% at 100% 100%,oklch(28% .05 72 / .5),transparent 60%),var(--slate-900)}.room__card{width:min(34rem,100%);padding:clamp(1.75rem,4vw,3rem);border-radius:var(--radius-lg);border:1px solid oklch(100% 0 0 / .07);background:linear-gradient(#ffffff0b,#ffffff04);box-shadow:0 40px 80px -50px #000000e6;backdrop-filter:blur(14px)}.room__eyebrow{margin:0 0 1.75rem;font-size:var(--text-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--lamp-dim)}.room__title{margin:0 0 .75rem;font-size:clamp(1.6rem,1.1rem + 2vw,2.4rem);font-weight:600;line-height:1.12;letter-spacing:-.022em;text-wrap:balance}.room__body{margin:0 0 2rem;max-width:38ch;color:var(--slate-200);opacity:.72;line-height:1.55}.room__cta{width:100%;justify-content:center;padding-block:.85rem}.room__code-entry{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1.5rem}.room__code-box{aspect-ratio:3 / 4;width:100%;border:1px solid oklch(100% 0 0 / .12);border-radius:var(--radius-md);background:#00000040;color:var(--slate-050);font-size:clamp(2rem,1rem + 4vw,3rem);font-weight:600;font-variant-numeric:tabular-nums;text-align:center;text-transform:uppercase;transition:border-color var(--dur-fast) linear,background-color var(--dur-fast) linear,transform var(--dur-fast) var(--ease-out-expo)}.room__code-box:focus{outline:none;border-color:var(--lamp);background:#0006;transform:translateY(-2px)}.room__hint{margin:1rem 0 0;font-size:var(--text-sm);color:var(--slate-500)}.room__connection{display:flex;align-items:center;gap:.5rem;margin:1.75rem 0 0;padding-top:1.25rem;border-top:1px solid oklch(100% 0 0 / .07);font-size:var(--text-micro);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--slate-500)}.room__connection[data-online=true] .status__dot{background:var(--live)}.room__connection[data-online=false] .status__dot{background:var(--lamp);animation:pulse 1.4s var(--ease-in-out) infinite}.room__error{margin:1rem 0 0;padding:.7rem .9rem;border-left:3px solid var(--alarm);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:#ec5c551f;font-size:var(--text-sm);color:oklch(88% .07 26)}.board{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--paper)}.board .notebook{flex:1;min-height:0}.board__footer{position:relative;z-index:2;display:flex;align-items:center;gap:1.25rem;padding:.6rem var(--gutter);border-top:1px solid var(--paper-edge);background:#f3eee4;color:#505561}.board__footer .label{color:#505561}.board__peers{display:inline-flex;align-items:center;gap:.4rem;margin-left:auto;font-size:var(--text-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase}.board__peers[data-online=true] .status__dot{background:var(--live)}.board__peers[data-online=false] .status__dot{background:#989fab}.board__offline{font-size:var(--text-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--alarm)}.peek{position:fixed;top:0;right:0;bottom:0;z-index:20;width:min(30rem,88vw);transform:translate(101%);transition:transform var(--dur-slow) var(--ease-out-expo);will-change:transform;box-shadow:-30px 0 70px -40px #000000d9;pointer-events:none}.peek[data-open=true]{transform:translate(0)}.peek__inner{height:100%;overflow:hidden;border-left:1px solid var(--paper-edge);background:var(--paper);padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.peek__trigger{position:fixed;right:calc(env(safe-area-inset-right) + clamp(1rem,2.5vw,2rem));bottom:calc(env(safe-area-inset-bottom) + clamp(1rem,2.5vw,2rem));z-index:30;display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.15rem;border-radius:999px;background:var(--slate-800);color:var(--slate-050);box-shadow:0 20px 44px -22px #000000e6,inset 0 0 0 1px #ffffff14;touch-action:none;transition:transform var(--dur-normal) var(--ease-out-expo),background-color var(--dur-fast) linear}.peek__trigger:hover{transform:translateY(-2px)}.peek__trigger[data-open=true]{transform:translate(calc(-1*min(30rem,88vw))) scale(.94);background:var(--lamp);color:var(--slate-900)}.peek__trigger[data-active=true][data-open=false]:after{content:"";position:absolute;inset:-4px;border-radius:inherit;border:2px solid var(--live);opacity:.55;animation:peek-ring 2s var(--ease-in-out) infinite;pointer-events:none}@keyframes peek-ring{0%,to{opacity:.15;transform:scale(1)}50%{opacity:.6;transform:scale(1.035)}}.peek__trigger-glyph{display:inline-flex}.peek__trigger-label{font-size:var(--text-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase}@media(max-width:560px){.peek__trigger-label{display:none}.peek__trigger{padding:.9rem}}.pad{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--slate-900);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);touch-action:none;user-select:none;-webkit-user-select:none}.pad__bar{display:flex;align-items:center;gap:clamp(.75rem,2vw,1.75rem);padding:.7rem clamp(.75rem,2vw,1.25rem);border-bottom:1px solid oklch(100% 0 0 / .07);background:var(--slate-800)}.pad__identity{display:flex;align-items:baseline;gap:.55rem;flex:none}.pad__code{font-size:1.35rem;font-weight:700;letter-spacing:.16em;font-variant-numeric:tabular-nums;color:var(--lamp)}.pad__peer,.pad__meta .status{flex:none}.pad__peer{display:inline-flex;align-items:center;gap:.35rem;font-size:var(--text-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-500)}.pad__peer[data-online=true] .status__dot{background:var(--live)}.pad__problem{display:flex;gap:.6rem;flex:1;min-width:0}.pad__input{flex:1;min-width:0;padding:.65rem .9rem;border:1px solid oklch(100% 0 0 / .1);border-radius:var(--radius-md);background:#00000047;font-size:var(--text-base);transition:border-color var(--dur-fast) linear;touch-action:auto;user-select:text;-webkit-user-select:text}.pad__input::placeholder{color:var(--slate-500)}.pad__input:focus{outline:none;border-color:var(--lamp)}.pad__meta{display:flex;align-items:center;gap:.6rem;flex:none}.pad__reset{padding:.5rem .85rem;font-size:var(--text-micro);letter-spacing:.08em;text-transform:uppercase}.pad__error{margin:0;padding:.6rem clamp(.75rem,2vw,1.25rem);background:#ec5c5529;border-bottom:1px solid oklch(66% .18 26 / .35);font-size:var(--text-sm);color:oklch(90% .06 26);cursor:pointer}.pad__surface{position:relative;flex:1;min-height:0;background-color:#f9fafd;background-image:radial-gradient(circle at center,oklch(60% .02 265 / .22) 1px,transparent 1px);background-size:26px 26px}.pad__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.pad__tools{position:absolute;top:50%;left:clamp(.5rem,1.5vw,1rem);z-index:3;transform:translateY(-50%);display:flex;flex-direction:column;gap:2px;padding:4px;border-radius:var(--radius-md);background:#171b21eb;box-shadow:0 18px 40px -26px #000c;backdrop-filter:blur(10px)}.pad__tool{padding:.55rem .7rem;border-radius:var(--radius-sm);font-size:var(--text-micro);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--slate-200);transition:background-color var(--dur-fast) linear,color var(--dur-fast) linear}.pad__tool:hover{background:#ffffff14}.pad__tool[data-selected=true]{background:var(--lamp);color:var(--slate-900)}@media(max-width:900px){.pad__bar{flex-wrap:wrap}.pad__problem{order:3;flex-basis:100%}}.chooser{min-height:100dvh;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,5vh,3.5rem);padding:clamp(1.5rem,5vw,5rem);background:radial-gradient(80% 60% at 0% 0%,oklch(30% .03 265),transparent 60%),var(--slate-900)}.chooser__head{max-width:46ch}.chooser__eyebrow{margin:0 0 1.5rem;font-size:var(--text-micro);font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--lamp-dim)}.chooser__title{margin:0 0 .9rem;font-size:clamp(2rem,1.2rem + 3.4vw,3.6rem);font-weight:600;line-height:1.04;letter-spacing:-.03em}.chooser__body{margin:0;color:var(--slate-200);opacity:.68;line-height:1.6}.chooser__grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));max-width:62rem}.chooser__card{display:grid;gap:.5rem;padding:clamp(1.25rem,3vw,2rem);text-align:left;border:1px solid oklch(100% 0 0 / .08);border-radius:var(--radius-lg);background:linear-gradient(#ffffff0a,#ffffff03);transition:transform var(--dur-normal) var(--ease-out-expo),border-color var(--dur-fast) linear,box-shadow var(--dur-normal) var(--ease-out-expo)}.chooser__card:hover,.chooser__card:focus-visible{transform:translateY(-4px);border-color:var(--lamp);box-shadow:0 28px 60px -40px var(--lamp)}.chooser__card:active{transform:translateY(-1px)}.chooser__card-index{font-size:var(--text-micro);font-weight:700;letter-spacing:.22em;color:var(--lamp-dim)}.chooser__card-title{font-size:var(--text-lg);font-weight:600;letter-spacing:-.012em}.chooser__card-body{color:var(--slate-200);opacity:.64;font-size:var(--text-sm);line-height:1.55}:root{--paper: oklch(97.2% .016 84);--paper-edge: oklch(92% .02 82);--paper-shadow: oklch(30% .03 70 / .22);--rule: oklch(80% .045 242 / .55);--rule-margin: oklch(68% .13 24 / .5);--ink: oklch(38% .021 265);--ink-soft: oklch(52% .02 265 / .7);--slate-900: oklch(18% .012 265);--slate-800: oklch(23% .014 265);--slate-700: oklch(30% .016 265);--slate-500: oklch(66% .014 265);--slate-200: oklch(88% .008 265);--slate-050: oklch(97% .004 265);--lamp: oklch(78% .15 72);--lamp-dim: oklch(62% .12 72);--live: oklch(74% .16 152);--alarm: oklch(66% .18 26);--font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-hand: "Caveat", "Kalam", "Bradley Hand", cursive;--font-hand-alt: "Kalam", "Caveat", cursive;--text-micro: .6875rem;--text-sm: .8125rem;--text-base: .9375rem;--text-lg: 1.125rem;--text-code: clamp(2.75rem, 1.5rem + 6vw, 5.5rem);--text-hand: clamp(28px, 1.4vw + 24px, 32px);--rule-gap: 2.375rem;--gutter: clamp(1rem, .6rem + 1.6vw, 2.5rem);--radius-sm: .375rem;--radius-md: .75rem;--radius-lg: 1.25rem;--dur-fast: .14s;--dur-normal: .26s;--dur-slow: .42s;--ease-out-expo: cubic-bezier(.16, 1, .3, 1);--ease-in-out: cubic-bezier(.65, 0, .35, 1)}*,*:before,*:after{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:var(--font-ui);font-size:var(--text-base);color:var(--slate-050);background:var(--slate-900);-webkit-font-smoothing:antialiased;overscroll-behavior:none;-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}input,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--lamp);outline-offset:3px;border-radius:var(--radius-sm)}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.label{font-size:var(--text-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--slate-500)}.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1.125rem;border-radius:var(--radius-md);background:var(--slate-700);font-size:var(--text-sm);font-weight:600;letter-spacing:.01em;transition:transform var(--dur-fast) var(--ease-out-expo),background-color var(--dur-fast) linear,box-shadow var(--dur-fast) linear}.btn:hover:not(:disabled){background:var(--slate-500)}.btn:active:not(:disabled){transform:translateY(1px) scale(.985)}.btn:disabled{opacity:.42;cursor:not-allowed}.btn--primary{background:var(--lamp);color:var(--slate-900);box-shadow:0 6px 20px -8px var(--lamp)}.btn--primary:hover:not(:disabled){background:oklch(84% .15 72)}.status{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem .3rem .5rem;border-radius:999px;background:#ffffff0f;font-size:var(--text-micro);font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--slate-200)}.status__dot{width:7px;height:7px;border-radius:50%;background:var(--slate-500);flex:none}.status[data-state=thinking] .status__dot{background:var(--lamp);animation:pulse 1.4s var(--ease-in-out) infinite}.status[data-state=writing] .status__dot{background:var(--live);animation:pulse .7s var(--ease-in-out) infinite}.status[data-state=error] .status__dot{background:var(--alarm)}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}