/* The Cutscene account on every page: the chip in the top right corner and the panel under it. Builds on style.css. */ .needs-login[hidden],.cs-pop [hidden]{display:none !important} /* ---- phone only (2026-10-26): every screen gets the phone layout, a phone-wide column with blue edges ---- */ /* the desktop rules in style.css and the other sheets are switched off with "@media not all", the phone ones on with "@media all" */ :root{--edge:var(--primary)} .shell{max-width:480px} /* the corner: the end of the tabs row, on phone and desktop alike */ .tabs{align-items:stretch} .cs-corner{flex:0 0 auto;display:flex;align-items:center;padding:0 .75rem 0 .5rem} .cs-chip{display:inline-flex;align-items:center;height:2rem;max-width:10rem;padding:0 .75rem;border:0;border-radius:var(--radius-pill);background:var(--muted);font-family:var(--font-mono);font-size:var(--text-meta);line-height:1;color:var(--foreground);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .15s,border-color .15s} .cs-chip:hover{background:var(--accent)} .cs-chip.in{background:var(--primary-tint);color:var(--primary)} .cs-chip.in:hover{background:var(--primary-tint-strong)} .cs-chip:focus-visible{outline:none;box-shadow:var(--ring)} .cs-chip-short{display:none} .cs-corner{padding:0 .5rem 0 .25rem} .tabs a{padding-left:.25rem;padding-right:.25rem} .cs-chip.in{width:2rem;padding:0;justify-content:center} .cs-chip.in .cs-chip-full{display:none} .cs-chip.in .cs-chip-short{display:inline;font-weight:600} /* the panel */ .cs-pop{position:absolute;right:.75rem;top:calc(100% + .375rem);width:min(22rem,calc(100vw - 1.5rem));padding:.375rem;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop);z-index:20;font-size:var(--text-ui);color:var(--foreground)} .cs-head{display:flex;align-items:center;gap:.5rem;padding:.5rem .625rem .625rem;border-bottom:1px solid var(--border);margin-bottom:.25rem} .cs-head-link{display:flex;align-items:center;gap:.5rem;flex:1;min-width:0;margin:-.25rem;padding:.25rem;border-radius:var(--radius);color:inherit;text-decoration:none;transition:background-color .15s} .cs-head-link:hover{background:var(--accent)} .cs-head-link:focus-visible{outline:none;box-shadow:var(--ring)} .cs-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-round);background:var(--muted);font-family:var(--font-mono);font-size:var(--text-meta);font-weight:600;color:var(--foreground)} .cs-avatar svg{width:16px;height:16px;color:var(--muted-foreground)} .cs-avatar.plus{background:none;border:2px dashed var(--primary);color:var(--primary);font-size:var(--text-input)} .cs-name{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25} .cs-name b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cs-name small{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cs-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:30px;height:30px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--muted);color:var(--muted-foreground);cursor:pointer;transition:background-color .15s,color .15s} .cs-icon:hover{background:var(--accent);color:var(--foreground)} .cs-k{padding:.375rem .625rem .125rem;font-family:var(--font-mono);font-size:var(--text-micro);letter-spacing:.06em;text-transform:uppercase;color:var(--muted-foreground)} .cs-row{display:flex;align-items:center;gap:.625rem;width:100%;padding:.5rem .625rem;border:0;border-radius:var(--radius);background:none;font:inherit;font-size:var(--text-ui);color:var(--foreground);text-align:left;cursor:pointer} .cs-row:hover{background:var(--accent)} .cs-row.on{background:var(--primary-tint)} .cs-row .cs-avatar{width:28px;height:28px;font-size:var(--text-micro)} .cs-link{text-decoration:none} .cs-face-name{display:flex;flex-direction:column;line-height:1.25;min-width:0} .cs-face-name small{display:inline-flex;align-items:center;gap:.25rem;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)} .cs-face-name small svg{width:12px;height:12px} .cs-nopin{display:grid;gap:.5rem;padding-top:.25rem} .cs-nopin .cs-note{margin:0} .cs-item{position:relative} .cs-item .cs-row{padding-right:2.75rem} .cs-item .cs-x{position:absolute;right:.375rem;top:50%;width:26px;height:26px;transform:translateY(-50%);opacity:.6} .cs-item:hover .cs-x,.cs-item:focus-within .cs-x{opacity:1} .cs-x:hover{color:var(--danger);background:var(--danger-tint)} .cs-form{display:grid;gap:.5rem;padding:.375rem .625rem .625rem} .cs-pinform{padding-left:2.75rem} .cs-row-in{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap} .cs-in{height:2.5rem;min-width:0;width:100%;padding:0 .75rem;border:1px solid var(--border);border-radius:var(--radius-sm);font:inherit;font-size:var(--text-body);color:var(--foreground);background:var(--card)} .cs-in:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring-field)} .cs-pin{width:7em;font-family:var(--font-mono);font-size:18px;letter-spacing:.4em;text-align:center} .cs-pin::placeholder{letter-spacing:0;font-family:var(--font-sans);font-size:var(--text-ui)} .cs-btn,.cs-ghost{display:inline-flex;align-items:center;justify-content:center;height:2.5rem;padding:0 .875rem;border:0;border-radius:var(--radius);font:inherit;font-size:var(--text-ui);font-weight:500;cursor:pointer;white-space:nowrap;transition:background-color .15s,color .15s} .cs-btn{background:var(--primary);color:var(--primary-foreground)} .cs-btn:hover{background:var(--primary-hover)} .cs-ghost{background:var(--muted);color:var(--foreground)} .cs-ghost:hover{background:var(--muted-hover)} .cs-btn:disabled,.cs-ghost:disabled{opacity:.6;cursor:default} .cs-providers{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem} .cs-wide{width:100%} .cs-other{margin:.125rem .625rem .5rem;align-self:start} .cs-stack .cs-providers{margin-bottom:.125rem} .cs-gh{gap:.5rem;text-decoration:none;padding:0 .5rem} .cs-gh svg{flex:0 0 auto} .cs-stack{display:grid;gap:.5rem;padding:.375rem .625rem .5rem} .cs-foot{display:flex;gap:.5rem;padding:.25rem .625rem .375rem} .cs-foot .cs-ghost{height:2.25rem} .cs-err{margin:0;color:var(--danger);font-size:var(--text-meta);min-height:1em} .cs-note{margin:0;font-size:var(--text-small);color:var(--muted-foreground)} .cs-linklike{align-self:start;padding:0;border:0;background:none;font:inherit;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--primary);cursor:pointer} .cs-linklike:hover{text-decoration:underline} .cs-chips{display:flex;flex-wrap:wrap;gap:.375rem;font-size:var(--text-small);color:var(--muted-foreground)} .cs-chips label{position:relative;cursor:pointer} .cs-chips input{position:absolute;opacity:0;width:1px;height:1px} .cs-chips span{display:inline-flex;align-items:center;height:2rem;padding:0 .75rem;border:0;border-radius:var(--radius-pill);font-size:var(--text-ui);color:var(--foreground);background:var(--muted);transition:background-color .15s} .cs-chips label:hover span{background:var(--muted-hover)} .cs-chips input:checked + span{background:var(--primary);color:var(--primary-foreground)} .cs-chips input:focus-visible + span{box-shadow:var(--ring)} .cs-agree{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--text-small);color:var(--muted-foreground)} .cs-agree input{margin:.15rem 0 0;accent-color:var(--primary)} .cs-agree a{color:var(--primary)} .cs-agree a:hover{text-decoration:underline} .cs-working{font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)} .cs-working:not(:empty)::after{content:"…"} .cs-toast{position:fixed;left:50%;bottom:1.25rem;z-index:30;transform:translateX(-50%);padding:.5rem .875rem;border-radius:var(--radius-pill);background:var(--foreground);color:#fff;font-size:var(--text-small);opacity:0;pointer-events:none;transition:opacity .2s} .cs-toast.on{opacity:1} /* ---- page buttons: flat and rounded, like the sidebar's Play the atlas ---- */ .btn-sm,button.btn-sm{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;height:2.5rem;padding:0 1rem;border:0;border-radius:var(--radius);background:var(--primary);color:var(--primary-foreground);font:inherit;font-size:var(--text-body);font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;text-decoration:none;transition:background-color .15s,color .15s} .btn-sm:hover{background:var(--primary-hover);color:var(--primary-foreground)} .btn-sm:focus-visible{outline:none;box-shadow:var(--ring)} .btn-sm:disabled{opacity:.6;cursor:default} .quiet-btn,button.quiet-btn{background:var(--muted);color:var(--foreground)} .quiet-btn:hover{background:var(--muted-hover);color:var(--foreground)} .topbar .btn-sm{height:2rem;padding:0 .75rem;border-radius:var(--radius-sm);font-size:var(--text-ui)} /* sign-in panel, 2026-10-26: GitHub and Google on top, then "or", then email or link */ .cs-top{padding-bottom:.25rem} .cs-or{display:flex;align-items:center;gap:.625rem;padding:.125rem .625rem;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)} .cs-or::before,.cs-or::after{content:"";flex:1;border-top:1px solid var(--border)} .cs-small{font-size:var(--text-meta)} .cs-mono{font-family:var(--font-mono);font-size:var(--text-small)} [data-bot-owner][hidden],[data-front-owner][hidden]{display:none !important} /* The Welcome page's words come from a markdown file he edits at /edit/ (2026-10-26). */ .front{position:relative} .front-edit{position:absolute;top:1rem;right:1rem;font-family:var(--font-mono);font-size:var(--text-meta);color:var(--muted-foreground)} .front-edit[hidden]{display:none} .md > :first-child{margin-top:0} .md h2{margin:1.5rem 0 .25rem;font-size:var(--text-title);font-weight:650;letter-spacing:-.02em} .md h3,.md h4,.md h5,.md h6{margin:1.25rem 0 .25rem;font-size:var(--text-input);font-weight:650} .md p,.md ul,.md ol,.md blockquote,.md pre{margin:.5rem 0 0;font-size:1.125rem;line-height:1.5;color:var(--muted-foreground)} .md h1 + p{margin-top:.375rem} .md ul,.md ol{padding-left:1.25rem} .md li.task{list-style:none;margin-left:-1.25rem} .md a{color:var(--primary)} .md strong{color:var(--foreground)} .md blockquote{padding-left:.875rem;border-left:3px solid var(--border)} .md code{font-family:var(--font-mono);font-size:.875em;background:var(--muted);padding:.1em .3em;border-radius:var(--radius-xs)} .md pre{background:var(--muted);padding:.75rem;border-radius:var(--radius-sm);overflow-x:auto;font-size:var(--text-ui)} .md pre code{background:none;padding:0} .md hr{border:0;border-top:1px solid var(--border);margin:1.25rem 0} .md img{max-width:100%;height:auto;border-radius:var(--radius-sm)} /* desktop touches carried into the phone column (2026-10-26): no line under the name, the wider rail, the roomier footer */ .topbar .brand-sm .tag{display:none} .brand-sm{grid-template-rows:32px} .foot{padding:1rem 1rem 1.5rem} .front-edit{z-index:1} /* the product status tags pop: a tinted label in the status's own color, square-cornered like a tag (2026-10-26) */ .status{padding:.125rem .4375rem;border:1px solid color-mix(in srgb,var(--s) 30%,transparent);border-radius:var(--radius-xs);font-size:var(--text-micro);font-weight:500;color:var(--s-text,var(--muted-foreground));background:color-mix(in srgb,var(--s) 8%,transparent)} .status::before{display:none} .status.live{--s:var(--success);--s-text:var(--success-text);--s-bg:var(--success-tint)} .status.soon{--s:#b7791f;--s-text:var(--warning-text);--s-bg:rgba(183,121,31,.18)} .status.dev{--s:var(--primary);--s-text:var(--primary-hover);--s-bg:var(--primary-tint)} .status.alpha{--s:#0c8599;--s-text:#0a6b7a} .status.coming{--s:var(--subtle);--s-text:var(--muted-foreground)} /* the menu (2026-10-26): a hamburger in the top bar opens the sidebar over the page; the tabs are gone */ .tabs-wrap,.side-fold{display:none} .topbar{position:sticky;top:0;z-index:10;background:var(--card);gap:.5rem} .topbar .brand-sm{margin-right:auto} .menu-btn{display:flex;align-items:center;justify-content:center;flex:0 0 auto;width:2rem;height:2rem;margin:0 0 0 -.375rem;padding:0;border:0;border-radius:var(--radius);background:none;color:var(--foreground);cursor:pointer} .menu-btn:hover{background:var(--accent)} .menu-btn:focus-visible{outline:none;box-shadow:var(--ring)} .menu-btn svg{width:22px;height:22px} .menu-open .side{display:block;position:fixed;top:0;left:0;bottom:0;z-index:40;width:min(18rem,85vw);background:var(--card);border-right:1px solid var(--border);box-shadow:var(--shadow-pop)} .menu-open{overflow:hidden} .menu-scrim{position:fixed;inset:0;z-index:30;background:var(--overlay)} .menu-scrim[hidden]{display:none} /* desktop: the column floats as a soft card on a deeper blue-grey (2026-10-26); phones keep it edge to edge */ @media (min-width:520px){ body{background:var(--backdrop)} .shell{border:0;margin:1.5rem auto;min-height:calc(100svh - 3rem);border-radius:var(--radius-xl);overflow:clip;background:var(--card); box-shadow:0 1px 2px rgba(20,35,70,.06),0 8px 24px rgba(20,35,70,.10),0 24px 64px rgba(20,35,70,.14)} } /* the GitHub or Google picture in the avatar circle (2026-10-26) */ .cs-avatar .cs-pic,.cs-chip-short .cs-pic,.rail .node-in img.cs-pic,.face-av .cs-pic{padding:0;display:block;width:100%;height:100%;border-radius:var(--radius-round);object-fit:cover} .cs-chip-short .cs-pic{width:1.5rem;height:1.5rem} /* Edit copy, the owner's button in the top bar (2026-10-26) */ .topbar .cs-copy{flex:0 0 auto;gap:.375rem} @media (max-width:420px){.topbar .cs-copy span{display:none}.topbar .cs-copy{padding:0 .5rem}} /* the developer's footboard: a notes box above the footer, owner only (2026-10-26) */ .cs-fb{margin:1.5rem 1rem 0;padding:.875rem;border:1px dashed var(--primary);border-radius:var(--radius-lg);background:var(--primary-soft);font-size:var(--text-ui)} .cs-fb-head{display:flex;align-items:center;gap:.5rem;width:100%;margin:0 0 .5rem;padding:0;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer} .cs-fb-head b{font-weight:600} .cs-fb-count{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)} .cs-fb-chev{margin-left:auto;flex:0 0 auto;color:var(--muted-foreground);transition:transform .15s} .cs-fb.folded{padding-top:.625rem;padding-bottom:.625rem} .cs-fb.folded .cs-fb-head{margin-bottom:0} .cs-fb.folded .cs-fb-chev{transform:rotate(-90deg)} .cs-fb.folded .cs-fb-body{display:none} .cs-fb-thumb{display:block;margin-top:.375rem;width:max-content;max-width:100%} .cs-fb-thumb img{display:block;max-width:100%;max-height:160px;border-radius:var(--radius-sm);border:1px solid var(--border)} .cs-fb-pic{display:flex;align-items:flex-start;gap:.5rem;margin-top:.5rem} .cs-fb-pic[hidden]{display:none} .cs-fb-pic img{max-width:calc(100% - 34px);max-height:140px;border-radius:var(--radius-sm);border:1px solid var(--border)} .cs-fb-head small{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground)} .cs-fb-list{list-style:none;margin:0 0 .625rem;padding:0;display:flex;flex-direction:column;gap:.375rem} .cs-fb-list li{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem .5rem .5rem .625rem;border-radius:var(--radius);background:var(--card);border:1px solid var(--border)} .cs-fb-list li.done .cs-fb-text{text-decoration:line-through;color:var(--muted-foreground)} .cs-fb-list .cs-fb-empty{border:0;background:none;padding:0;color:var(--muted-foreground)} .cs-fb-tag{flex:0 0 auto;padding:.125rem .375rem;border-radius:var(--radius-xs);font-family:var(--font-mono);font-size:var(--text-micro);text-transform:uppercase;letter-spacing:.04em;background:var(--muted);color:var(--foreground)} .cs-fb-tag.copy{background:var(--primary-tint);color:var(--primary)} .cs-fb-tag.style{background:rgba(224,59,80,.1);color:var(--danger)} .cs-fb-tag.feature{background:var(--success-tint);color:var(--success-text)} .cs-fb-text{flex:1;min-width:0;line-height:1.4;overflow-wrap:anywhere} .cs-fb-text small{display:block;font-family:var(--font-mono);font-size:var(--text-micro);color:var(--muted-foreground);margin-top:.125rem} .cs-fb-act{flex:0 0 auto;width:26px;height:26px;padding:0;border:0;border-radius:var(--radius-pill);background:var(--muted);color:var(--muted-foreground);font-size:var(--text-small);line-height:1;cursor:pointer} .cs-fb-act:hover{background:var(--accent);color:var(--foreground)} .cs-fb-form textarea{display:block;width:100%;box-sizing:border-box;padding:.5rem .625rem;border:1px solid var(--border);border-radius:var(--radius);background:var(--card) repeating-linear-gradient(transparent 0 calc(1.5em - 1px),var(--primary-tint) calc(1.5em - 1px) 1.5em) local;background-position:0 .5rem;font:inherit;line-height:1.5em;color:var(--foreground);resize:vertical} .cs-fb-form textarea:focus{outline:none;border-color:var(--primary);box-shadow:var(--ring-field)} .cs-fb-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.5rem} .cs-fb-kind{display:inline-flex;padding:2px;border-radius:var(--radius-pill);background:var(--muted)} .cs-fb-kind button{height:2rem;padding:0 .875rem;border:0;border-radius:var(--radius-pill);background:none;font:inherit;font-size:var(--text-small);color:var(--muted-foreground);cursor:pointer} .cs-fb-kind button[aria-checked="true"]{background:var(--card);color:var(--foreground);box-shadow:var(--shadow-sm)} /* editing a footboard note in place (2026-10-26) */ .cs-fb-text{cursor:text} .cs-fb-list li.editing{display:block} .cs-fb-edit textarea{display:block;width:100%;box-sizing:border-box;padding:.5rem .625rem;border:1px solid var(--primary);border-radius:var(--radius);background:var(--card);font:inherit;line-height:1.5;color:var(--foreground);resize:vertical} .cs-fb-edit textarea:focus{outline:none;box-shadow:var(--ring-field)} .cs-fb-btns{display:inline-flex;gap:.375rem} .cs-fb-edit .btn-sm{height:2rem;padding:0 .75rem;font-size:var(--text-small)} .cs-fb-edit .cs-fb-kind button{padding:0 .625rem} /* ---- apps in the sidebar (2026-10-30) ------------------------------------------------------------------ The main sidebar groups the apps under a small "Apps" label. Inside an app the sidebar is the app's own (