@font-face{font-family:"Bricolage Grotesque";src:url('/fonts/bricolage-grotesque-latin.woff2') format('woff2');font-weight:300 800;font-stretch:75% 100%;font-style:normal;font-display:swap}
@font-face{font-family:Manrope;src:url('/fonts/manrope-variable.ttf') format('truetype');font-weight:200 800;font-style:normal;font-display:swap}

/* HTMLPop interface system.
   The interface is the frame, not the painting: quiet ink and paper so people's Pops carry the color.
   Sun and coral come from the mark and are reserved for highlights, live states, and the primary action.
   Radii: pills for actions and chips, 10/14 for fields and small frames, 20 for cards, 28 for feature surfaces. */
:root{
  color-scheme:light;
  --canvas:#f8f8f6;--surface:#fff;--sunken:#efeee9;--line:#e2e0da;--line-strong:#c9c6bd;--input-line:#8e8b82;
  --ink:#141413;--muted:#5d5b55;--link:#b3361e;
  --sun:#fde264;--sun-soft:#fff3b0;--sun-ink:#141413;
  --coral:#fb583b;--coral-hover:#ef4a2c;--coral-edge:#b33a22;--coral-ink:#141413;
  --night:#151513;--night-raised:#22221f;--night-line:#34332f;--night-ink:#f3f2ed;--night-muted:#b4b2aa;
  --frame-bar:#f1f0eb;--shadow-color:20 20 19;
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --font-display:"Bricolage Grotesque",Manrope,system-ui,sans-serif;
  --font-ui:Manrope,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --lift:0 1px 2px rgb(var(--shadow-color)/.05),0 12px 32px -12px rgb(var(--shadow-color)/.16);
  --lift-lg:0 2px 4px rgb(var(--shadow-color)/.04),0 30px 60px -24px rgb(var(--shadow-color)/.28);
  --gutter:clamp(20px,4vw,48px);
  font-family:var(--font-ui);font-synthesis:none;color:var(--ink);background:var(--canvas);
  -webkit-text-size-adjust:100%;text-size-adjust:100%
}
:root[data-theme=dark]{
  color-scheme:dark;
  --canvas:#111110;--surface:#1a1a18;--sunken:#242422;--line:#2f2e2b;--line-strong:#45433e;--input-line:#6f6c64;
  --ink:#f3f2ed;--muted:#a8a69e;--link:#ff9a7e;
  --sun:#f6d955;--sun-soft:#352f16;--coral:#ff6a4d;--coral-hover:#ff7f66;--coral-edge:#9e321d;
  --night:#1d1d1b;--night-raised:#2a2a27;--night-line:#3a3935;
  --frame-bar:#242422;--shadow-color:0 0 0
}
@media(prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --canvas:#111110;--surface:#1a1a18;--sunken:#242422;--line:#2f2e2b;--line-strong:#45433e;--input-line:#6f6c64;
    --ink:#f3f2ed;--muted:#a8a69e;--link:#ff9a7e;
    --sun:#f6d955;--sun-soft:#352f16;--coral:#ff6a4d;--coral-hover:#ff7f66;--coral-edge:#9e321d;
    --night:#1d1d1b;--night-raised:#2a2a27;--night-line:#3a3935;
    --frame-bar:#242422;--shadow-color:0 0 0
  }
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{margin:0;min-height:100dvh;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{margin:0;font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance;font-optical-sizing:auto}
p{margin:0}
p,li,dd{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
code,pre{font-family:var(--font-mono)}
::selection{background:var(--sun);color:#141413}
:focus-visible{outline:3px solid var(--link);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
mark{color:#141413;background:linear-gradient(transparent 10%,var(--sun) 10%,var(--sun) 90%,transparent 90%);padding:0 .08em;margin:0 -.04em;border-radius:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{position:fixed;z-index:100;top:12px;left:12px;padding:10px 16px;border-radius:var(--r-pill);background:var(--ink);color:var(--canvas);font-weight:700;transform:translateY(-200%);transition:transform .2s}
.skip-link:focus{transform:none}
main:focus{outline:none}
.shell{min-height:100dvh;overflow-x:clip;display:flex;flex-direction:column}
.wrap{width:min(100% - 2*var(--gutter),1200px);margin:0 auto;flex:1;display:flex;flex-direction:column}
.wrap>main{flex:1}
.fade{animation:rise .6s var(--ease) both}
.fade+.fade{animation-delay:.08s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Brand */
.brand{display:inline-flex;align-items:center;gap:9px;color:var(--ink);white-space:nowrap}
.brand-mark{width:32px;height:32px;border-radius:9px;flex:none}
.brand-wordmark{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.05em;line-height:1}
.brand-period{color:var(--coral)}

/* Actions */
.primary,.secondary,.ghost,.copy,.tiny-btn,.nav-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:var(--r-pill);border:1px solid transparent;font-family:var(--font-ui);font-size:15px;font-weight:750;line-height:1.2;letter-spacing:-.005em;text-align:center;white-space:nowrap;transition:background-color .18s,border-color .18s,color .18s,transform .12s,box-shadow .12s}
.primary,.nav-cta{background:var(--coral);color:var(--coral-ink);box-shadow:0 3px 0 var(--coral-edge);margin-bottom:3px}
.primary:hover,.nav-cta:hover{background:var(--coral-hover)}
.primary:active,.nav-cta:active{transform:translateY(3px);box-shadow:0 0 0 var(--coral-edge)}
.primary:disabled{background:var(--sunken);color:var(--muted);box-shadow:0 3px 0 var(--line-strong);transform:none}
.secondary,.copy,.tiny-btn{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.secondary:hover,.copy:hover,.tiny-btn:hover{background:var(--sunken);border-color:var(--input-line)}
.secondary:disabled,.copy:disabled{opacity:.55}
.ghost{background:transparent;color:var(--muted)}
.ghost:hover{color:var(--ink);background:var(--sunken)}
.small,.copy,.tiny-btn{min-height:38px;padding:0 16px;font-size:14px}
.secondary.on-dark{background:transparent;color:var(--night-ink);border-color:var(--night-line)}
.secondary.on-dark:hover{background:var(--night-raised);border-color:var(--night-muted)}
.danger{color:var(--link)!important}
.secondary.danger:hover{border-color:var(--link)}
.link-button,.subtle-button{padding:0;border:0;background:none;color:var(--link);font-weight:750;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.subtle-button{font-size:14px;text-decoration:none}
.subtle-button:hover,.link-button:hover{text-decoration-thickness:2px}
.subtle-button:hover{text-decoration:underline}
.subtle-link{color:var(--link);font-weight:700;font-size:14px}
.subtle-link:hover{text-decoration:underline;text-underline-offset:3px}
.arrow-link{display:inline-flex;align-items:center;gap:8px;font-weight:750;color:var(--ink);border-bottom:2px solid var(--coral);padding-bottom:2px;width:max-content}
.arrow-link::after{content:"→";transition:transform .2s var(--ease)}
.arrow-link:hover::after{transform:translateX(4px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.back{display:inline-flex;margin-bottom:28px;color:var(--muted);font-size:14px;font-weight:700}
.back:hover{color:var(--ink)}

/* Chips and small text */
.chip,.workspace-badge,.settings-badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--r-pill);background:var(--sunken);color:var(--ink);font-size:13px;font-weight:700;line-height:1;white-space:nowrap}
.chip-ink{background:#141413;color:var(--sun)}
.chip-sun{background:var(--sun);color:#141413}
.chip-warn{background:var(--sun-soft);color:var(--ink)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--muted);font-size:15px;font-weight:700}
.eyebrow::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 22%,transparent)}
.lede{margin-top:14px;color:var(--muted);font-size:18px;line-height:1.6}
.note{color:var(--muted);font-size:14px;line-height:1.6}
.warning{margin-top:14px;padding-left:14px;border-left:3px solid var(--coral);color:var(--ink);font-size:14px;line-height:1.6}
.status{font-size:14px;color:var(--muted);min-height:1.6em}
.status:empty{min-height:0}
.error{color:var(--link);font-size:14px;font-weight:650;line-height:1.5}
.error:empty{display:none}
.code{margin:0;padding:16px 18px;overflow-x:auto;border-radius:var(--r-md);background:var(--night);color:var(--night-ink);font-size:13px;line-height:1.7}

/* Forms */
.label{display:block;margin-bottom:8px;font-size:14px;font-weight:700}
.field{margin-bottom:18px}
input[type=text],input[type=email],input[type=password],input[type=search],input[type=url],input:not([type]),input[inputmode],select,textarea{width:100%;min-height:46px;padding:0 14px;border:1px solid var(--input-line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:16px;transition:border-color .15s,box-shadow .15s}
textarea{min-height:140px;padding:12px 14px;line-height:1.6;resize:vertical}
select{padding-right:38px;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 19px) 50%,calc(100% - 14px) 50%;background-size:5px 5px;background-repeat:no-repeat}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px color-mix(in srgb,var(--coral) 35%,transparent)}
input:disabled,textarea:disabled,select:disabled,input[readonly],textarea[readonly]{background:var(--sunken)}
input::placeholder,textarea::placeholder{color:color-mix(in srgb,var(--muted) 80%,transparent)}
input[type=file]{width:100%;padding:10px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--canvas);font-size:14px}
input[type=file]::file-selector-button{margin-right:12px;padding:8px 14px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-weight:700;cursor:pointer}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--coral)}
.code-input{font-family:var(--font-mono);font-size:22px;letter-spacing:.4em;text-align:center}

/* Ticks list */
.ticks{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.ticks li{position:relative;padding-left:30px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:.08em;width:20px;height:20px;border-radius:50%;background:var(--tick-bg,var(--sun))}
.ticks li::after{content:"";position:absolute;left:7px;top:calc(.08em + 5px);width:5px;height:9px;border:solid var(--tick-ink,#141413);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* Header */
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:32px;height:72px;padding:0 max(var(--gutter),calc((100% - 1200px)/2));background:color-mix(in srgb,var(--canvas) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line)}
.top-links{display:flex;align-items:center;gap:4px;flex:1}
.top-links a{padding:8px 14px;border-radius:var(--r-pill);color:var(--muted);font-size:15px;font-weight:650;transition:color .15s,background-color .15s}
.top-links a:hover{color:var(--ink);background:var(--sunken)}
.header-actions{display:flex;align-items:center;gap:6px;margin-left:auto}
.nav-cta{min-height:40px;padding:0 18px;font-size:14px}
.nav-menu{display:none;position:relative}
.nav-menu summary{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--r-pill);list-style:none;cursor:pointer}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary:hover{background:var(--sunken)}
.nav-menu summary span,.nav-menu summary span::before,.nav-menu summary span::after{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s var(--ease),opacity .2s}
.nav-menu summary span{position:relative}
.nav-menu summary span::before,.nav-menu summary span::after{content:"";position:absolute;left:0}
.nav-menu summary span::before{top:-6px}
.nav-menu summary span::after{top:6px}
.nav-menu[open] summary span{background:transparent}
.nav-menu[open] summary span::before{transform:translateY(6px) rotate(45deg)}
.nav-menu[open] summary span::after{transform:translateY(-6px) rotate(-45deg)}
.nav-menu nav{position:absolute;right:0;top:calc(100% + 10px);display:grid;min-width:220px;padding:8px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--lift-lg);animation:rise .2s var(--ease)}
.nav-menu nav a{padding:12px 14px;border-radius:var(--r-sm);font-weight:700}
.nav-menu nav a:hover{background:var(--sunken)}

/* Footer */
.footer{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px;margin-top:96px;padding:48px 0 56px;border-top:1px solid var(--line)}
.footer-brand p{margin-top:14px;color:var(--muted);font-family:var(--font-display);font-size:20px;font-weight:600;letter-spacing:-.02em}
.footer nav{display:grid;align-content:start;gap:10px;font-size:15px}
.footer nav strong{font-size:13px;color:var(--muted);font-weight:700}
.footer nav a{color:var(--ink);font-weight:600;width:max-content}
.footer nav a:hover{color:var(--link)}

/* Frame: the shared browser-window motif. The address is the product. */
.frame{display:block;overflow:hidden;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--lift);transition:transform .25s var(--ease),box-shadow .25s var(--ease),border-color .2s}
.frame-bar{display:flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--frame-bar)}
.frame-dot{width:8px;height:8px;flex:none;border-radius:50%;background:var(--coral)}
.frame-address{min-width:0;overflow:hidden;color:var(--muted);font:500 11.5px/1 var(--font-mono);text-overflow:ellipsis;white-space:nowrap}
.frame img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:top;background:var(--sunken)}
a.frame:hover,a:hover>.frame{transform:translateY(-4px);box-shadow:var(--lift-lg);border-color:var(--line-strong)}

