/* ============================================================
   NoteClip — Design System
   Governed by CLAUDE.md (Apple HIG, Liquid Glass, spring physics)
   ============================================================ */

/* ---------------------------------- TOKENS (light) */
:root{
  color-scheme: light dark;

  /* Ground — cool neutral biased toward the brand azure, not a default grey */
  --bg:          #F1F4F9;
  --bg-solid:    #FFFFFF;
  --surface:     #FFFFFF;
  --surface-2:   #EDF1F7;
  --surface-3:   #E1E8F1;

  /* Ink */
  --ink:         #0A1220;
  --ink-2:       #48586E;
  --ink-3:       #8291A5;

  /* Brand — Apple system blue, matching the NoteClip mark */
  --accent:      #007AFF;
  --accent-2:    #0060DF;
  --accent-ink:  #FFFFFF;
  --accent-wash: rgba(0,122,255,.10);

  /* Liquid Glass */
  --glass:       rgba(255,255,255,.60);
  --glass-2:     rgba(255,255,255,.44);
  --glass-brd:   rgba(10,18,32,.08);
  --glass-hi:    inset 0 1px 0 rgba(255,255,255,.90);
  --glass-shadow:0 1px 2px rgba(10,18,32,.04), 0 16px 40px -16px rgba(10,18,32,.20);
  --blur:        blur(20px) saturate(180%);

  /* Hairlines */
  --line:        rgba(10,18,32,.10);
  --line-2:      rgba(10,18,32,.16);
  --dot:         rgba(10,18,32,.07);

  /* Physical paper (the note itself stays a real object, not glass) */
  --paper:       #FFFDF6;
  --paper-2:     #FAF5E8;
  --paper-brd:   #EBE2CC;
  --paper-ink:   #2B2720;
  --paper-shadow:0 10px 24px -10px rgba(60,50,20,.34), 0 2px 4px rgba(60,50,20,.12);

  --clip-off:    #97A5B7;   /* paperclip, no note */
  --good:        #30A46C;

  /* Geometry — squircle range per CLAUDE.md */
  --r-card: 24px;
  --r-md:   18px;
  --r-sm:   12px;
  --r-xs:   8px;
  --r-pill: 999px;

  /* Motion — natural spring per CLAUDE.md */
  --spring: cubic-bezier(0.16, 1, 0.3, 1);

  /* Type — native stack per CLAUDE.md */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ---------------------------------- TOKENS (dark) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:          #070A10;
    --bg-solid:    #0D121C;
    --surface:     #121826;
    --surface-2:   #19212F;
    --surface-3:   #232C3D;

    --ink:         #EDF2F8;
    --ink-2:       #A6B3C5;
    --ink-3:       #75839A;

    --accent:      #0A84FF;
    --accent-2:    #409CFF;
    --accent-ink:  #FFFFFF;
    --accent-wash: rgba(10,132,255,.16);

    --glass:       rgba(20,26,38,.55);
    --glass-2:     rgba(20,26,38,.38);
    --glass-brd:   rgba(255,255,255,.15);
    --glass-hi:    inset 0 1px 0 rgba(255,255,255,.20);
    --glass-shadow:0 1px 2px rgba(0,0,0,.40), 0 20px 48px -18px rgba(0,0,0,.70);

    --line:        rgba(255,255,255,.10);
    --line-2:      rgba(255,255,255,.17);
    --dot:         rgba(255,255,255,.06);

    --paper:       #F7F3E8;
    --paper-2:     #EFE9D9;
    --paper-brd:   #DFD5BC;
    --paper-ink:   #2B2720;
    --paper-shadow:0 14px 32px -12px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.44);

    --clip-off:    #5B6A80;
    --good:        #3DD68C;
  }
}
:root[data-theme="dark"]{
  --bg:#070A10; --bg-solid:#0D121C; --surface:#121826; --surface-2:#19212F; --surface-3:#232C3D;
  --ink:#EDF2F8; --ink-2:#A6B3C5; --ink-3:#75839A;
  --accent:#0A84FF; --accent-2:#409CFF; --accent-ink:#FFFFFF; --accent-wash:rgba(10,132,255,.16);
  --glass:rgba(20,26,38,.55); --glass-2:rgba(20,26,38,.38);
  --glass-brd:rgba(255,255,255,.15); --glass-hi:inset 0 1px 0 rgba(255,255,255,.20);
  --glass-shadow:0 1px 2px rgba(0,0,0,.40), 0 20px 48px -18px rgba(0,0,0,.70);
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.17); --dot:rgba(255,255,255,.06);
  --paper:#F7F3E8; --paper-2:#EFE9D9; --paper-brd:#DFD5BC; --paper-ink:#2B2720;
  --paper-shadow:0 14px 32px -12px rgba(0,0,0,.66), 0 2px 6px rgba(0,0,0,.44);
  --clip-off:#5B6A80; --good:#3DD68C;
}

