:root{--canvas: #fafaf7;--hairline: #eae8e1;--hairline-strong: #dfdcd3;--text: #2a2a27;--text-2: #8a8880;--text-3: #b1aea5;--mat: #f1f0ea;--agent: #7466e8;--agent-soft: rgba(116, 102, 232, .14);--rec: #d64532;--danger: #c9543d;--chip: rgba(255, 255, 255, .97);--chip-edge: rgba(40, 36, 28, .1);--chip-shadow: 0 12px 30px -16px rgba(40, 36, 28, .35), 0 2px 6px -2px rgba(40, 36, 28, .12);--chip-hover: rgba(40, 36, 28, .06);--font: "Inter Variable", Inter, -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;--ease: cubic-bezier(.22, .8, .26, 1);--gap: 8px;--sheet-r: 12px;--sheet-shadow: 0 0 0 .5px rgba(28, 52, 60, .16), 0 1px 2px rgba(28, 52, 60, .07), 0 2px 7px -3px rgba(28, 52, 60, .16);--lab-hover: rgba(255, 255, 255, .42);--lab-selected: rgba(255, 255, 255, .78);--lab-text-2: #4f4d47;--lab-text-3: #6b6962;--card-r: 28px;--card-shadow: 0 0 0 2px rgba(40, 36, 28, .07), 0 2px 2px rgba(40, 36, 28, .08), 0 8px 16px -4px rgba(40, 36, 28, .1), 0 44px 80px -28px rgba(40, 36, 28, .38), 0 36px 28px -28px rgba(40, 36, 28, .16);--mat-shadow: 0 0 0 2px rgba(40, 36, 28, .08), 0 2px 4px rgba(40, 36, 28, .06), 0 24px 56px -32px rgba(40, 36, 28, .34);--mat-shadow-up: 0 0 0 2px rgba(40, 36, 28, .08), 0 4px 8px rgba(40, 36, 28, .08), 0 68px 112px -36px rgba(40, 36, 28, .4);--mat-bg: #f1efea;--mat-line: rgba(40, 36, 28, .05);--mat-pic-shadow: 0 0 0 2px rgba(0, 0, 0, .05), 0 12px 28px -12px rgba(40, 36, 28, .38);--player-bg: #1c1b19;--player-line: rgba(255, 255, 255, .05);--player-pic-shadow: 0 0 0 2px rgba(255, 255, 255, .07), 0 16px 36px -16px rgba(0, 0, 0, .6);color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font:13px/1.4 var(--font);color:var(--text);background:#e9ebe8;-webkit-font-smoothing:antialiased;overflow:hidden}a{color:inherit;text-decoration:none}a,button,.can-open{cursor:pointer}button{font:inherit;color:inherit;border:0;background:transparent;padding:0}:focus-visible{outline:2px solid var(--agent);outline-offset:2px}.ground{position:relative;height:100%;isolation:isolate}.ground:before,.ground:after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none}.ground:before{inset:-60px;background:url(/assets/coast.jpg) 50% 100% / cover no-repeat;filter:blur(36px) saturate(1.12)}.ground:after{background:#fafaf799}.signed-out{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;padding:24px;text-align:center;color:var(--lab-text-2);font-size:15px}.signed-out p{margin:0;max-width:34ch}.app{display:flex}.sidebar{flex:none;width:232px;display:flex;flex-direction:column;padding:14px 10px 12px;gap:2px;color:var(--text)}.wordmark{display:flex;align-items:center;gap:8px;padding:4px 8px 14px;font-size:15px;font-weight:640;letter-spacing:-.01em;color:#45434a}.wordmark-jar{width:18px;height:18px;border-radius:6px 6px 8px 8px;background:radial-gradient(circle at 35% 30%,#fff 0 22%,transparent 23%),linear-gradient(160deg,#9b90f2,var(--agent));box-shadow:inset 0 0 0 1px #ffffff59,0 1px 2px #2a2a272e}.nav-row{display:flex;align-items:flex-start;gap:8px;min-height:30px;padding:6px 8px;border-radius:8px;color:var(--lab-text-2);transition:background-color 90ms var(--ease)}.nav-row:hover{background:var(--lab-hover)}.nav-row.is-active{background:var(--lab-selected);color:var(--text);box-shadow:0 1px 2px #2a2a2712,inset 0 0 0 .5px #fffc}.nav-glyph{flex:none;width:18px;display:grid;place-items:center;height:18px;font-size:14px}.nav-words{min-width:0;display:flex;flex-direction:column;gap:1px;padding-top:1px}.nav-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}.nav-working{display:flex;align-items:center;gap:5px;color:color-mix(in oklab,var(--agent) 82%,var(--text));font-size:11.5px;font-weight:520;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.side-list{display:flex;flex-direction:column;gap:2px;margin-top:10px;overflow-y:auto;min-height:0;flex:1}.sign-out{align-self:flex-start;padding:6px 8px;border-radius:8px;color:var(--lab-text-3)}.sign-out:hover{background:var(--lab-hover);color:var(--text)}.sheet{position:relative;flex:1;min-width:0;margin:var(--gap) var(--gap) var(--gap) 0;border-radius:var(--sheet-r);background:var(--canvas);box-shadow:var(--sheet-shadow);overflow:clip}@media(max-width:720px){.sidebar{display:none}.projects-page{padding:20px 16px 32px}.sheet{margin-left:var(--gap)}}.page-note{position:absolute;inset:0;display:grid;place-content:center;padding:24px;color:var(--text-2);font-size:14px;text-align:center;pointer-events:none}.page-note a{pointer-events:auto;color:var(--agent)}.projects-page{height:100%;overflow-y:auto;padding:28px 32px 40px}.projects-page h1{margin:0 0 20px;font-size:20px;font-weight:640;letter-spacing:-.01em}.projects-page .page-note{position:static}.project-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px}.project-card{display:flex;flex-direction:column;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #28241c12,0 2px 2px #28241c0d,0 18px 36px -22px #28241c52;overflow:hidden;transition:box-shadow .14s var(--ease),translate .14s var(--ease)}.project-card:hover{translate:0 -2px;box-shadow:0 0 0 1px #28241c1a,0 4px 8px #28241c0f,0 26px 48px -24px #28241c66}.project-card.is-working{box-shadow:0 0 0 1.5px color-mix(in oklab,var(--agent) 72%,transparent),0 18px 36px -22px #28241c52}.project-cover{aspect-ratio:16 / 10;margin:8px 8px 0;border-radius:10px;background:var(--mat-bg);box-shadow:inset 0 0 0 1px var(--mat-line);display:grid;place-items:center;overflow:hidden}.project-cover{position:relative}.project-cover img{position:absolute;inset:0;margin:auto;max-width:78%;max-height:82%;object-fit:contain;border-radius:6px;box-shadow:var(--mat-pic-shadow)}.project-cover-glyph{font-size:34px;opacity:.8}.project-foot{padding:10px 14px 13px;display:flex;flex-direction:column;gap:2px}.project-name{display:flex;gap:6px;font-size:13.5px;font-weight:580;white-space:nowrap;overflow:hidden}.project-name>span:last-child{overflow:hidden;text-overflow:ellipsis}.project-meta{display:flex;align-items:center;gap:5px;color:var(--text-2);font-size:12px}.project-meta.is-busy{color:color-mix(in oklab,var(--agent) 82%,var(--text));font-weight:520}.pixels{flex:none;display:inline-grid;grid-template-columns:3px 3px;gap:1px;color:var(--agent)}.pixels>i{width:3px;height:3px;background:currentColor;animation:px 1.2s steps(1) infinite}.pixels>i:nth-child(2){animation-delay:.3s}.pixels>i:nth-child(4){animation-delay:.6s}.pixels>i:nth-child(3){animation-delay:.9s}@keyframes px{0%{opacity:1}25%{opacity:.25}75%{opacity:.6}}.project-page{position:absolute;inset:0}.chip{display:inline-flex;align-items:center;height:36px;padding:0 14px;border-radius:18px;background:var(--chip);box-shadow:0 0 0 1px var(--chip-edge),var(--chip-shadow);white-space:nowrap}.top-chips{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:8px;pointer-events:none;z-index:5}.top-chips>*{pointer-events:auto}.crumbs{gap:7px;min-width:0}.crumb{color:var(--text-2)}.crumb:hover{color:var(--text)}.crumb-sep{color:var(--text-3)}.crumb-here{font-weight:580;overflow:hidden;text-overflow:ellipsis}.working-chip{gap:7px;min-width:0;color:color-mix(in oklab,var(--agent) 82%,var(--text));font-weight:540}.working-what{color:var(--text-2);font-weight:450;overflow:hidden;text-overflow:ellipsis;max-width:40ch}.rec-dot{width:7px;height:7px;border-radius:50%;background:var(--rec);animation:rec 1.4s ease-in-out infinite}@keyframes rec{50%{opacity:.35}}.zoom-chip{position:absolute;right:12px;bottom:12px;padding:0 4px;gap:0;z-index:5}.zoom-chip button{min-width:30px;height:28px;border-radius:14px;font-size:15px;color:var(--text-2)}.zoom-chip button:hover{background:var(--chip-hover);color:var(--text)}.zoom-chip .zoom-pct{font-size:12px;min-width:48px;font-variant-numeric:tabular-nums}.canvas{position:absolute;inset:0;overflow:hidden;background-color:var(--canvas);background-image:radial-gradient(circle at center,rgba(42,42,39,.15) .85px,transparent 1.25px);touch-action:none;user-select:none;-webkit-user-select:none;cursor:default}.canvas.is-dragging{cursor:grabbing}.world{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}.board{position:absolute;top:0;left:0}.board>.card{position:absolute;inset:-16px -16px -80px;border-radius:var(--card-r);background:#fff;box-shadow:var(--mat-shadow);transition:box-shadow .14s var(--ease),translate .14s var(--ease)}.board>.mat{position:absolute;inset:0;border-radius:18px;background:var(--mat-bg);box-shadow:inset 0 0 0 2px var(--mat-line);transition:translate .14s var(--ease)}.board>.picture{position:absolute;border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--mat-pic-shadow);transition:translate .14s var(--ease)}.board>.picture>:is(img,video){display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}.picture-wait{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(110deg,#eeece6 30%,color-mix(in oklab,#fff 72%,var(--agent)),#eeece6 70%) 0 0 / 300% 100%;animation:shimmer 1.8s linear infinite}.picture-wait .pixels{scale:calc(3 / var(--z))}@keyframes shimmer{0%{background-position:100% 0}to{background-position:-50% 0}}.board.can-open:hover>:is(.card,.mat,.picture,.cap,.bar,.tag){translate:0 -6px}.board.can-open:hover>.card{box-shadow:var(--mat-shadow-up)}.board.is-working>.card{outline:calc(1.5px / var(--z)) solid color-mix(in oklab,var(--agent) 72%,transparent)}.board>.tag{position:absolute;top:-16px;left:50%;display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:11px;background:var(--agent);color:#fff;font-size:11.5px;font-weight:560;white-space:nowrap;transform-origin:50% 50%;transform:translate(-50%,-50%) scale(calc(1 / var(--cap-z)));transition:translate .14s var(--ease)}.board>.tag .pixels{color:#fff}.board.is-arrived>:is(.card,.mat,.picture,.cap,.bar){animation:rise .42s var(--ease) both}.board.is-arrived>.card{animation:rise .42s var(--ease) both,breathe 1.6s ease-in-out .42s 2}@keyframes rise{0%{opacity:0;translate:0 24px}}@keyframes breathe{50%{box-shadow:0 0 0 calc(4px / var(--z)) var(--agent-soft),var(--mat-shadow)}}.board[data-player]>.mat{background:var(--player-bg);box-shadow:inset 0 0 0 2px var(--player-line)}.board[data-player]>.picture{background:#000;box-shadow:var(--player-pic-shadow)}.board>.bar{position:absolute;left:0;bottom:0;display:flex;align-items:center;gap:8px;width:calc(var(--w) * max(.5,var(--cap-z)) * 1px);height:22px;padding:0 14px 0 12px;color:#fff;transform-origin:0 100%;transform:scale(calc(1/max(.5,var(--cap-z)))) translateY(-9px)}.bar-play{flex:none;display:grid;place-items:center;width:22px;height:22px;padding-left:1px;border-radius:50%;background:#ffffff29}.bar-track{flex:1;height:3px;border-radius:2px;background:#ffffff38}.bar-len{flex:none;color:#ffffffdb;font-size:11px;font-weight:560;font-variant-numeric:tabular-nums}.board>.cap{position:absolute;top:100%;left:0;display:flex;flex-direction:column;gap:1px;width:calc(var(--w) * var(--cap-z) * 1px);padding:9px 4px 2px;white-space:nowrap;transform-origin:0 0;transform:scale(calc(1 / var(--cap-z)));pointer-events:none}.cap-name{overflow:hidden;text-overflow:ellipsis;font-size:13px;font-weight:560;line-height:17px}.cap-meta{overflow:hidden;text-overflow:ellipsis;color:color-mix(in oklab,var(--text-2) 58%,var(--text));font-size:11.5px;line-height:15px;font-variant-numeric:tabular-nums}.canvas.is-far .cap-meta:not(.is-busy){display:none}.cap-meta.is-busy{color:color-mix(in oklab,var(--agent) 82%,var(--text));font-weight:520}.viewer{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:56px 32px 24px;background:#fafaf7c7;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);animation:fade .18s var(--ease) both}@keyframes fade{0%{opacity:0}}.viewer-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;max-width:100%;max-height:100%;min-height:0;height:100%;justify-content:center}.viewer-media{display:block;max-width:100%;max-height:calc(100% - 52px);min-height:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1px #28241c14,0 30px 70px -30px #28241c80;animation:rise .24s var(--ease) both}video.viewer-media{background:#000}.viewer figcaption{display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center}.viewer-name{font-size:14px;font-weight:580}.viewer-meta{color:var(--text-2);font-size:12px}.viewer-close{position:absolute;top:12px;right:12px;width:36px;padding:0;justify-content:center;color:var(--text-2)}.viewer-close:hover{color:var(--text)}.viewer-waiting{display:grid;justify-items:center;gap:12px;color:var(--text-2)}.viewer-waiting img{max-width:min(560px,80vw);max-height:60vh;border-radius:12px;opacity:.7}