/* Section headings */
.section-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:12px 32px;margin-bottom:40px}
.section-head h2{grid-column:1;font-size:clamp(36px,4.6vw,60px)}
.section-head p{grid-column:1;max-width:54ch;color:var(--muted);font-size:18px}
.section-head .arrow-link{grid-column:2;grid-row:1/span 2;align-self:end}

/* Home: hero and publisher */
.home>section{padding:96px 0}
.home>.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;gap:clamp(40px,6vw,88px);padding:72px 0 88px}
.hero h1{font-size:clamp(54px,7.4vw,104px);line-height:.94;letter-spacing:-.05em;font-weight:750}
.hero-lede{max-width:30ch;margin-top:28px;color:var(--muted);font-size:clamp(18px,1.6vw,21px);line-height:1.55}
.publisher{position:relative;isolation:isolate;padding:24px;scroll-margin-top:100px}
.publisher::after{content:"";position:absolute;z-index:-1;inset:0;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--lift-lg)}
.publisher::before{content:"";position:absolute;z-index:-2;inset:auto -14px -14px 28px;height:70%;border-radius:var(--r-xl);background:var(--sun);transform:rotate(1.5deg)}
.publisher-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-bottom:16px}
.publisher-head h2{font-size:24px;white-space:nowrap}
.upload,.workspace-upload{display:grid;justify-items:center;gap:6px;padding:32px 20px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--canvas);text-align:center;cursor:pointer;transition:border-color .18s,background-color .18s}
.upload:hover,.workspace-upload:hover{border-color:var(--input-line)}
.upload.dragging,.workspace-upload.dragging{border-color:var(--coral);border-style:solid;background:var(--sun-soft)}
.upload.has-file{border-style:solid;border-color:var(--ink)}
.upload-icon,.upload-arrow{display:grid;place-items:center;width:48px;height:48px;margin-bottom:6px;border-radius:50%;background:var(--sun);color:#141413;font-size:20px;font-weight:800}
.upload-icon svg{width:22px;height:22px}
.upload.dragging .upload-icon{animation:bob .8s var(--ease) infinite alternate}
@keyframes bob{to{transform:translateY(-4px)}}
.upload strong,.workspace-upload strong{font-size:17px;font-weight:750}
.upload small{max-width:34ch;color:var(--muted);font-size:14px;line-height:1.5}
.upload-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:12px}
#file{display:none}
.file-preview{display:none;align-items:center;gap:12px;margin-top:12px;padding:12px 14px;border-radius:var(--r-md);background:var(--sunken);font-size:14px;font-weight:700}
.file-preview.visible{display:flex}
.file-glyph{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:var(--r-sm);background:#141413;color:var(--sun);font:700 12px var(--font-mono)}
#file-name{min-width:0;flex:1;overflow-wrap:anywhere}
#file-size{flex:none;color:var(--muted);font-weight:600}
.editor{display:none;margin-top:14px}
.editor.visible{display:block}
.editor textarea{min-height:200px;background:var(--canvas);font:13px/1.65 var(--font-mono)}
.publish-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px;margin-top:14px}
.publish-row .primary{min-height:48px}
.publisher .error{margin-top:12px}
.publisher-foot{display:grid;gap:4px;margin-top:14px}
.publisher-note{color:var(--muted);font-size:14px;line-height:1.55}
.publisher-note a,.starter a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.publisher-note:empty{display:none}
.starter{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);color:var(--muted);font-size:14px}