/* ---------------------------------- BASE */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; display:block; }
[hidden]{ display:none !important; }
button{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* Ambient ground: light anchored to the corners, never a blob in the middle */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58rem 38rem at 100% -6%,  var(--accent-wash), transparent 62%),
    radial-gradient(46rem 34rem at -8% 104%,  var(--accent-wash), transparent 62%);
}
.bg::after{
  content:""; position:absolute; inset:0;
  background-image: radial-gradient(circle, var(--dot) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(70rem 50rem at 50% 0%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(70rem 50rem at 50% 0%, #000, transparent 78%);
}

.shell{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding-inline:clamp(18px,4vw,32px); }

/* ---------------------------------- GLASS PRIMITIVE */
.glass{
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd);
  border-radius:var(--r-card);
  box-shadow:var(--glass-hi), var(--glass-shadow);
}

/* ---------------------------------- NAV */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:20;
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur);
  backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);
}
.nav__in{
  max-width:1120px; margin:0 auto;
  padding:11px clamp(18px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:30px; height:30px; border-radius:var(--r-xs); }
.brand b{ font-size:16px; font-weight:600; letter-spacing:-.01em; }
.nav__right{ display:flex; align-items:center; gap:6px; }
.nav__link{
  font-size:14px; font-weight:500; color:var(--ink-2);
  padding:8px 13px; border-radius:var(--r-pill);
  transition:color .4s var(--spring), background .4s var(--spring);
}
.nav__link:hover{ color:var(--ink); background:var(--surface-2); }

.iconbtn{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--glass-brd); border-radius:var(--r-pill);
  background:var(--glass); color:var(--ink-2); cursor:pointer;
  box-shadow:var(--glass-hi);
  transition:transform .5s var(--spring), color .4s var(--spring);
}
.iconbtn:hover{ color:var(--accent); transform:translateY(-1px); }
.iconbtn:active{ transform:scale(.94); }
.iconbtn svg{ width:17px; height:17px; }
.iconbtn .moon{ display:none; }
:root[data-theme="dark"] .iconbtn .moon{ display:block; }
:root[data-theme="dark"] .iconbtn .sun{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .iconbtn .moon{ display:block; }
  :root:not([data-theme="light"]) .iconbtn .sun{ display:none; }
}

/* ---------------------------------- HERO */
.hero{
  padding-block: clamp(44px,7vw,84px) clamp(28px,4vw,44px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:20px;
}
.badges{
  list-style:none; margin:0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px;
}
.badges li{
  display:inline-flex; align-items:center; gap:7px;
  font-size:12.5px; font-weight:500; letter-spacing:-.005em; color:var(--ink-2);
  padding:7px 14px 7px 11px;
  background:var(--glass);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border:1px solid var(--glass-brd); border-radius:var(--r-pill);
  box-shadow:var(--glass-hi);
}
.badges svg{ width:14px; height:14px; color:var(--accent); flex:none; }

h1{
  margin:0;
  font-size:clamp(2.3rem, 1.35rem + 3.6vw, 4.1rem);
  line-height:1.03;
  letter-spacing:-.035em;
  font-weight:700;
  max-width:15ch;
  text-wrap:balance;
}
.sub{
  margin:0; max-width:52ch;
  font-size:clamp(1.02rem,.96rem + .42vw,1.22rem);
  line-height:1.48; color:var(--ink-2); letter-spacing:-.011em;
  text-wrap:pretty;
}

/* ---------------------------------- BUTTONS */
.cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:6px; }
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-size:16px; font-weight:600; letter-spacing:-.012em;
  padding:14px 24px; border-radius:var(--r-pill);
  border:1px solid transparent; cursor:pointer;
  transition:transform .5s var(--spring), box-shadow .5s var(--spring), background .4s var(--spring);
}
.btn--primary{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  color:var(--accent-ink);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26), 0 10px 26px -10px rgba(0,122,255,.60);
}
.btn--primary:hover{ transform:translateY(-2px) scale(1.012); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 18px 38px -12px rgba(0,122,255,.62); }
.btn--primary:active{ transform:scale(.972); }
.btn--ghost{
  background:var(--glass); color:var(--ink);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-color:var(--glass-brd);
  box-shadow:var(--glass-hi);
}
.btn--ghost:hover{ transform:translateY(-2px) scale(1.012); color:var(--accent); }
.btn--ghost:active{ transform:scale(.972); }
.btn svg{ width:17px; height:17px; }