/* Home: wall of real Pops */
.home>.wall{padding-bottom:72px}
.wall-track{margin:0 calc(50% - 50vw);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.wall-row{display:flex;gap:24px;width:max-content;padding:12px 0 24px;animation:wall 80s linear infinite}
.wall-track:hover .wall-row,.wall-track:focus-within .wall-row{animation-play-state:paused}
@keyframes wall{to{transform:translateX(calc(-50% - 12px))}}
.wall-item{display:grid;gap:12px;width:clamp(260px,26vw,340px);flex:none}
.wall-item:nth-child(even){margin-top:36px}
.wall-caption{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px;font-size:14px}
.wall-caption strong{font-weight:750}
.wall-caption span{color:var(--muted);white-space:nowrap}

/* Home: three ways */
.ways-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto;gap:20px}
.way{display:flex;flex-direction:column;gap:14px;padding:32px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.way h3{font-size:clamp(26px,2.6vw,34px)}
.way p{color:var(--muted);font-size:16px;max-width:42ch}
.way-ai{grid-row:span 2;justify-content:space-between;gap:28px;background:var(--night);color:var(--night-ink);border-color:var(--night-line)}
.way-ai>div:first-child{display:grid;gap:14px}
.way-ai p{color:var(--night-muted)}
.way-ai>.secondary{align-self:flex-start}
.chat{display:grid;gap:12px;padding:20px;border-radius:var(--r-lg);background:var(--night-raised);font-size:15px;line-height:1.5}
.chat p{max-width:none;color:var(--night-ink)}
.chat-you{justify-self:end;max-width:85%!important;padding:12px 16px;border-radius:18px 18px 4px 18px;background:#34332f}
.chat-ai{justify-self:start;display:grid;gap:10px;max-width:90%!important;padding:12px 16px;border-radius:18px 18px 18px 4px;border:1px solid var(--night-line)}
.link-pill{display:inline-flex;align-items:center;gap:8px;width:max-content;max-width:100%;padding:6px 12px;border-radius:var(--r-pill);background:var(--sun);color:#141413;font:600 13px var(--font-mono);overflow:hidden;text-overflow:ellipsis}
.link-pill::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:var(--coral)}
.file-chip{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;margin-bottom:8px;padding:8px 14px 8px 8px;border-radius:var(--r-pill);background:var(--sunken);font:600 14px var(--font-mono)}
.file-chip span{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#141413;color:var(--sun);font-size:11px}
.way-paste pre{margin:0 0 8px;padding:16px 18px;overflow:hidden;border-radius:var(--r-md);background:var(--sunken);color:var(--muted);font-size:13px;line-height:1.6}

/* Home: what a Pop is */
.home>.pop-anatomy{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(40px,6vw,88px)}
.anatomy-visual{display:block;transform:rotate(-1.2deg)}
.frame-lg{border-radius:var(--r-lg)}
.frame-lg .frame-bar{height:38px;padding:0 16px}
.frame-lg .frame-address{font-size:13px}
.anatomy-copy h2{font-size:clamp(36px,4.6vw,60px);margin-bottom:32px}
.qualities{display:grid;gap:0;margin:0}
.qualities div{padding:18px 0;border-top:1px solid var(--line)}
.qualities div:last-child{border-bottom:1px solid var(--line)}
.qualities dt{font-family:var(--font-display);font-size:21px;font-weight:700;letter-spacing:-.02em}
.qualities dd{margin:6px 0 0;color:var(--muted)}

/* Home: Pro */
.home>.pro-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);align-items:center;gap:clamp(32px,5vw,72px);margin:24px 0;padding:clamp(32px,5vw,64px);border-radius:36px;background:var(--sun);color:#141413}
.pro-copy h2{margin:18px 0 16px;font-size:clamp(36px,4.6vw,60px)}
.pro-copy>p{max-width:44ch;font-size:18px;color:#3b3a35}
.pro-copy .ticks{margin:28px 0 32px;--tick-bg:#141413;--tick-ink:var(--sun);font-weight:650}
.price-note{font-size:15px;font-weight:700;color:#3b3a35}
.profile-preview{transform:rotate(1.5deg)}
.profile-preview .frame{border-color:#141413;box-shadow:12px 12px 0 #141413;color:var(--ink)}
.profile-sheet{display:grid;gap:4px;padding:28px}
.profile-sheet strong{font-family:var(--font-display);font-size:26px;letter-spacing:-.03em}
.profile-handle{color:var(--muted);font:500 14px var(--font-mono)}
.profile-bio{margin-top:8px;color:var(--muted);font-size:15px}
.profile-list{display:grid;margin-top:20px}
.profile-list span{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-top:1px solid var(--line);font-weight:700}
.profile-list i{font-style:normal;color:var(--link)}

/* Home: closing */
.home>.closing{display:grid;justify-items:center;gap:32px;padding:120px 0 32px;text-align:center}
.closing h2{font-size:clamp(48px,7vw,96px);letter-spacing:-.05em}
.closing .actions{justify-content:center}

/* Page intros */
.page-intro{max-width:780px;padding:72px 0 48px}
.page-intro h1{font-size:clamp(44px,6.2vw,80px);letter-spacing:-.045em}
.page-intro>p:not(.eyebrow){max-width:58ch;margin-top:20px;color:var(--muted);font-size:clamp(17px,1.5vw,19px)}
.page-intro.centered{margin:0 auto;text-align:center}
.page-intro.centered>p{margin-left:auto;margin-right:auto}

/* Examples */
.featured-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-bottom:72px}
.pop-card{display:grid;align-content:start;gap:16px;min-width:0}
.pop-card-copy{display:grid;gap:6px;padding:0 2px}
.pop-category{color:var(--muted);font-size:13px;font-weight:700}
.pop-card h3{font-size:20px;letter-spacing:-.02em}
.pop-card h3 a:hover{color:var(--link)}
.pop-card p{color:var(--muted);font-size:15px;line-height:1.55}
.pop-card-featured h3{font-size:24px}
.browser-bar{position:sticky;top:72px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0 12px;background:var(--canvas)}
.browser-bar h2{font-size:32px}
.search-field{position:relative;width:min(100%,360px)}
.search-field svg{position:absolute;left:16px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.search-field input{padding-left:44px;border-radius:var(--r-pill);border-color:var(--line-strong)}
.pop-filters{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:8px}
.pop-filters button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);font-size:14px;font-weight:700;transition:background-color .15s,color .15s,border-color .15s}
.pop-filters button span{color:var(--muted);font-weight:600;font-size:13px}
.pop-filters button:hover{border-color:var(--line-strong)}
.pop-filters button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--canvas)}
.pop-filters button[aria-pressed=true] span{color:inherit;opacity:.7}
.pop-count{margin:12px 0 0;color:var(--muted);font-size:14px}
.category-section{padding:48px 0 8px}
.category-head{display:flex;align-items:baseline;gap:8px 20px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.category-head h2{font-size:28px}
.category-head p{color:var(--muted)}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:40px 24px}
.empty-state{display:grid;justify-items:center;gap:10px;margin-top:32px;padding:56px 24px;border:1.5px dashed var(--line-strong);border-radius:var(--r-xl);text-align:center}
.empty-state h3{font-size:24px}
.empty-state p{color:var(--muted);margin-bottom:8px}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:96px;padding:clamp(28px,4vw,48px);border-radius:var(--r-xl);background:var(--night);color:var(--night-ink)}
.cta-band h2{font-size:clamp(28px,3.4vw,40px)}
.cta-band p{margin-top:8px;color:var(--night-muted)}

/* Pricing */
.billing-switch{display:inline-flex;gap:4px;margin-top:32px;padding:4px;border-radius:var(--r-pill);background:var(--sunken)}
.billing-switch button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 18px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:15px;font-weight:700;transition:background-color .15s,color .15s,box-shadow .15s}
.billing-switch button[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--lift)}
.billing-switch button span{padding:3px 8px;border-radius:var(--r-pill);background:var(--sun);color:#141413;font-size:12px}
.pricing-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1000px;margin:0 auto}
.plan-card{display:flex;flex-direction:column;gap:18px;padding:clamp(28px,3.4vw,40px);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.plan-card h2{font-size:30px}
.plan-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}
.plan-lede{margin-top:-10px;color:var(--muted);font-size:17px}
.plan-price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan-price strong{font-family:var(--font-display);font-size:64px;line-height:1;font-weight:750;letter-spacing:-.05em}
.plan-price span{color:var(--muted);font-weight:650}
.plan-billing{margin-top:-8px;color:var(--muted);font-size:15px}
.plan-card>.primary,.plan-card>.secondary{width:100%}
.plan-card small{color:var(--muted);font-size:13px;text-align:center}
.plan-card .ticks{margin-top:8px;padding-top:24px;border-top:1px solid var(--line)}
.pro-plan{background:var(--night);color:var(--night-ink);border-color:color-mix(in srgb,var(--sun) 40%,var(--night-line));box-shadow:var(--lift-lg)}
.pro-plan .plan-lede,.pro-plan .plan-price span,.pro-plan .plan-billing,.pro-plan small{color:var(--night-muted)}
.pro-plan .ticks{border-color:var(--night-line)}
.pro-plan .ticks b{font-weight:800}
.plans-footnote{margin:24px auto 0;color:var(--muted);font-size:14px;text-align:center}
.faq{max-width:1000px;margin:96px auto 0}
.faq>h2{font-size:clamp(32px,4vw,48px);margin-bottom:32px}
.faq-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px}
.faq-grid>div{padding:24px 0;border-top:1px solid var(--line)}
.faq-grid h3{font-size:21px;margin-bottom:10px;letter-spacing:-.02em}
.faq-grid p{color:var(--muted)}
.faq-grid a,.docs-body a:not(.arrow-link),.legal-page a,.success-meta a,.auth-aside a{color:var(--link);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* Docs */
.docs-page{display:grid;grid-template-columns:200px minmax(0,1fr);gap:clamp(32px,6vw,80px);align-items:start}
.docs-toc{position:sticky;top:104px;display:grid;gap:4px;margin-top:88px;font-size:14px}
.docs-toc strong{margin-bottom:8px;color:var(--muted);font-size:13px}
.docs-toc a{padding:6px 12px;margin-left:-12px;border-radius:var(--r-sm);color:var(--muted);font-weight:650}
.docs-toc a:hover{background:var(--sunken);color:var(--ink)}
.docs-body{max-width:760px}
.docs-body .page-intro{padding-bottom:24px}
.docs-section{padding:48px 0;border-top:1px solid var(--line);scroll-margin-top:96px}
.docs-section h2{font-size:clamp(28px,3vw,36px);margin-bottom:20px}
.docs-section>p{margin-bottom:16px;color:var(--muted)}
.docs-section>p strong{color:var(--ink)}
.docs-section .linkbox{margin:16px 0}
.docs-section .code{margin:12px 0 16px}
.docs-section .arrow-link{margin-top:8px}
.steps{display:grid;gap:28px;margin:0;padding:0;list-style:none;counter-reset:step}
.steps li{position:relative;padding-left:56px;counter-increment:step}
.steps li::before{content:counter(step);position:absolute;left:0;top:-4px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--sun);color:#141413;font-family:var(--font-display);font-size:17px;font-weight:800}
.steps strong{display:block;margin-bottom:6px;font-size:18px}
.steps p{color:var(--muted)}
.steps .note{margin-top:4px}
.callout{margin-top:32px;padding:20px 24px;border-radius:var(--r-lg);background:var(--sunken)}
.callout p{margin-top:4px;color:var(--muted)}
.tool-list{display:grid;margin:0 0 16px}
.tool-list div{display:grid;grid-template-columns:160px minmax(0,1fr);gap:20px;padding:16px 0;border-top:1px solid var(--line)}
.tool-list dt code{padding:3px 8px;border-radius:6px;background:var(--sunken);font-size:14px}
.tool-list dd{margin:0;color:var(--muted)}

/* Linkbox (copyable values) */
.linkbox{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 16px;border:1px solid var(--line-strong);border-radius:var(--r-md);background:var(--canvas)}
.linkbox code{min-width:0;flex:1;font-size:13.5px;overflow-wrap:anywhere;line-height:1.5;padding:6px 0}
.linkbox .copy{flex:none}

/* Panel pages: success, manage, report */
.panel-page{width:min(100%,680px);margin:0 auto;padding:64px 0 32px}
.panel-page>h1{font-size:clamp(40px,5.6vw,64px);letter-spacing:-.045em;overflow-wrap:anywhere}
.panel{margin-top:24px;padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.panel h2{font-size:22px;margin-bottom:8px;letter-spacing:-.02em}
.panel>.note{margin-bottom:18px}
.panel textarea{font:13px/1.65 var(--font-mono);min-height:180px}
.panel>.primary,.panel>.secondary{margin-top:6px}
.panel .status{margin-top:12px}
.success-page{text-align:center}
.success-page>*:not(h1,.lede,.live-mark){text-align:left}
.live-mark{display:grid;place-items:center;width:max-content;margin:0 auto 24px;position:relative}
.live-mark img{width:72px;height:72px;border-radius:20px;animation:pop .7s var(--ease) both}
.live-mark::after{content:"";position:absolute;inset:-10px;border-radius:28px;border:2px solid var(--coral);opacity:0;animation:ring .9s .25s var(--ease) both}
@keyframes pop{0%{transform:scale(.4) rotate(-12deg);opacity:0}60%{transform:scale(1.12) rotate(4deg);opacity:1}100%{transform:none}}
@keyframes ring{0%{transform:scale(.8);opacity:.8}100%{transform:scale(1.35);opacity:0}}
.success-page .lede{margin-left:auto;margin-right:auto;max-width:40ch}
.link-card{margin-top:36px;padding:20px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--lift)}
.link-card-bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding:0 6px 0 18px;min-height:52px;border-radius:var(--r-pill);background:var(--frame-bar);border:1px solid var(--line)}
.link-card-bar input{min-height:50px;padding:0;border:0;background:transparent;font:600 15px var(--font-mono);text-overflow:ellipsis}
.link-card-bar input:focus{box-shadow:none}
.link-card-bar code{min-width:0;padding:14px 0;font-size:14px;overflow-wrap:anywhere}
.link-card .actions .primary{flex:1 1 auto}
.link-card.compact{margin-top:28px;box-shadow:none}
.link-card .status{margin-top:12px}
.private-result{background:var(--canvas)}
.private-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.private-head h2{margin:0}
.private-result .linkbox{margin-top:16px;background:var(--surface)}
.success-meta{margin:28px 0 16px;color:var(--muted);font-size:15px}
.success-meta strong{color:var(--ink)}
.meta-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:20px 0 0}
.meta-grid div{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.meta-grid dt{color:var(--muted);font-size:13px;font-weight:700}
.meta-grid dd{margin:4px 0 0;font-weight:750;overflow-wrap:anywhere}
.danger-zone{border-color:color-mix(in srgb,var(--coral) 35%,var(--line))}
#delete-status:empty{display:none}
#delete-status{margin-top:12px;font-size:14px;color:var(--link)}

/* Sign in and Pro signup (signed-out account page) */
.workspace-page{padding:0}
.workspace-auth{width:min(100%,520px);margin:0 auto;padding:64px 0 32px}
.workspace-auth>h1{font-size:clamp(38px,5vw,56px);letter-spacing:-.045em;text-align:center}
.workspace-auth>.lede{text-align:center;margin-left:auto;margin-right:auto;max-width:38ch}
.auth-mark{width:56px;height:56px;margin:0 auto 24px;border-radius:16px}
.auth-loading{padding:96px 0;color:var(--muted);text-align:center}
.workspace-auth .panel{margin-top:32px}
.workspace-auth .panel>p{color:var(--muted);margin-bottom:20px}
.reviewer-signin{margin-top:24px;padding-top:16px;border-top:1px solid var(--line)}
.reviewer-signin summary{width:max-content;max-width:100%;cursor:pointer;color:var(--muted);font-size:14px;font-weight:650}
.reviewer-signin summary:hover{color:var(--ink)}
.reviewer-signin[open] summary{margin-bottom:16px}
.workspace-auth .panel>p strong{color:var(--ink)}
.workspace-auth form{display:grid;gap:0}
.workspace-auth form .note{margin:8px 0 0}
.workspace-auth form .actions{margin-top:20px}
.workspace-auth form .primary{flex:1}
.workspace-auth #code-form{margin-top:20px}
#login-status,#account-status,#reviewer-status{margin-top:16px;font-size:14px;color:var(--muted)}
#login-status:empty,#account-status:empty,#reviewer-status:empty{display:none}
.workspace-auth .ticks{margin:0 0 20px}
.workspace-auth .field{margin-top:20px}
.auth-links{margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.auth-aside{margin-top:24px;color:var(--muted);font-size:15px;text-align:center}

/* Legal and support */
.legal-page{width:min(100%,720px);margin:0 auto;padding:64px 0 32px}
.legal-page h1{font-size:clamp(40px,5.4vw,60px);letter-spacing:-.045em;margin-bottom:24px}
.legal-page h2{margin:44px 0 12px;font-size:24px;letter-spacing:-.02em}
.legal-page p,.legal-page li{color:color-mix(in srgb,var(--ink) 82%,var(--muted));font-size:17px;line-height:1.75}
.legal-page p+p{margin-top:14px}
.legal-page ul{padding-left:22px}

/* ───────────── Pro workspace ───────────── */
#app.pro-workspace-mode .topbar,#app.pro-workspace-mode .footer{display:none}
#app.pro-workspace-mode .wrap{width:100%;max-width:none;margin:0}
#app.pro-workspace-mode .workspace-page{min-height:100dvh}
.workspace-app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100dvh;background:var(--canvas)}
.workspace-sidebar{position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;gap:24px;height:100dvh;padding:20px 14px 14px;border-right:1px solid var(--line);background:var(--surface)}
.workspace-sidebar-brand{padding:4px 10px 0}
.workspace-sidebar-nav{display:grid;gap:2px;margin-top:28px}
.workspace-nav-link{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 12px;border-radius:var(--r-sm);color:var(--muted);font-size:15px;font-weight:650;transition:background-color .15s,color .15s}
.workspace-nav-link svg{width:19px;height:19px;flex:none}
.workspace-nav-link:hover{background:var(--sunken);color:var(--ink)}
.workspace-nav-link[aria-current=page]{background:var(--sunken);color:var(--ink);font-weight:750}
.workspace-nav-link[aria-current=page] svg{color:var(--coral)}
.workspace-sidebar-bottom{display:grid;gap:6px}
.workspace-plan-card,.workspace-account-link{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 10px 8px 12px;border-radius:var(--r-md);transition:background-color .15s}
.workspace-plan-card{border:1px solid var(--line);background:var(--canvas)}
.workspace-plan-card:hover,.workspace-account-link:hover{background:var(--sunken)}
.workspace-plan-card>svg,.workspace-account-link>svg{width:16px;height:16px;flex:none;margin-left:auto;color:var(--muted)}
.workspace-plan-dot{width:9px;height:9px;flex:none;border-radius:50%;border:2px solid var(--line-strong)}
.workspace-plan-dot.is-active{border:0;background:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 22%,transparent)}
.workspace-plan-copy{display:grid;min-width:0;line-height:1.3}
.workspace-plan-copy strong{font-size:14px}
.workspace-plan-copy small{color:var(--muted);font-size:12.5px}
.workspace-account-avatar{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;background:var(--sun);color:#141413;font-size:13px;font-weight:800}
.workspace-account-email{min-width:0;overflow:hidden;font-size:14px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.workspace-main{display:flex;flex-direction:column;min-width:0;min-height:100dvh}
.workspace-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:56px;padding:0 clamp(20px,3vw,44px)}
.workspace-breadcrumb{display:flex;align-items:center;gap:8px;min-width:0;color:var(--muted);font-size:14px}
.workspace-breadcrumb strong{color:var(--ink);font-weight:700}
.workspace-topbar-link{display:inline-flex;align-items:center;gap:6px;margin-left:auto;padding:6px 12px;border-radius:var(--r-pill);color:var(--muted);font-size:14px;font-weight:700}
.workspace-topbar-link:hover{background:var(--sunken);color:var(--ink)}
.workspace-topbar-link svg{width:15px;height:15px}
.workspace-content{width:min(100%,1440px);flex:1;margin:0 auto;padding:32px clamp(20px,3vw,44px) 72px}
.workspace-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding-bottom:24px}
.workspace-heading h1{display:flex;align-items:center;gap:12px;font-size:clamp(30px,3vw,40px);letter-spacing:-.04em}
.workspace-heading p{margin-top:8px;max-width:62ch;color:var(--muted)}
.workspace-heading>.primary{flex:none}
.is-library-heading h1{white-space:nowrap}
.library-total{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--r-pill);background:var(--sunken);color:var(--muted);font-family:var(--font-ui);font-size:14px;font-weight:750;letter-spacing:0}
.library-total:empty{display:none}
.workspace-notice{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:16px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--sun) 60%,var(--line));border-radius:var(--r-md);background:var(--sun-soft);font-size:15px}
.workspace-notice a{color:var(--link);font-weight:750}
.workspace-notice p{flex-basis:100%;color:var(--muted)}
.workspace-status{margin:0 0 12px;color:var(--muted);font-size:14px}
.workspace-status:empty{display:none}

/* Library */
.library-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.library-search{position:relative;flex:1 1 240px;min-width:0}
.library-search>span[aria-hidden]{position:absolute;left:15px;top:50%;display:flex;transform:translateY(-50%);color:var(--muted);pointer-events:none}
.library-search>span[aria-hidden] svg{width:17px;height:17px}
.library-search input{min-height:42px;padding-left:40px;border-color:var(--line-strong);border-radius:var(--r-pill)}
.library-select select{min-height:42px;width:auto;border-color:var(--line-strong);border-radius:var(--r-pill);font-size:14px;font-weight:650}
.library-view-toggle{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-strong);border-radius:var(--r-pill);background:var(--surface)}
.library-view-toggle button{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:16px}
.library-view-toggle button[aria-pressed=true]{background:var(--ink);color:var(--canvas)}
.library-refresh{display:grid;place-items:center;width:42px;height:42px;padding:0;border:1px solid var(--line-strong);border-radius:50%;background:var(--surface);color:var(--muted);font-size:18px}
.library-refresh:hover{color:var(--ink);background:var(--sunken)}
.library-caption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-bottom:14px}
.library-caption p{margin:0;color:var(--muted);font-size:14px}
.library-caption a{font-size:13px}
.workspace-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.workspace-pop-card{position:relative;display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s}
.workspace-preview-surface{position:relative;padding:8px 8px 0}
.workspace-browser-chrome{display:flex;align-items:center;gap:8px;height:26px;padding:0 10px;border:1px solid var(--line);border-bottom:0;border-radius:10px 10px 0 0;background:var(--frame-bar)}
.workspace-browser-controls{display:flex;flex:none}
.workspace-browser-controls i{width:7px;height:7px;border-radius:50%;background:var(--coral)}
.workspace-browser-controls i+i{display:none}
.workspace-browser-address{display:flex;align-items:center;gap:6px;min-width:0;color:var(--muted);font:500 11px/1 var(--font-mono)}
.workspace-browser-address svg{width:10px;height:10px;flex:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.workspace-browser-address>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.workspace-card-frame{position:relative;aspect-ratio:16/10;overflow:visible;border:1px solid var(--line);border-radius:0 0 10px 10px;background:#fff}
.workspace-card-canvas{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.workspace-card-frame iframe{position:absolute;top:0;left:0;display:block;width:1280px;height:800px;border:0;background:#fff;transform:scale(.2);transform-origin:top left}
.workspace-pop-card.is-unavailable .workspace-card-frame{display:grid;place-items:center;padding:20px;background:var(--sunken);color:var(--muted);text-align:center}
.workspace-card-frame>p{max-width:26ch;font-size:13px;line-height:1.5}
.workspace-preview-actions{border-radius:inherit;position:absolute;z-index:3;inset:0;display:flex;align-items:flex-start;justify-content:flex-end;gap:6px;padding:8px;background:linear-gradient(180deg,rgb(20 20 19/.45),transparent 55%);opacity:0;pointer-events:none;transition:opacity .18s}
.workspace-pop-card.is-unavailable .workspace-preview-actions{background:none}
.workspace-preview-actions>a,.workspace-preview-actions>button,.workspace-preview-actions .overflow-toggle{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:0 12px;border:0;border-radius:var(--r-pill);background:rgb(20 20 19/.86);color:#f3f2ed;font-size:13px;font-weight:700;pointer-events:auto;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.workspace-preview-actions>a:hover,.workspace-preview-actions>button:hover,.workspace-preview-actions .overflow-toggle:hover{background:#141413}
.workspace-preview-actions .pop-overflow{pointer-events:auto}
.workspace-preview-actions .overflow-toggle{width:32px;padding:0;font-size:15px;letter-spacing:-.05em}
.workspace-pop-card.is-unavailable .overflow-toggle{background:var(--surface);color:var(--ink);border:1px solid var(--line-strong)}
.workspace-pop-card:hover .workspace-preview-actions,.workspace-pop-card:focus-within .workspace-preview-actions,.workspace-pop-card.is-unavailable .workspace-preview-actions{opacity:1}
.pop-overflow{position:relative}
.overflow-panel{position:absolute;z-index:20;top:38px;right:0;width:200px;padding:6px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);box-shadow:var(--lift-lg)}
.overflow-panel button{display:block;width:100%;min-height:40px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:14px;font-weight:600;text-align:left}
.overflow-panel button:hover{background:var(--sunken)}
.workspace-pop-card-footer{display:grid;gap:2px;padding:12px 14px 14px}
.workspace-pop-title-row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.workspace-pop-card h2{min-width:0;overflow:hidden;font-family:var(--font-ui);font-size:15px;font-weight:750;letter-spacing:-.01em;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}
.pop-status-label{display:inline-flex;flex:none;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:650;white-space:nowrap}
.pop-status-label i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.pop-status-label-active{color:var(--ink)}
.pop-status-label-active i{background:var(--coral)}
.pop-status-label-paused i{background:transparent;border:2px solid var(--muted)}
.pop-status-label-blocked{color:var(--link)}
.pop-status-label-blocked i{background:var(--link)}
.pop-date{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;color:var(--muted);font-size:13px}
.pop-list-url,.pop-list-date{display:none}
.workspace-library.is-list-view{display:flex;flex-direction:column;gap:8px}
.workspace-library.is-list-view .workspace-pop-card{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;border-radius:var(--r-md)}
.workspace-library.is-list-view .workspace-preview-surface{position:static;padding:8px}
.workspace-library.is-list-view .workspace-browser-chrome{height:18px;padding:0 6px;border-radius:7px 7px 0 0}
.workspace-library.is-list-view .workspace-browser-address{font-size:9px}
.workspace-library.is-list-view .workspace-browser-address svg{display:none}
.workspace-library.is-list-view .workspace-card-frame{position:static;aspect-ratio:auto;border-radius:0 0 7px 7px}
.workspace-library.is-list-view .workspace-card-canvas{position:relative;aspect-ratio:16/10}
.workspace-library.is-list-view .workspace-preview-actions{position:static;opacity:1;background:none;padding:0}
.workspace-library.is-list-view .workspace-preview-actions>a,.workspace-library.is-list-view .workspace-preview-actions>button{display:none}
.workspace-library.is-list-view .workspace-preview-actions .pop-overflow{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.workspace-library.is-list-view .overflow-toggle{background:transparent;color:var(--muted);border:1px solid var(--line)}
.workspace-library.is-list-view .overflow-toggle:hover{background:var(--sunken);color:var(--ink)}
.workspace-library.is-list-view .workspace-pop-card-footer{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 110px;align-items:center;gap:20px;padding:10px 64px 10px 6px}
.workspace-library.is-list-view .pop-date{display:none}
.workspace-library.is-list-view .pop-list-url{display:block;min-width:0;overflow:hidden;color:var(--muted);font:500 13px var(--font-mono);text-overflow:ellipsis;white-space:nowrap}
.workspace-library.is-list-view .pop-list-date{display:block;color:var(--muted);font-size:13px}
.workspace-empty{display:grid;grid-column:1/-1;justify-items:center;gap:10px;padding:64px 24px;border:1.5px dashed var(--line-strong);border-radius:var(--r-xl);background:var(--surface);text-align:center}
.workspace-empty img{width:64px;height:64px;margin-bottom:8px;border-radius:18px}
.workspace-empty h2{font-size:26px}
.workspace-empty p{max-width:48ch;color:var(--muted)}
.workspace-empty .primary{margin-top:12px}
.library-loading{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:16px}
.library-loading p{color:var(--muted);font-size:14px}
.library-loading p:empty{display:none}

/* Create */
.workspace-compose{max-width:840px}
.compose-fields{padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.source-modes,.theme-options{display:inline-flex;gap:4px;margin-bottom:18px;padding:4px;border-radius:var(--r-pill);background:var(--sunken)}
.theme-options{margin:0}
.source-modes .secondary,.theme-options .secondary{min-height:38px;padding:0 16px;border:0;background:transparent;color:var(--muted);font-size:14px}
.source-modes .secondary[aria-pressed=true],.theme-options .secondary[aria-pressed=true]{background:var(--surface);color:var(--ink);box-shadow:var(--lift)}
.workspace-upload{padding:40px 20px}
.workspace-upload p{color:var(--muted);font-size:14px;margin-bottom:10px}
.source-editor{width:100%;min-height:340px;padding:18px;border:1px solid var(--input-line);border-radius:var(--r-md);background:var(--canvas);color:var(--ink);font:13.5px/1.7 var(--font-mono);tab-size:2;resize:vertical}
.compose-fields .error{margin-top:14px}
.compose-submit{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:22px}
.compose-aside{display:grid;gap:12px;padding:28px;border-radius:var(--r-xl);background:var(--sunken)}
.compose-aside img{width:54px;height:54px;border-radius:15px}
.compose-aside h2{font-size:24px;margin-top:4px}
.compose-aside p{color:var(--muted);font-size:15px}

/* Editor */
.editor-topline{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.editor-topline p{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;color:var(--muted);font-size:14px}
#draft-state{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-weight:700}
#draft-state::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.editor-ai{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px;padding:22px 26px;border:1px solid color-mix(in srgb,var(--sun) 60%,var(--line));border-radius:var(--r-lg);background:var(--sun-soft)}
.editor-ai h2{font-size:22px;margin-bottom:6px}
.editor-ai p{max-width:60ch;color:var(--muted);font-size:15px}
.editor-ai .note{margin-top:6px;font-size:13px}
.editor-ai .secondary{flex:none}
#page-editor{padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.source-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:8px}
.source-pane{overflow:hidden;border:1px solid var(--input-line);border-radius:var(--r-md);background:var(--surface)}
.source-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 8px 6px 16px;border-bottom:1px solid var(--line);background:var(--frame-bar)}
.source-filename{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font:600 12.5px var(--font-mono)}
.source-filename::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.source-tools{display:flex;flex-wrap:wrap;gap:2px}
.source-tools button{min-height:32px;padding:0 12px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font-size:13px;font-weight:700}
.source-tools button:hover:not(:disabled){background:var(--surface);color:var(--ink)}
.source-tools button[aria-pressed=true]{color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.source-tools button:disabled{opacity:.5}
.pop-editor .source-pane .source-editor{display:block;min-height:360px;height:52dvh;max-height:85dvh;padding:20px;border:0;border-radius:0;background:var(--surface);white-space:pre-wrap;overflow-wrap:anywhere}
.pop-editor .source-pane .source-editor:focus{box-shadow:none}
.pop-editor .source-pane .source-editor:focus-visible{outline:2px solid var(--link);outline-offset:-2px;border-radius:0}
.pop-editor .source-pane .source-editor.no-wrap{white-space:pre;overflow-wrap:normal}
.pop-editor .source-pane.expanded .source-editor{height:78dvh}
.source-statusbar{display:flex;justify-content:space-between;gap:12px;padding:8px 16px;border-top:1px solid var(--line);background:var(--frame-bar);color:var(--muted);font:12px/1.5 var(--font-mono)}
.source-message{padding:8px 16px;font-size:13px;color:var(--link)}
.source-message:empty{display:none}
.source-help{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;margin-top:10px}
.source-help .note{font-size:13px}
.editor-savebar{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.editor-savebar p{flex:1;min-width:180px;color:var(--muted);font-size:14px}

/* Connections */
.workspace-settings{display:grid;gap:20px}
.connection-feature{display:grid;justify-items:start;gap:16px;padding:clamp(20px,4vw,40px);border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--ink)}
.connection-feature .workspace-badge{background:var(--sun);color:#141413}
.connection-feature h2{max-width:20ch;font-size:clamp(28px,3vw,38px)}
.connection-feature p{max-width:56ch;color:var(--muted)}
.connection-feature .actions{margin:4px 0 0}
.connection-steps{display:grid;gap:20px;list-style:none;counter-reset:connect;padding:8px 0;margin:0;max-width:65ch}
.connection-steps li{counter-increment:connect;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:start}
.connection-steps li::before{content:counter(connect);grid-row:1/3;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--sun-soft);color:var(--ink);font-size:13px;font-weight:800}
.connection-steps strong{font-size:15px}.connection-steps span{grid-column:2;color:var(--muted);font-size:14px;line-height:1.6}
.connection-feedback:empty{display:none}.connection-feature #connection-prompt-fallback{width:100%}.connection-feature textarea{font-size:14px}
.settings-section{display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);gap:24px 40px;padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface)}
.settings-section h2{font-size:22px;margin-bottom:8px}
.settings-section>div>p{color:var(--muted);font-size:15px}
.settings-section .note{margin-top:12px}
.subscription-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.subscription-row:first-child{padding-top:0}
.connection-details{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.connection-details summary{font-weight:750;cursor:pointer}
.connection-details code{display:block;margin:4px 0 10px;padding:10px 14px;border-radius:var(--r-sm);background:var(--sunken);font-size:13px;overflow-wrap:anywhere}
.key-reveal{display:grid;gap:8px;margin-top:16px;padding:18px;border:1px solid color-mix(in srgb,var(--sun) 60%,var(--line));border-radius:var(--r-md);background:var(--sun-soft)}
.key-reveal .linkbox{background:var(--surface)}
.key-reveal .subtle-button{justify-self:start}

/* Settings */
.workspace-settings-layout{display:grid;grid-template-columns:200px minmax(0,1fr);align-items:start;gap:32px}
.workspace-settings-nav{position:sticky;top:16px;display:grid;gap:2px}
.workspace-settings-nav button{min-height:42px;padding:0 14px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--muted);font-size:15px;font-weight:650;text-align:left;white-space:nowrap}
.workspace-settings-nav button:hover{background:var(--sunken);color:var(--ink)}
.workspace-settings-nav button[aria-selected=true]{background:var(--surface);color:var(--ink);font-weight:750;box-shadow:inset 0 0 0 1px var(--line)}
.workspace-settings-panels>section{display:grid;gap:16px}
.setting-group{padding:4px 24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.setting-group-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 0 4px}
.setting-group-heading h2{font-size:20px}
.setting-group>.setting-help{padding:10px 0 0}
.setting-group>.actions{padding:16px 0 20px}
.setting-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr) auto;align-items:center;gap:12px 24px;padding:18px 0}
.setting-row+.setting-row,.setting-group [data-billing-detail] .setting-row,[data-billing-detail]+.setting-row,#settings-sessions .setting-row+.setting-row{border-top:1px solid var(--line)}
.setting-row:has(>.setting-copy:only-child),.setting-row:not(:has(>.setting-action)){grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}
.setting-label{display:block;font-size:15px;font-weight:700}
.setting-help{margin-top:4px;color:var(--muted);font-size:13.5px;line-height:1.5}
.setting-value{min-width:0;font-size:15px;overflow-wrap:anywhere}
.setting-value .setting-help{display:block}
.setting-value code{font-size:13px}
.setting-value:has(#public-handle){display:flex;align-items:center;gap:8px}
.setting-value:has(#public-handle) .setting-help{margin:0;font-family:var(--font-mono);white-space:nowrap}
.setting-value a{color:var(--link);font-weight:700}
.setting-action{justify-self:end}
.setting-feedback{padding:0 0 14px;color:var(--muted);font-size:14px}
.setting-feedback:empty{display:none}
.setting-danger{border-color:color-mix(in srgb,var(--coral) 35%,var(--line))}
.setting-switch{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.settings-intro{color:var(--muted);font-size:15px}
.billing-group .settings-badge{text-transform:capitalize}

/* Dialog */
.workspace-dialog{width:min(480px,calc(100% - 32px));max-height:90dvh;padding:28px;border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);color:var(--ink);box-shadow:var(--lift-lg)}
.workspace-dialog[open]{animation:rise .22s var(--ease)}
.workspace-dialog::backdrop{background:rgb(20 20 19/.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.workspace-dialog h2{margin-bottom:12px;font-size:26px;overflow-wrap:anywhere}
.workspace-dialog p{margin-bottom:20px;color:var(--muted);font-size:15px}
.workspace-dialog .actions{justify-content:flex-end;margin-top:8px}
.workspace-dialog input{margin-bottom:16px}
.workspace-dialog:has(.chatgpt-handoff){width:min(620px,calc(100% - 32px))}
.handoff-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.handoff-heading h2{margin:0}
.handoff-draft{padding:12px 14px;border-radius:var(--r-sm);background:var(--sun-soft);color:var(--ink)!important}
.chatgpt-handoff textarea{height:180px;background:var(--canvas);font:12.5px/1.7 var(--font-mono)}
.chatgpt-handoff .note{margin:12px 0 20px!important}
.chatgpt-handoff .actions{justify-content:flex-start}
#handoff-status{margin:14px 0 0;font-size:14px}
#handoff-status:empty{display:none}
.chatgpt-handoff>.subtle-link{display:inline-block;margin-top:16px}

/* Mobile workspace nav */
.workspace-mobile-nav{display:none}

/* Responsive */
@media(hover:none),(pointer:coarse){
  .workspace-preview-actions{opacity:1}
  .workspace-pop-card:not(.is-unavailable) .workspace-preview-actions{background:linear-gradient(180deg,rgb(20 20 19/.35),transparent 45%)}
}
@media(hover:hover) and (pointer:fine){
  .workspace-pop-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:var(--lift)}
}
@media(max-width:1080px){
  .featured-grid{gap:18px}
  .workspace-compose{grid-template-columns:1fr}
  .compose-aside{grid-template-columns:auto 1fr;align-items:center;column-gap:20px}
  .compose-aside img{grid-row:span 2}
  .compose-aside>p,.compose-aside>a{grid-column:2}
}
@media(max-width:960px){
  .home>.hero{grid-template-columns:1fr;gap:40px;padding:48px 0 72px}
  .hero-copy{max-width:640px}
  .hero-lede{max-width:44ch}
  .publisher{max-width:640px}
  .ways-grid{grid-template-columns:1fr 1fr}
  .way-ai{grid-column:1/-1;grid-row:auto}
  .home>.pop-anatomy{grid-template-columns:1fr}
  .anatomy-visual{max-width:640px}
  .home>.pro-band{grid-template-columns:1fr}
  .profile-preview{max-width:480px;margin-right:12px}
  .docs-page{grid-template-columns:1fr}
  .docs-toc{display:none}
  .workspace-settings-layout{grid-template-columns:1fr;gap:20px}
  .workspace-settings-nav{position:static;display:flex;overflow-x:auto;gap:4px;padding:4px;margin:0 -4px;scrollbar-width:none}
  .workspace-settings-nav::-webkit-scrollbar{display:none}
  .settings-section{grid-template-columns:1fr}
}
@media(max-width:860px){
  .pricing-grid{grid-template-columns:1fr;max-width:560px}
  .featured-grid{grid-template-columns:1fr 1fr}
  .featured-grid .pop-card:last-child{display:none}
  .faq-grid{grid-template-columns:1fr}
  .footer{grid-template-columns:1fr 1fr}
  .footer-brand{grid-column:1/-1}
}
@media(max-width:820px){
  .top-links{display:none}
  .nav-menu{display:block}
  .topbar{height:64px;gap:12px}
  html{scroll-padding-top:80px}
  .browser-bar{top:64px}
}
@media(max-width:760px){
  .workspace-app-shell{display:block}
  .workspace-sidebar{display:none}
  .workspace-content{padding:20px 16px 112px}
  .workspace-topbar{height:52px;padding:0 16px}
  .workspace-breadcrumb{display:none}
  .workspace-topbar-link{white-space:nowrap}
  .workspace-heading{flex-direction:column;align-items:stretch;gap:16px}
  .workspace-heading.is-library-heading{flex-direction:row;align-items:center}
  .workspace-mobile-nav{position:fixed;z-index:30;right:0;bottom:0;left:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .workspace-mobile-nav .workspace-nav-link{flex-direction:column;justify-content:center;gap:3px;min-height:54px;padding:4px 2px;font-size:12px}
  .workspace-mobile-nav .workspace-nav-link[aria-current=page]{background:transparent}
  .workspace-mobile-nav .workspace-nav-link[aria-current=page] span{color:var(--ink)}
  .library-search{flex:1 1 140px}
  .library-view-toggle{order:1;flex:none}
  .library-refresh{order:2;flex:none}
  .library-select{order:3;flex:1 1 calc(50% - 4px);min-width:0}
  .library-select select{width:100%}
  .workspace-library{grid-template-columns:1fr 1fr;gap:12px}
  .workspace-library.is-list-view .workspace-pop-card{grid-template-columns:104px minmax(0,1fr)}
  .workspace-library.is-list-view .workspace-pop-card-footer{grid-template-columns:minmax(0,1fr);gap:2px;padding-right:56px}
  .workspace-library.is-list-view .pop-list-url{display:none}
  .workspace-library.is-list-view .workspace-browser-chrome{display:none}
  .workspace-library.is-list-view .workspace-card-frame{border-radius:7px}
  .compose-fields,#page-editor{padding:20px}
  .source-toolbar{flex-direction:column;align-items:stretch;gap:4px;padding:8px}
  .source-filename{padding:4px 8px 0}
  .source-tools{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  .source-tools::-webkit-scrollbar{display:none}
  .source-tools button{flex:none}
  .editor-topline{flex-direction:column;align-items:stretch}
  .editor-ai{flex-direction:column;align-items:stretch;padding:20px}
  .setting-group{padding:4px 18px}
  .setting-row,.setting-row:not(:has(>.setting-action)){grid-template-columns:1fr;gap:10px}
  .setting-action{justify-self:start}
}
@media(max-width:600px){
  :root{--gutter:20px}
  body{font-size:15.5px}
  .home>section{padding:64px 0}
  .home>.hero{padding:32px 0 56px}
  .hero h1{font-size:clamp(46px,13vw,64px)}
  .hero-lede{margin-top:20px}
  .publisher{padding:18px;border-radius:var(--r-lg);margin-right:8px}
  .publisher::before{inset:auto -8px -8px 20px;border-radius:var(--r-lg)}
  .upload{padding:24px 16px}
  .publish-row{grid-template-columns:1fr}
  .publish-row .primary{width:100%}
  .section-head{grid-template-columns:1fr;margin-bottom:28px}
  .section-head .arrow-link{grid-column:1;grid-row:auto;margin-top:8px}
  .wall-item{width:240px}
  .wall-item:nth-child(even){margin-top:20px}
  .ways-grid{grid-template-columns:1fr}
  .way{padding:24px;border-radius:var(--r-lg)}
  .chat{padding:14px;font-size:14px}
  .home>.pro-band{margin:0 calc(-1*var(--gutter) + 8px);padding:32px 24px;border-radius:var(--r-xl)}
  .profile-preview .frame{box-shadow:8px 8px 0 #141413}
  .profile-sheet{padding:20px}
  .home>.closing{padding:80px 0 16px}
  .actions>.primary,.actions>.secondary{flex:1 1 auto}
  .page-intro{padding:40px 0 32px}
  .featured-grid{grid-template-columns:1fr;margin-bottom:48px}
  .featured-grid .pop-card:last-child{display:grid}
  .featured-grid .pop-card:nth-child(n+2){display:none}
  .browser-bar{flex-direction:column;align-items:stretch;gap:10px;position:static}
  .browser-bar h2{font-size:26px}
  .search-field{width:100%}
  .pop-filters{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(-1*var(--gutter));padding:0 var(--gutter) 8px;scrollbar-width:none}
  .pop-filters::-webkit-scrollbar{display:none}
  .pop-filters button{flex:none}
  .category-grid{gap:32px}
  .cta-band{flex-direction:column;align-items:stretch}
  .plan-price strong{font-size:52px}
  .faq{margin-top:64px}
  .tool-list div{grid-template-columns:1fr;gap:6px}
  .steps li{padding-left:48px}
  .linkbox{flex-wrap:wrap;padding:12px}
  .linkbox .copy{width:100%}
  .panel-page,.workspace-auth,.legal-page{padding-top:40px}
  .panel{padding:20px;border-radius:var(--r-lg)}
  .link-card{padding:14px;border-radius:var(--r-lg)}
  .link-card-bar{padding:0 14px}
  .link-card-bar input{font-size:13.5px}
  .meta-grid{grid-template-columns:1fr}
  .footer{margin-top:64px;padding:40px 0 48px;gap:28px}
  .workspace-library{grid-template-columns:1fr}
  .workspace-dialog{padding:22px}
  .workspace-dialog .actions>*{flex:1 1 auto}
}
@media(max-width:360px){
  .brand-wordmark{font-size:21px}
  .brand-mark{width:28px;height:28px}
  .nav-cta{padding:0 14px;font-size:13px}
  .billing-switch button{padding:0 12px;font-size:14px}
  .library-select select{padding:0 30px 0 12px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .wall-row{animation:none!important}
  .wall-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding:0 var(--gutter);scroll-snap-type:x mandatory}
  .wall-item{scroll-snap-align:start}
  .wall-item[aria-hidden=true]{display:none}
  a.frame:hover,a:hover>.frame,.workspace-pop-card:hover{transform:none}
}
@media print{
  .topbar,.footer,.workspace-sidebar,.workspace-mobile-nav{display:none}
}

/* Keep card menus above neighbouring previews, including on touch screens. */
.workspace-pop-card:focus-within{z-index:5}
@media(pointer:coarse){.workspace-preview-actions{opacity:1}.workspace-preview-actions>a,.workspace-preview-actions>button,.workspace-preview-actions .overflow-toggle{min-height:44px}.workspace-preview-actions .overflow-toggle{width:44px}.overflow-panel{top:48px}}
@media(max-width:420px){.workspace-preview-actions>button[data-duplicate]{display:none}}

.contact-form{display:grid;gap:12px;max-width:40rem;margin:24px 0 48px}.contact-form input,.contact-form textarea{width:100%;min-width:0}.contact-form textarea{resize:vertical}.contact-form button{justify-self:start}.contact-form [role="status"]:empty{display:none}

/* Focused account entry keeps support/legal links without marketing navigation. */
.footer.account-footer{display:flex;justify-content:center;gap:24px;padding:24px 0}