/* Chrome mark */
.chrome{
  width:21px; height:21px; border-radius:50%; flex:none; position:relative;
  background:conic-gradient(from -90deg, #D93025 0 120deg, #1E8E3E 120deg 240deg, #FBBC05 240deg 360deg);
}
.chrome::after{
  content:""; position:absolute; inset:30%; border-radius:50%;
  background:#1A73E8; box-shadow:0 0 0 2.4px rgba(255,255,255,.95);
}

.toast{
  margin:0; font-size:13px; font-weight:500; color:var(--accent);
  opacity:0; transform:translateY(-4px);
  transition:opacity .4s var(--spring), transform .4s var(--spring);
}
.toast.show{ opacity:1; transform:none; }

/* ---------------------------------- BENTO */
.bento{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(12px,1.4vw,18px);
  padding-bottom:clamp(40px,6vw,72px);
}
.cell{ padding:clamp(20px,2vw,26px); display:flex; flex-direction:column; min-width:0; }
.cell--demo{ grid-column:span 2; grid-row:span 2; gap:18px; }
.cell--privacy{ grid-column:3; gap:14px; }
.cell--speed{ grid-column:3; gap:14px; }

.cell__eyebrow{
  font-size:11.5px; font-weight:600; letter-spacing:.055em; text-transform:uppercase;
  color:var(--accent);
}
.cell h2{
  margin:6px 0 0;
  font-size:clamp(1.18rem,1.06rem + .42vw,1.44rem);
  line-height:1.2; letter-spacing:-.022em; font-weight:650;
  text-wrap:balance;
}
.cell p{ margin:8px 0 0; font-size:14.5px; line-height:1.52; color:var(--ink-2); letter-spacing:-.008em; }

.cell__ico{
  width:42px; height:42px; border-radius:var(--r-sm); display:grid; place-items:center;
  background:var(--accent-wash); color:var(--accent);
  border:1px solid var(--glass-brd);
}
.cell__ico svg{ width:21px; height:21px; }

.facts{ list-style:none; margin:auto 0 0; padding:14px 0 0; display:flex; flex-wrap:wrap; gap:7px; border-top:1px solid var(--line); }
.facts li{
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  color:var(--ink-2); background:var(--surface-2);
  padding:5px 9px; border-radius:var(--r-xs); border:1px solid var(--line);
}

/* keyboard shortcuts */
.keys{ margin:auto 0 0; padding:0; display:flex; flex-direction:column; gap:1px; }
.keys .row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:9px 0; border-top:1px solid var(--line);
}
.keys .row:first-child{ border-top:none; }
.keys dt{ font-size:13.5px; color:var(--ink-2); letter-spacing:-.008em; min-width:0; }
.keys dd{ margin:0; display:flex; gap:4px; flex:none; }
kbd{
  font-family:var(--font); font-size:11.5px; font-weight:600; line-height:1;
  min-width:21px; padding:5px 6px; text-align:center;
  color:var(--ink); background:var(--surface);
  border:1px solid var(--line-2); border-radius:6px;
  box-shadow:0 1px 0 var(--line-2);
}

/* ---------------------------------- DEMO: browser mockup */
/* the demo fills whatever height the bento row gives it — no dead space */
.demo{ flex:1; display:flex; flex-direction:column; min-height:0; }
.browser{
  flex:1; display:flex; flex-direction:column; min-height:0;
  border-radius:var(--r-md);
  background:var(--bg-solid);
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(10,18,32,.05), 0 18px 44px -20px rgba(10,18,32,.34);
  transition:transform .6s var(--spring);
  transform-style:preserve-3d;
}
.bar{
  display:flex; align-items:center; gap:11px; padding:10px 13px;
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-bottom:1px solid var(--line);
}
.dots{ display:flex; gap:6px; flex:none; }
.dots i{ width:10px; height:10px; border-radius:50%; }
.dots i:nth-child(1){ background:#FF5F57; } .dots i:nth-child(2){ background:#FEBC2E; } .dots i:nth-child(3){ background:#28C840; }
.omni{
  flex:1; min-width:0; height:27px; border-radius:var(--r-pill);
  background:var(--surface-2); border:1px solid var(--line);
  display:flex; align-items:center; gap:7px; padding:0 12px;
  font-size:12px; color:var(--ink-3);
}
.omni svg{ width:11px; height:11px; flex:none; }
.omni span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.extico{ width:23px; height:23px; border-radius:7px; flex:none; position:relative; }
.extico img{ width:23px; height:23px; border-radius:7px; }
.extico .count{
  position:absolute; top:-5px; right:-5px; min-width:15px; height:15px; padding:0 4px;
  border-radius:var(--r-pill); background:var(--accent); color:#fff;
  font-size:9.5px; font-weight:700; display:grid; place-items:center;
  border:2px solid var(--bg-solid);
  transform:scale(0); transition:transform .5s var(--spring);
}
.extico .count.show{ transform:scale(1); }

.board{ flex:1; position:relative; padding:12px 13px 13px; min-height:186px; background:var(--surface-2); }
.tabs{ display:flex; gap:6px; align-items:flex-end; position:relative; z-index:3; }
.tab{
  flex:1 1 0; min-width:0; display:flex; align-items:center; gap:7px;
  padding:8px 10px; cursor:pointer;
  background:var(--glass-2);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line); border-bottom:none;
  border-radius:10px 10px 0 0;
  color:var(--ink-2); font-size:12.5px; font-weight:500; letter-spacing:-.008em;
  transition:transform .5s var(--spring), background .4s var(--spring), color .4s var(--spring);
}
.tab:hover{ transform:translateY(-2px); }
.tab.active{ background:var(--bg-solid); color:var(--ink); transform:translateY(-2px); z-index:4; }
.fav{ width:18px; height:18px; border-radius:5px; flex:none; display:grid; place-items:center; }
.fav svg{ width:11px; height:11px; color:#fff; }
.tab__clip{ width:11px; height:11px; flex:none; color:var(--accent); opacity:0; transform:translateX(-3px); transition:opacity .4s var(--spring), transform .4s var(--spring); }
.tab.has-note .tab__clip{ opacity:1; transform:none; }
.tab__title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* the open web page */
.pageframe{
  position:absolute; left:13px; right:13px; top:46px; bottom:13px;
  border-radius:var(--r-sm); background:var(--bg-solid);
  border:1px solid var(--line); overflow:hidden; z-index:1;
}
.pf{ padding:15px 17px; opacity:.5; }
.pf-bar{ display:block; width:38%; height:9px; border-radius:5px; background:var(--line-2); margin-bottom:13px; }
.pf-l{ display:block; height:7px; border-radius:4px; background:var(--surface-3); margin-bottom:8px; }
.pf-l1{width:70%} .pf-l2{width:82%} .pf-l3{width:63%} .pf-l4{width:74%}

.clip{
  position:absolute; top:-11px; right:28px; width:34px; height:34px; z-index:6;
  color:var(--clip-off); pointer-events:none;
  filter:drop-shadow(0 4px 6px rgba(10,18,32,.22));
  transition:color .5s var(--spring);
  animation:float 5s ease-in-out infinite;
}
.pageframe.noted .clip{ color:var(--accent); }
@keyframes float{ 0%,100%{ translate:0 0; } 50%{ translate:0 -3px; } }
.clip.bounce{ animation:clipbounce .75s var(--spring); }
@keyframes clipbounce{
  0%{ transform:scale(1) rotate(0); } 32%{ transform:scale(1.2) rotate(-9deg); }
  62%{ transform:scale(.97) rotate(3deg); } 100%{ transform:scale(1) rotate(0); }
}

/* the note — physical paper, deliberately not glass */
.hanger{ position:absolute; top:6px; right:13px; width:148px; z-index:4; transform-origin:calc(100% - 25px) -6px; }
.hanger.empty{ display:none; }
.note{
  position:relative;
  background:linear-gradient(180deg, var(--paper), var(--paper-2));
  color:var(--paper-ink);
  border:1px solid var(--paper-brd);
  border-radius:10px 4px 10px 10px;
  padding:10px 12px 11px;
  box-shadow:var(--paper-shadow);
  font-size:12.5px; line-height:1.34;
  transform-origin:calc(100% - 25px) -6px;
  cursor:grab;
}
.note::before{
  content:""; position:absolute; top:0; right:0; width:15px; height:15px;
  background:linear-gradient(225deg, color-mix(in srgb, var(--paper-brd) 70%, var(--paper)) 50%, transparent 50%);
  border-top-right-radius:4px;
}
.note__from{ font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:color-mix(in srgb, var(--paper-ink) 52%, transparent); margin-bottom:3px; }
.note__text{ font-weight:500; word-break:break-word; }
.hanger.show .note{ animation:unfurl .75s var(--spring); }
@keyframes unfurl{
  0%{ transform:rotate(12deg) translateY(-12px) scale(.9); opacity:0; }
  60%{ transform:rotate(-4deg) translateY(2px) scale(1.01); opacity:1; }
  100%{ transform:none; opacity:1; }
}
.hanger.swing{ animation:swing 1.5s var(--spring); }
@keyframes swing{ 0%{rotate:0;} 22%{rotate:7deg;} 48%{rotate:-5deg;} 70%{rotate:3deg;} 88%{rotate:-1.4deg;} 100%{rotate:0;} }

/* NoteClip surfaces — glass floating over the page */
.panel{
  display:grid; grid-template-columns:1.1fr .9fr;
  background:var(--glass-2);
  -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur);
  border-top:1px solid var(--line);
}
.editor{ padding:14px 16px 15px; border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; }
.editor__head{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.editor__ey{ font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink-3); }
.editor__title{ font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#noteInput{
  width:100%; min-height:60px; resize:none; font:inherit; font-size:13.5px; line-height:1.4;
  color:var(--ink); background:var(--surface); padding:10px 11px;
  border:1.5px solid var(--line-2); border-radius:var(--r-sm);
  transition:border-color .4s var(--spring), box-shadow .4s var(--spring);
}
#noteInput::placeholder{ color:var(--ink-3); }
#noteInput:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-wash); }
.editor__foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.linkbtn{ border:none; background:none; cursor:pointer; color:var(--ink-3); font-size:12.5px; font-weight:600; padding:6px 2px; border-radius:var(--r-xs); transition:color .4s var(--spring); }
.linkbtn:hover{ color:#E5484D; }
.linkbtn[disabled]{ opacity:0; pointer-events:none; }
.addbtn{
  display:inline-flex; align-items:center; gap:7px; border:none; cursor:pointer;
  background:linear-gradient(180deg, var(--accent), var(--accent-2)); color:#fff;
  font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:var(--r-pill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24), 0 6px 14px -6px rgba(0,122,255,.6);
  transition:transform .5s var(--spring);
}
.addbtn:hover{ transform:translateY(-1px) scale(1.02); }
.addbtn:active{ transform:scale(.96); }
.addbtn kbd{ background:rgba(255,255,255,.2); border:none; box-shadow:none; color:#fff; font-size:10.5px; padding:3px 5px; }

.library{ padding:14px 15px 15px; min-width:0; }
.library__head{ display:flex; align-items:baseline; gap:7px; margin-bottom:9px; }
.library__head b{ font-size:14px; font-weight:600; letter-spacing:-.015em; }
.library__head span{ font-size:10.5px; color:var(--ink-3); }
.lib{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.lib li{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:var(--r-xs); cursor:pointer; transition:background .4s var(--spring); }
.lib li:hover{ background:var(--surface-2); }
.lib li.active{ background:var(--accent-wash); }
.lib__fav{ width:17px; height:17px; border-radius:5px; flex:none; display:grid; place-items:center; }
.lib__fav svg{ width:10px; height:10px; color:#fff; }
.lib__b{ min-width:0; flex:1; }
.lib__t{ font-size:12px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib__n{ font-size:10.5px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lib__c{ width:13px; height:13px; flex:none; color:var(--clip-off); transition:color .4s var(--spring); }
.lib li.noted .lib__c{ color:var(--accent); }
.lib li.pop .lib__c{ animation:pop .55s var(--spring); }
@keyframes pop{ 0%{transform:scale(1);} 40%{transform:scale(1.45) rotate(-12deg);} 100%{transform:scale(1);} }

.demo__hint{ margin:12px 0 0; font-size:12.5px; color:var(--ink-3); display:flex; align-items:center; gap:7px; }
.demo__hint svg{ width:13px; height:13px; color:var(--accent); flex:none; }

/* ---------------------------------- PRIVACY DOC */
.doc{ max-width:720px; margin:0 auto; padding-block:clamp(34px,5vw,60px) 60px; }
.doc__eyebrow{ font-size:11.5px; font-weight:600; letter-spacing:.055em; text-transform:uppercase; color:var(--accent); }
.doc h1{ font-size:clamp(2rem,1.5rem + 2vw,2.9rem); margin:.3em 0 0; max-width:none; letter-spacing:-.03em; }
.meta{ margin:22px 0 0; padding:16px 20px; display:flex; flex-wrap:wrap; gap:12px 30px; font-size:13.5px; }
.meta div{ display:flex; flex-direction:column; gap:2px; }
.meta dt{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3); }
.meta dd{ margin:0; font-weight:600; }
.tldr{ margin:18px 0 0; padding:18px 20px; display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.55; }
.tldr svg{ width:20px; height:20px; flex:none; color:var(--accent); margin-top:2px; }
.tldr p{ margin:0; color:var(--ink); }
.doc section{ margin-top:36px; }
.doc h2{
  margin:0 0 12px; padding-bottom:10px; border-bottom:1px solid var(--line);
  font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem); font-weight:650; letter-spacing:-.02em;
  display:flex; align-items:baseline; gap:11px;
}
.doc h2 .n{ font-size:13px; font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.doc p{ margin:0 0 14px; color:var(--ink-2); font-size:15.5px; line-height:1.65; letter-spacing:-.008em; }
.doc p:last-child{ margin-bottom:0; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc code{ font-family:var(--mono); font-size:.85em; background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--ink); }
.doc a{ color:var(--accent); }
.doc a:hover{ text-decoration:underline; }
.term{ color:var(--accent); font-weight:600; }

/* ---------------------------------- FOOTER */
.foot{
  border-top:1px solid var(--line);
  padding-block:20px 28px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px 16px;
  font-size:12.5px; color:var(--ink-3);
}
.foot a:hover{ color:var(--accent); }
.foot i{ width:3px; height:3px; border-radius:50%; background:var(--line-2); }

/* ---------------------------------- RESPONSIVE */
@media (max-width: 900px){
  .bento{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .cell--demo{ grid-column:span 2; grid-row:auto; }
  .cell--privacy{ grid-column:1; }
  .cell--speed{ grid-column:2; }
}
@media (max-width: 640px){
  .bento{ grid-template-columns:1fr; }
  .cell--demo, .cell--privacy, .cell--speed{ grid-column:1; }
  .panel{ grid-template-columns:1fr; }
  .editor{ border-right:none; border-bottom:1px solid var(--line); }
  .pageframe{ display:none; }
  .board{ min-height:auto; padding-bottom:6px; }
  .nav__link{ display:none; }
}
@media (max-width: 420px){
  .tab .tab__title{ display:none; }
  .tab{ flex:0 0 auto; justify-content:center; padding:8px; }
  .tab.active .tab__title{ display:inline; }
}

/* ---------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .clip{ animation:none; }
}