/* Drawr — shared styles for the public drawer, the editor and the homepage.
   Warm charcoal, one amber accent, Geist. Calm and premium; the glow is the only loud thing. */
:root{
  --bg:#F4F1EA; --bg-2:#FBFAF6; --panel:#FFFDF8; --card:#FFFFFF; --card-2:#FFFCF5; --card-hi:#F3EFE6;
  --well:#EAE5DA; --well-2:#E3DDD0;
  --line:rgba(40,30,15,.09); --line-2:rgba(40,30,15,.16);
  --ink:#1D1A15; --ink-2:#5F594F; --ink-3:#8E877B;
  --accent:#F5A524; --accent-ink:#2A1A00; --accent-text:#9A6200; --accent-soft:rgba(245,165,36,.16); --accent-glow:rgba(245,165,36,.42);
  --ok:#2F8A55; --err:#C2412D;
  --shadow:0 1px 2px rgba(40,30,15,.05),0 6px 16px -10px rgba(40,30,15,.18);
  --r:20px; --gap:14px;
  --sans:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:light;
}
[data-theme=mint]{--accent:#3FCF9B;--accent-ink:#022117;--accent-text:#0D7552;--accent-soft:rgba(63,207,155,.16);--accent-glow:rgba(63,207,155,.4)}
[data-theme=violet]{--accent:#9D7CFF;--accent-ink:#fff;--accent-text:#5B3CC9;--accent-soft:rgba(157,124,255,.16);--accent-glow:rgba(157,124,255,.4)}
[data-theme=rose]{--accent:#FF7E98;--accent-ink:#3A0612;--accent-text:#B2304D;--accent-soft:rgba(255,126,152,.16);--accent-glow:rgba(255,126,152,.4)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
svg.i{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.brand{display:inline-flex;align-items:center;gap:9px;font-weight:600;letter-spacing:-.01em;text-decoration:none;color:var(--ink)}
.brand svg{width:22px;height:22px;color:var(--ink)}
.brand svg .lit{color:var(--accent)}

/* buttons */
.btn{appearance:none;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 .95rem/1 var(--sans);color:var(--accent-ink);background:var(--accent);padding:0 18px;min-height:44px;border-radius:12px;text-decoration:none;white-space:nowrap;transition:filter .15s,transform .15s}
.btn:hover{filter:brightness(1.07)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.5;cursor:default}
.ghost{appearance:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 .92rem var(--sans);color:var(--ink);background:#fff;border:1px solid var(--line-2);padding:0 14px;min-height:40px;border-radius:11px;text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.ghost:hover{background:var(--card-hi)}
.ghost[aria-pressed=true]{border-color:var(--accent);color:var(--accent-text)}
.icon-btn{appearance:none;cursor:pointer;width:36px;height:36px;display:inline-grid;place-items:center;border-radius:10px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2)}
.icon-btn:hover{color:var(--ink);background:var(--card-2)}

/* inputs */
.input,textarea.input{width:100%;font:400 1rem var(--sans);padding:12px 14px;border-radius:12px;border:1px solid var(--line-2);background:#fff;color:var(--ink);box-shadow:0 1px 1px rgba(40,30,15,.03)}
textarea.input{resize:vertical;min-height:84px;line-height:1.45}
.input::placeholder{color:#ABA497}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.label{display:block;font-size:.82rem;font-weight:500;color:var(--ink-2);margin:16px 0 6px}
.help{margin:6px 0 0;font-size:.82rem;color:var(--ink-3)}
.msg{min-height:1.3em;margin:10px 0 0;font-size:.88rem;color:var(--ink-2)}
.msg.err{color:var(--err)}

/* ---------------------------------------------------------------- the drawer (public page + editor canvas) */
.dr-wrap{width:min(1180px,100% - 48px);margin-inline:auto;display:grid;grid-template-columns:300px minmax(0,1fr);gap:48px;align-items:start;padding:56px 0 40px}
.dr-profile{position:sticky;top:48px}
.avatar{width:128px;height:128px;border-radius:50%;object-fit:cover;background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 55%,#fff),var(--accent));display:grid;place-items:center;font-size:3rem;font-weight:650;letter-spacing:-.03em;color:#fff;box-shadow:0 0 0 4px #fff,0 12px 30px -12px rgba(40,30,15,.35);overflow:hidden}
.dr-name{margin:24px 0 0;font-size:2.4rem;line-height:1.1;letter-spacing:-.025em;font-weight:650;text-wrap:balance;overflow-wrap:anywhere}
.dr-handle{margin:6px 0 0;color:var(--ink-3);font-family:var(--mono);font-size:.86rem}
.dr-bio{margin:14px 0 0;color:var(--ink-2);font-size:1.06rem;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.dr-status{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:.84rem;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 12px}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.dot.on{background:#FF4D3D;box-shadow:0 0 0 0 rgba(255,77,61,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,77,61,.55)}70%{box-shadow:0 0 0 9px rgba(255,77,61,0)}100%{box-shadow:0 0 0 0 rgba(255,77,61,0)}}

.drawer{position:relative}
.drawer::before{content:none}

.grid{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:calc((var(--cellpx,170px) - var(--gap)) / 2);grid-auto-flow:row dense;gap:var(--gap)}
.card{--rad:24px;container-type:size;position:relative;grid-column:span 1;grid-row:span 2;border-radius:var(--rad);background:#fff;box-shadow:0 0 0 1px rgba(40,30,15,.07),0 1px 2px rgba(40,30,15,.04),0 10px 26px -18px rgba(40,30,15,.28);overflow:hidden;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;padding:20px;min-width:0;isolation:isolate;transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s}
a.card:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(40,30,15,.09),0 24px 44px -24px rgba(40,30,15,.45)}
a.card:active{transform:translateY(-1px) scale(.992)}
.card > *{flex-shrink:0}
.card.w{grid-column:span 2}
.card.t{grid-row:span 4}
.card.l{grid-column:span 2;grid-row:span 4}

/* icons: platform logos on their brand color, app icons edge to edge, other sites on white */
.fav{--s:44px;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .26);position:relative;display:grid;place-items:center;flex:none;overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px rgba(40,30,15,.1)}
.fav img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:18%}
.fav.tiny img{padding:27%}
.fav .mono{font:650 calc(var(--s) * .42)/1 var(--sans);letter-spacing:-.02em;color:var(--ink-2)}
.fav.ok .mono,.fav.tiny .mono,.fav.brand .mono,.fav.custom .mono{display:none}
.fav.brand{background:var(--bc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
.fav.brand img{padding:23%;filter:brightness(0) invert(1)}
.fav.brand.dark img{filter:brightness(0)}
.fav.custom{background:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.fav.custom img{padding:0;object-fit:cover;z-index:-1}
.fav.mini{--s:32px}

/* corner actions */
.c-act{position:absolute;top:18px;right:18px;z-index:2;font:600 .76rem/1 var(--sans);letter-spacing:-.005em;padding:8px 13px;border-radius:999px;background:var(--bc,var(--ink));color:#fff;white-space:nowrap;transition:filter .2s,transform .2s}
.card[data-ink] .c-act{color:#111}
a.card:hover .c-act{filter:brightness(1.08);transform:translateY(-1px)}
.c-arrow{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--card-hi);color:var(--ink-2);transition:background .2s,color .2s}
a.card:hover .c-arrow{background:var(--ink);color:#fff}
.c-badge{position:absolute;top:18px;right:18px;z-index:3;font:600 .74rem/1 var(--sans);padding:8px 11px;border-radius:999px;background:var(--accent);color:var(--accent-ink);max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card.has-badge > .c-act,.card.has-badge > .c-arrow{display:none}

/* words */
.c-body{margin-top:auto;min-width:0}
.c-title{margin:0;font-size:1rem;font-weight:620;line-height:1.28;letter-spacing:-.014em;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.c-sub{margin:4px 0 0;font-size:.84rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-text{margin:6px 0 0;font-size:.88rem;line-height:1.45;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* bigger cards without a picture: a showcase panel (brand color + logo, or the app icon) */
.c-panel{display:none;position:absolute;z-index:0;border-radius:calc(var(--rad) - 8px);overflow:hidden;place-items:center;background:linear-gradient(160deg,#FAF7F1,#EEE8DC);box-shadow:inset 0 0 0 1px rgba(40,30,15,.06)}
.card:is(.w,.t,.l):not(.img) > .c-panel{display:grid}
.card.w:not(.img) > .c-panel{top:8px;right:8px;bottom:8px;width:calc(50% - 8px)}
.card.w:not(.img) > .c-body{max-width:calc(50% - 26px)}
.card.w:not(.img) > :is(.c-act,.c-arrow,.c-badge){right:calc(50% + 14px)}
.card:is(.t,.l):not(.img) > .c-panel{left:8px;right:8px;top:8px;bottom:var(--below,118px)}
.card.social:is(.t,.l):not(.img) > .c-panel{--below:150px}
.card:is(.t,.l):not(.img) > .fav{display:none}
.card:is(.t,.l):not(.img) > .c-body{order:1}
.card:is(.t,.l):not(.img) > .c-act{order:2;position:relative;top:auto;right:auto;align-self:flex-start;margin-top:12px}
.card:is(.t,.l):not(.img) > .c-arrow{display:none}
.card:is(.t,.l):not(.img) > .c-badge{top:20px;right:20px}
.c-panel > .fav{--s:clamp(64px,30cqmin,124px);box-shadow:0 20px 40px -18px rgba(40,30,15,.5),inset 0 0 0 1px rgba(0,0,0,.06);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
a.card:hover .c-panel > .fav{transform:scale(1.05) rotate(-2deg)}
.card.social > .c-panel{background:radial-gradient(100% 90% at 15% 0%,rgba(255,255,255,.28),transparent 55%),var(--bc);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.card.social > .c-panel > .fav{--s:clamp(70px,40cqmin,150px);background:none;box-shadow:none}
.card.social > .c-panel > .fav img{padding:0}
.c-dom{display:none;max-width:86%;font:650 clamp(1.05rem,4.4cqi,2rem)/1.1 var(--sans);letter-spacing:-.035em;color:var(--ink);text-align:center;overflow-wrap:anywhere}
.c-panel:has(> .fav.miss) > .fav{display:none}
.c-panel:has(> .fav.miss) > .c-dom{display:block}

/* cards with a picture: the picture sits in a frame, the words on a clean strip below it */
.card.img{padding:0}
.c-media,.c-cap{--cap:66px}
.card.img > :is(.fav,.c-body,.c-act,.c-arrow,.c-panel){display:none}
.card.img .c-media{position:absolute;left:8px;right:8px;top:8px;bottom:var(--cap);overflow:hidden;border-radius:calc(var(--rad) - 8px);background:var(--well);box-shadow:inset 0 0 0 1px rgba(40,30,15,.06)}
.card.img .c-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.c-media img.bgb{display:none}
.c-media.fit{background:#ECE9E3}
.c-media.fit img.bgb{display:block;filter:blur(30px) saturate(1.1);transform:scale(1.3);opacity:.4}
.c-media.fit img.fg{object-fit:contain;padding:6%;filter:drop-shadow(0 14px 22px rgba(0,0,0,.22))}
a.card.img:hover .c-media.fit img.fg{transform:scale(1.03)}
a.card.img:hover .c-media img.fg{transform:scale(1.04)}
.c-cap{display:none}
.card.img .c-cap{position:absolute;z-index:2;left:14px;right:14px;bottom:0;height:var(--cap);display:flex;align-items:center;gap:11px;min-width:0}
.c-cw{min-width:0;display:flex;flex-direction:column}
.c-cw b{font-size:.95rem;font-weight:620;line-height:1.25;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-cw small{font-size:.8rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.card.img:is(.t,.l) :is(.c-media,.c-cap){--cap:84px}
.card.img:is(.t,.l) .c-cw small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.35}
.card.img:is(.w,.l) .c-cw b{font-size:1.02rem}
.card.img > .c-badge{top:18px;right:18px;box-shadow:0 6px 14px -6px rgba(0,0,0,.35)}
.play{position:absolute;right:12px;bottom:12px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);z-index:1;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.play svg{width:17px;height:17px;fill:#111;stroke:none;margin-left:3px}
a.card:hover .play{transform:scale(1.08)}

/* notes */
.card.note{background:#FFFCF4}
.c-label{margin:0;display:flex;align-items:center;gap:8px;font:600 .7rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.c-label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent)}
.card.note .c-note{margin:12px 0 0;font-size:1.04rem;color:var(--ink);line-height:1.45;letter-spacing:-.01em;white-space:pre-line;overflow:hidden;overflow-wrap:anywhere;flex:1 1 auto;min-height:0;-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 1.4em),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 1.4em),transparent)}
.card.note:is(.w,.l) .c-note{font-size:1.3rem;line-height:1.35;letter-spacing:-.02em}

/* section headings */
.card.heading{grid-column:1/-1;grid-row:span 1;background:none;box-shadow:none;padding:0 2px 4px;flex-direction:row;align-items:flex-end;gap:14px;overflow:visible;container-type:normal}
.card.heading h3{margin:0;font-size:1.25rem;font-weight:650;letter-spacing:-.022em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}
.card.heading::after{content:"";flex:1;height:1px;background:var(--line-2);margin-bottom:.6em}

/* live card */
.card.live.on-brand:not(.has-thumb){background:radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,#fff 22%,transparent),transparent 60%),linear-gradient(160deg,color-mix(in srgb,var(--lc) 88%,#fff),color-mix(in srgb,var(--lc) 82%,#1D1A15));box-shadow:0 20px 44px -22px var(--lc),0 0 0 1px color-mix(in srgb,var(--lc) 60%,#000 0%)}
.card.live.on-brand:not(.has-thumb) :is(.live-title,.live-plat){color:#fff}
.card.live.on-brand:not(.has-thumb) .live-meta{color:rgba(255,255,255,.78)}
.card.live.on-brand:not(.has-thumb) .live-cta{background:#fff;color:var(--ink)}
.card.live.on-brand.ink:not(.has-thumb) :is(.live-title,.live-plat){color:#0E120B}
.card.live.on-brand.ink:not(.has-thumb) .live-meta{color:rgba(14,18,11,.7)}
.card.live.on-brand.ink:not(.has-thumb) .live-cta{background:#0E120B;color:#fff}
.live-logo{position:absolute;z-index:1;top:18px;right:18px;width:clamp(28px,12cqi,48px);height:auto;filter:brightness(0) invert(1);opacity:.95}
.card.live.ink .live-logo{filter:brightness(0);opacity:.85}
.card.live.has-thumb .live-logo{width:26px}
.card.live.on-brand:not(.has-thumb) .live-pill{background:#fff;color:#E5392A}
.card.live.on-brand:not(.has-thumb) .live-pill .dot{background:#E5392A}
.card.live{grid-column:span 2;grid-row:span 4;padding:0;background:radial-gradient(90% 80% at 85% 0%,color-mix(in srgb,var(--accent) 35%,transparent),transparent 70%),linear-gradient(170deg,color-mix(in srgb,var(--accent) 16%,#FFF8EA),#FFFDF7);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 65%,transparent),0 20px 50px -18px var(--accent-glow)}
.card.live .c-media{position:absolute;inset:0}
.card.live .c-media img{width:100%;height:100%;object-fit:cover}
.card.live.has-thumb .c-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,15,8,.1),rgba(20,15,8,.88) 75%)}
.card.live.has-thumb .live-title{color:#fff}
.card.live.has-thumb .live-meta{color:rgba(255,255,255,.75)}
.card.live.has-thumb .live-plat{color:var(--accent)}
.card.live .c-live{position:relative;z-index:1;margin-top:auto;padding:22px}
.live-pill{position:absolute;z-index:2;top:16px;left:16px;display:inline-flex;align-items:center;gap:7px;font:700 .74rem var(--sans);letter-spacing:.08em;color:#fff;background:#E5392A;border-radius:999px;padding:5px 10px 5px 9px}
.live-pill .dot{background:#fff;animation:none;width:7px;height:7px}
.live-plat{margin:0;font-size:.82rem;color:var(--accent-text);font-weight:600;letter-spacing:.02em}
.live-title{margin:6px 0 0;font-size:1.3rem;font-weight:650;letter-spacing:-.02em;line-height:1.2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.live-cta{display:inline-flex;align-items:center;gap:8px;margin-top:16px;font-weight:600;font-size:.92rem;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:9px 16px}
.live-meta{margin:6px 0 0;font-size:.84rem;color:var(--ink-2)}
.card.offline{grid-column:span 2;grid-row:span 1;flex-direction:row;align-items:center;gap:12px;padding:0 18px;background:var(--panel)}
.card.offline p{margin:0;font-size:.9rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.offline b{color:var(--ink);font-weight:600}

/* open animation: the drawer slides out, then the cards come out of it */

.opening .grid > *{animation:cardOut .55s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(.6s + var(--i,0) * 40ms)}
.opening .dr-profile{animation:fadeUp .6s ease both}
@keyframes slideOut{from{transform:translateY(-28px) scaleY(.94);opacity:0;clip-path:inset(0 0 70% 0 round 28px)}to{transform:none;opacity:1;clip-path:inset(0 0 0 0 round 28px)}}
@keyframes cardOut{from{transform:translateY(-22px) scale(.97);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.opening .drawer,.opening .grid > *,.opening .dr-profile{animation:none}.dot.on{animation:none}}

.made{display:flex;justify-content:center;padding:8px 0 48px}
.made a{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff;box-shadow:var(--shadow)}
.made a:hover{color:var(--ink)}
.made svg{width:16px;height:16px;color:var(--ink)}
.made svg .lit{color:var(--accent)}

/* small cards: tighten so nothing gets cut off */
@container (max-height:180px){
  .fav{--s:40px}
  .c-act,.c-arrow,.c-badge{top:15px;right:15px}
  .c-text{-webkit-line-clamp:2}
}
@container (max-height:150px){ .c-title{-webkit-line-clamp:1} .c-text{display:none} .card.note .c-note{margin-top:8px;font-size:.96rem} }
@container (max-width:175px){ .c-act{padding:7px 10px;font-size:.72rem} .c-cap .fav.mini{display:none} }
@container (max-height:180px){ .c-media,.c-cap{--cap:54px} .c-cap .fav.mini{--s:28px} .c-cw b{font-size:.88rem} .c-cw small{font-size:.74rem} }
/* wide cards with a picture: words on the left, a 4:3 picture on the right */
.card.img.w{padding:20px}
.card.img.w > .fav{display:grid}
.card.img.w > .c-body{display:block;max-width:calc(42% - 24px)}
.card.img.w .c-media{left:auto;top:8px;right:8px;bottom:8px;width:58%}
.card.img.w .c-cap{display:none}
.card.img.w > .c-body .c-text{-webkit-line-clamp:2}
.card.img.w > .c-body .c-title{-webkit-line-clamp:3}
@container (max-height:180px){ .card.img.w > .fav{--s:34px} .card.img.w > .c-body .c-text{display:none} }
.card.img.w > .c-badge{right:auto;left:calc(42% + 10px)}

/* ---------------------------------------------------------------- the cabinet: one solid oak drawer, used on every page */
:root{--grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.004 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42  0 0 0 0 .26  0 0 0 0 .11  0 0 0 -1.25 .9'/%3E%3C/filter%3E%3Crect width='600' height='300' filter='url(%23w)'/%3E%3C/svg%3E")}
.cabinet{--oak:#D4AE7E;--oak-2:#BF9361;--brass-hi:#FBE7A6;--brass:#D9A93F;--brass-lo:#9C6C1C;--ink-wood:#3E2A14;--wall:10px;position:relative;isolation:isolate;border-radius:20px;padding:12px 14px 16px;background:var(--grain),linear-gradient(180deg,#DDB98A,var(--oak) 40%,var(--oak-2));background-size:600px 300px,auto;box-shadow:inset 0 1px 0 rgba(255,240,215,.7),inset 0 -4px 0 rgba(90,55,20,.22),inset 0 0 0 1px rgba(90,55,20,.25),0 2px 0 rgba(90,55,20,.35),0 40px 70px -36px rgba(70,40,10,.6)}
.cab-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:24px;padding:0 6px 10px;color:var(--ink-wood);min-width:0}
.cab-top > *{min-width:0}
.cabinet{min-width:0}
.cab-engrave{font:600 .72rem/1.2 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(62,42,20,.66);text-shadow:0 1px 0 rgba(255,240,215,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cab-lamp{display:inline-flex;align-items:center;gap:9px;min-width:0}
.cab-lamp i{width:12px;height:12px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#7A5634,#3A2513);box-shadow:inset 0 1px 2px rgba(0,0,0,.6),0 1px 0 rgba(255,240,215,.5)}
.cabinet.lit .cab-lamp i{background:radial-gradient(circle at 35% 30%,#FFE1DA,#FF3B2A 55%,#B3180B);box-shadow:0 0 12px 3px rgba(255,70,40,.7);animation:lamp 2s ease-in-out infinite}
@keyframes lamp{50%{box-shadow:0 0 18px 6px rgba(255,70,40,.55)}}
.cabinet.lit .cab-engrave{color:#7A1E10}
.cab-gap{height:10px;margin:0 2px;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#24160A,#4A3119);box-shadow:inset 0 2px 3px rgba(0,0,0,.6);position:relative;overflow:hidden}
.cab-gap::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,#FFB648 30%,#FFD27A 50%,#FFB648 70%,transparent);opacity:0;transition:opacity .6s;filter:blur(1px)}
.cabinet.lit .cab-gap::after{opacity:1}
.cabinet.lit .cab-gap{box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 0 24px 4px rgba(255,170,60,.55)}
.cab-tray{display:grid;grid-template-rows:1fr;margin:0 2px;transition:grid-template-rows 1s cubic-bezier(.3,1.08,.4,1)}
.cab-tray > *{min-height:0;overflow:hidden}
.cabinet.closed .cab-tray{grid-template-rows:0fr}
.cab-tray .drawer{padding:22px 16px 16px;border-left:var(--wall) solid #B98E5D;border-right:var(--wall) solid #B98E5D;background:linear-gradient(rgba(243,231,211,.72),rgba(243,231,211,.72)),var(--grain),linear-gradient(180deg,#E2CBA6,#EBD8BA 30%,#F1E3CC);background-size:auto,600px 300px,auto;box-shadow:inset 0 26px 26px -18px rgba(60,32,8,.6),inset 10px 0 12px -10px rgba(60,32,8,.45),inset -10px 0 12px -10px rgba(60,32,8,.45)}
.cabinet.lit .cab-tray .drawer{background:radial-gradient(70% 40% at 50% 0%,rgba(255,190,90,.45),transparent 70%),linear-gradient(rgba(243,231,211,.72),rgba(243,231,211,.72)),var(--grain),linear-gradient(180deg,#E2CBA6,#EBD8BA 30%,#F1E3CC);background-size:auto,auto,600px 300px,auto}
.cab-tray .card:not(.heading){box-shadow:0 0 0 1px rgba(80,50,20,.12),0 3px 0 rgba(120,80,40,.12),0 12px 20px -12px rgba(60,32,8,.55)}
.cab-tray a.card:hover{box-shadow:0 0 0 1px rgba(80,50,20,.14),0 4px 0 rgba(120,80,40,.12),0 26px 34px -18px rgba(60,32,8,.6)}
.cab-tray .card.heading h3{color:var(--ink-wood)}
.cab-tray .card.heading::after{background:rgba(90,55,20,.25)}
.cab-front{position:relative;margin-top:-1px;border-radius:6px 6px 14px 14px;height:120px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;background:var(--grain),linear-gradient(180deg,#E1BE90,var(--oak) 55%,#C79B68);background-size:600px 300px,auto;background-position:-120px -90px,0 0;box-shadow:inset 0 1px 0 rgba(255,240,215,.75),inset 0 -3px 0 rgba(90,55,20,.25),0 0 0 1px rgba(90,55,20,.35),0 14px 20px -12px rgba(60,32,8,.6)}
.cab-front::before{content:"";position:absolute;inset:10px;border-radius:6px;box-shadow:inset 1px 1px 0 rgba(255,240,215,.55),inset -1px -1px 0 rgba(90,55,20,.3),1px 1px 0 rgba(255,240,215,.35),-1px -1px 0 rgba(90,55,20,.25);pointer-events:none}
.brass{position:relative;display:flex;align-items:center;max-width:calc(100% - 64px);padding:5px;border-radius:5px;background:linear-gradient(180deg,var(--brass-hi),var(--brass) 45%,#E9C063 70%,var(--brass-lo));box-shadow:0 2px 3px rgba(50,28,6,.5),inset 0 1px 0 rgba(255,255,255,.6)}
.brass::before,.brass::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFF4C8,#B5852B 60%,#7A5310);box-shadow:inset 0 0 0 .5px rgba(60,35,5,.6)}
.brass::before{left:-12px}.brass::after{right:-12px}
.plate{display:inline-flex;align-items:center;min-width:0;font:600 .9rem "Courier New",ui-monospace,monospace;letter-spacing:.02em;color:#2B1D0E;background:linear-gradient(180deg,#FBF5E8,#F2E7D2);border-radius:2px;padding:6px 14px;box-shadow:inset 0 1px 3px rgba(60,35,5,.35);white-space:nowrap;overflow:hidden;text-decoration:none}
.plate i{font-style:normal;opacity:.55}
.plate em{font-style:normal;overflow:hidden;text-overflow:ellipsis}
.cab-pull{appearance:none;border:0;padding:0;width:132px;height:40px;display:grid;place-items:start center;background:none;cursor:pointer;border-radius:10px;position:relative}
.cab-pull > span{display:block;width:132px;height:34px;border-radius:6px 6px 70px 70px / 6px 6px 34px 34px;background:linear-gradient(180deg,var(--brass-hi) 0%,var(--brass) 30%,#F0CE7A 55%,var(--brass-lo) 100%);box-shadow:0 5px 8px -2px rgba(50,28,6,.55),inset 0 1px 0 rgba(255,255,255,.7);position:relative;transition:transform .2s}
.cab-pull > span::after{content:"";position:absolute;left:10px;right:10px;top:4px;height:18px;border-radius:3px 3px 60px 60px / 3px 3px 18px 18px;background:linear-gradient(180deg,#3B2610,#7A5520);box-shadow:inset 0 3px 5px rgba(0,0,0,.6)}
.cab-pull:hover > span{transform:translateY(1px)}
@media (max-width:640px){
  .cabinet{--wall:6px;padding:9px 9px 12px;border-radius:16px}
  .cab-tray .drawer{padding:14px 8px 10px}
  .cab-front{height:100px;gap:10px}
  .cab-engrave{font-size:.64rem;letter-spacing:.08em}
  .cab-pull,.cab-pull > span{width:110px}
  .plate{font-size:.76rem;padding:5px 10px}
}

/* app tiles: a small link card IS the app icon, edge to edge, with its name on it */
.card.app{padding:0;justify-content:flex-end}
.card.app > .fav{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;box-shadow:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.card.app > .fav img{padding:22% 22% 30%}
.card.app > .fav.tiny img{padding:27% 27% 34%}
.card.app > .fav .mono{font-size:clamp(2rem,34cqmin,4.4rem);margin-bottom:12%}
.card.app > .fav.brand img{padding:20% 20% 30%}
.card.app > .fav.custom img{padding:0}
a.card.app:hover > .fav{transform:scale(1.04)}
.card.app > .c-body{position:relative;z-index:2;margin:0;padding:0 14px 12px;width:100%}
.card.app .c-title{-webkit-line-clamp:1;font-size:.92rem}
.card.app .c-sub{font-size:.76rem;margin-top:1px}
.card.app > :is(.c-act,.c-arrow){display:none}
.card.app > .c-badge{top:10px;right:10px}
.card.app:is(.social,.has-icon) .c-title{color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.3)}
.card.app:is(.social,.has-icon) .c-sub{color:rgba(255,255,255,.82)}
.card.app[data-ink] .c-title{color:#111;text-shadow:none}
.card.app[data-ink] .c-sub{color:rgba(0,0,0,.6)}
.card.app.has-icon::after{content:"";position:absolute;inset:auto 0 0 0;height:55%;z-index:1;border-radius:0 0 var(--rad) var(--rad);background:linear-gradient(180deg,transparent,rgba(10,8,5,.5));pointer-events:none}
@container (max-height:170px){ .card.app .c-sub{display:none} .card.app > .c-body{padding:0 12px 10px} }

/* email signup card (Pro): a waitlist or a newsletter, right on the drawer */
.card.signup{background:linear-gradient(160deg,#fff,#FFF8EC);justify-content:space-between}
.su-text{margin:10px 0 0;font-size:1.02rem;line-height:1.4;letter-spacing:-.012em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.su-form{display:flex;gap:8px;margin-top:12px;padding:5px;border-radius:14px;background:#fff;box-shadow:0 0 0 1px rgba(40,30,15,.14),0 6px 16px -10px rgba(40,30,15,.3)}
.su-form input[type=email]{flex:1;min-width:0;border:0;outline:0;background:none;font:500 .95rem var(--sans);color:var(--ink);padding:8px 10px}
.su-form input.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.su-form button{appearance:none;border:0;cursor:pointer;font:600 .88rem var(--sans);color:var(--accent-ink);background:var(--accent);border-radius:10px;padding:0 14px;min-height:38px;white-space:nowrap}
.su-form button:disabled{opacity:.9;cursor:default}
.su-form:focus-within{box-shadow:0 0 0 2px var(--accent),0 6px 16px -10px rgba(40,30,15,.3)}
.su-msg{margin:8px 2px 0;min-height:1.1em;font-size:.82rem;color:var(--ink-3)}
.su-msg.ok{color:var(--ok);font-weight:600}
.su-msg.err{color:var(--err)}
.card.signup.done .su-form{display:none}
@container (max-height:180px){ .su-text{-webkit-line-clamp:1;margin-top:6px;font-size:.95rem} .su-form{margin-top:8px} .su-msg{margin-top:4px} }

/* new since your last visit, and links straight to one card */
.card.is-new::before{content:"";position:absolute;z-index:5;top:10px;left:10px;width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #fff,0 0 14px 2px var(--accent-glow);animation:newdot 2.2s ease-in-out infinite}
@keyframes newdot{50%{box-shadow:0 0 0 3px #fff,0 0 22px 6px var(--accent-glow)}}
.card.ping{animation:ping 1.1s cubic-bezier(.2,.8,.2,1) 3}
@keyframes ping{0%{box-shadow:0 0 0 0 var(--accent),0 10px 26px -18px rgba(40,30,15,.28)}100%{box-shadow:0 0 0 14px transparent,0 10px 26px -18px rgba(40,30,15,.28)}}
/* sparks */
.spark{position:absolute;z-index:6;bottom:10px;right:10px;display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 9px 0 7px;border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 0 0 1px rgba(40,30,15,.1),0 4px 10px -4px rgba(40,30,15,.35);color:var(--ink-2);font:650 .74rem/1 var(--sans);cursor:pointer;opacity:0;transform:scale(.85);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1),color .2s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.card.img:not(.w) > .spark{bottom:auto;right:auto;top:16px;left:16px}
.card.img.w:has(.play) > .spark{right:64px;bottom:20px}
.card.img.w > .spark{bottom:18px;right:18px}
.spark svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
.spark b{font-weight:650;min-width:0}
.spark b:empty{display:none}
.card:hover .spark,.spark:focus-visible,.spark.on,.spark:has(b:not(:empty)){opacity:1;transform:none}
@media (hover:none){.spark{opacity:1;transform:none}}
.spark:hover{color:var(--accent-text)}
.spark.on{color:#fff;background:linear-gradient(160deg,#FFC24B,#F28A1C);box-shadow:0 6px 14px -6px rgba(242,138,28,.8)}
.spark.on svg{fill:currentColor}
.spark.pop{animation:sparkpop .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes sparkpop{40%{transform:scale(1.25)}}
.spk{position:absolute;left:15px;top:14px;width:5px;height:5px;border-radius:50%;background:#F5A524;pointer-events:none;animation:spk .65s ease-out forwards}
.spk:nth-child(odd){background:#FF6F59}
@keyframes spk{from{transform:rotate(var(--a)) translateY(0) scale(1);opacity:1}to{transform:rotate(var(--a)) translateY(-26px) scale(.3);opacity:0}}
/* new since your last visit: a warm ring instead of a dot */
.card.is-new::before{content:none}
.card.is-new{box-shadow:0 0 0 2px var(--accent),0 0 26px -4px var(--accent-glow),0 10px 26px -18px rgba(40,30,15,.28)}
/* tilt */
.card.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-3px);transition:transform .08s linear,box-shadow .28s}
.card.tilt::after{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;pointer-events:none;background:radial-gradient(60% 60% at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.28),transparent 70%);mix-blend-mode:soft-light}
.card.app.has-icon.tilt::after{background:radial-gradient(60% 60% at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.3),transparent 70%)}
/* ---------------------------------------------------------------- list layout: one tidy row per thing */
.grid.list{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto!important;gap:10px;max-width:680px;margin-inline:auto}
.grid.list > .card{grid-column:1/-1!important;grid-row:auto!important;container-type:inline-size}
.grid.list > .card.live{height:280px;container-type:size}
.grid.list > .card:is(.note,.signup,.action){min-height:0;padding:16px 18px}
.grid.list > .card.action{flex-direction:row;align-items:center;gap:16px}
.grid.list > .card.action > div:first-child{flex:1;min-width:0}
.grid.list > .card.action > div:last-child{flex:none;width:180px}
.grid.list > .card.action .act-btn{margin-top:0}
.grid.list > .card.action .act-msg:empty{display:none}
.grid.list .card.row:has(.c-act) .r-thumb{display:none}
@media (max-width:520px){.grid.list > .card.action{flex-direction:column;align-items:stretch}.grid.list > .card.action > div:last-child{width:auto}}
.grid.list > .card.note .c-note{-webkit-mask-image:none;mask-image:none}
.card.row{flex-direction:row;align-items:center;gap:14px;padding:12px 14px 12px 12px;min-height:72px;text-align:left;font:inherit;border:0;cursor:pointer;width:100%}
.card.row > .fav{--s:46px}
.r-body{flex:1;min-width:0;display:flex;flex-direction:column}
.r-body b{font-size:1rem;font-weight:620;letter-spacing:-.012em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-body small{margin-top:2px;font-size:.84rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r-thumb{width:76px;height:52px;border-radius:12px;overflow:hidden;flex:none;box-shadow:inset 0 0 0 1px var(--line)}
.r-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.r-go{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;background:var(--card-hi);color:var(--ink-2);transition:background .2s,color .2s,transform .3s cubic-bezier(.3,1.5,.5,1)}
.card.row:hover .r-go{background:var(--ink);color:#fff;transform:translateX(2px)}
.card.row > .c-act,.card.row > .c-badge{position:static;flex:none}
.card.row > .spark{display:none}

/* ---------------------------------------------------------------- slide-out drawer blocks */
.fav.dglyph{background:linear-gradient(160deg,#FBE7A6,#D9A93F 55%,#9C6C1C);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(60,35,5,.3)}
.fav.dglyph svg{width:52%;height:52%;fill:none;stroke:#3E2A14;stroke-width:1.8;stroke-linecap:round}
.card.app:has(> .fav.dglyph) .c-sub{color:rgba(43,29,14,.72)}
.card.app > .fav.dglyph svg{width:40%;height:40%;margin-bottom:12%}
button.card{font:inherit;color:inherit;text-align:left;border:0;cursor:pointer}
.c-act.open{background:linear-gradient(180deg,#FBE7A6,#D9A93F 55%,#B5852B);color:#2B1D0E;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(60,35,5,.3)}
.slide-scrim{position:fixed;inset:0;z-index:80;background:rgba(30,20,8,0);visibility:hidden;transition:background .35s,visibility 0s .35s}
.slide-scrim.on{background:rgba(30,20,8,.38);visibility:visible;transition:background .35s}
.slide{position:absolute;top:12px;right:12px;bottom:12px;width:min(460px,calc(100% - 24px));overflow:auto;border-radius:24px;background:var(--panel);box-shadow:0 30px 80px -20px rgba(30,20,8,.55),0 0 0 1px var(--line);transform:translateX(calc(100% + 24px));transition:transform .55s cubic-bezier(.2,1.15,.3,1);padding:22px 24px 28px}
.slide-scrim.on .slide{transform:none}
.sl-x{position:sticky;top:0;display:grid;margin:-6px -8px 10px auto;z-index:2;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;background:#fff;color:var(--ink);box-shadow:0 0 0 1px var(--line-2),0 4px 10px -4px rgba(40,30,15,.3)}
.sl-media{margin:6px 0 20px;border-radius:16px;overflow:hidden;background:var(--well);box-shadow:inset 0 0 0 1px var(--line)}
.sl-media img{width:100%;display:block;max-height:320px;object-fit:cover}
.sl-media.vid{aspect-ratio:16/9}
.sl-media.vid iframe{width:100%;height:100%;border:0;display:block}
.sl-kicker{margin:8px 0 0;font:600 .7rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.slide h2{margin:8px 0 0;font-size:1.9rem;line-height:1.1;letter-spacing:-.03em}
.sl-lead{margin:10px 0 0;font-size:1.05rem;color:var(--ink-2)}
.sl-body{margin-top:14px;font-size:1rem;line-height:1.6;color:var(--ink)}
.sl-body p{margin:0 0 12px}.sl-body ul{margin:0 0 12px;padding-left:20px}.sl-body li{margin:4px 0}
.sl-body a{color:var(--accent-text);font-weight:600}
.sl-cta{margin-top:10px;width:100%}
html.sl-lock{overflow:hidden}
@media (max-width:640px){
  .slide{top:auto;left:0;right:0;bottom:0;width:100%;max-height:88vh;border-radius:24px 24px 0 0;transform:translateY(105%)}
}
@media (prefers-reduced-motion:reduce){.slide{transition:none}}

/* ---------------------------------------------------------------- webhook buttons */
.card.action{background:linear-gradient(160deg,#fff,#F3F7FF);justify-content:space-between}
.act-btn{position:relative;appearance:none;border:0;cursor:pointer;width:100%;min-height:44px;margin-top:12px;border-radius:12px;background:var(--ink);color:#fff;font:600 .95rem var(--sans);display:flex;align-items:center;justify-content:center;gap:8px;transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .3s}
.act-btn:hover:not(:disabled){transform:translateY(-1px)}
.act-btn:active:not(:disabled){transform:scale(.97)}
.act-btn:disabled{opacity:.85;cursor:default}
.act-btn .spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .7s linear infinite}
.act-btn .ok{display:none;width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24}
.act-btn.loading .t{opacity:.6}.act-btn.loading .spin{display:block}
.act-btn.ok{background:var(--ok)}.act-btn.ok .ok{display:block;animation:draw .45s .05s ease-out forwards}
.act-btn.bad{background:var(--err)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes draw{to{stroke-dashoffset:0}}
.act-msg{margin:8px 2px 0;min-height:1.1em;font-size:.82rem;color:var(--ink-3)}
.act-msg.ok{color:var(--ok);font-weight:600}.act-msg.err{color:var(--err)}

/* ---------------------------------------------------------------- wood presets */
.cabinet[data-wood=walnut]{background:var(--grain),linear-gradient(180deg,#8E5B3A,#7A4B2E 40%,#5E3720);background-size:600px 300px,auto}
.cabinet[data-wood=walnut] .cab-front{background:var(--grain),linear-gradient(180deg,#94613F,#7A4B2E 55%,#603921);background-size:600px 300px,auto;background-position:-120px -90px,0 0}
.cabinet[data-wood=walnut] .cab-tray .drawer{border-color:#5A3420;background:linear-gradient(rgba(226,196,160,.62),rgba(226,196,160,.62)),var(--grain),linear-gradient(180deg,#B88A62,#C9A27C 30%,#D6B48E);background-size:auto,600px 300px,auto}
.cabinet[data-wood=walnut] .cab-engrave{color:rgba(255,232,200,.8);text-shadow:0 -1px 0 rgba(0,0,0,.45)}
.cabinet[data-wood=ash]{background:var(--grain),linear-gradient(180deg,#F1E6D3,#E6D6BC 40%,#D6C2A2);background-size:600px 300px,auto}
.cabinet[data-wood=ash] .cab-front{background:var(--grain),linear-gradient(180deg,#F3E9D8,#E6D6BC 55%,#D4BF9E);background-size:600px 300px,auto;background-position:-120px -90px,0 0}
.cabinet[data-wood=ash] .cab-tray .drawer{border-color:#CDB795;background:linear-gradient(rgba(250,244,234,.8),rgba(250,244,234,.8)),var(--grain),#F2E8D8;background-size:auto,600px 300px,auto}
.cabinet[data-wood=cherry]{background:var(--grain),linear-gradient(180deg,#C7774D,#B4643E 40%,#934C2B);background-size:600px 300px,auto}
.cabinet[data-wood=cherry] .cab-front{background:var(--grain),linear-gradient(180deg,#CB7E54,#B4643E 55%,#96502F);background-size:600px 300px,auto;background-position:-120px -90px,0 0}
.cabinet[data-wood=cherry] .cab-tray .drawer{border-color:#8E4A2A;background:linear-gradient(rgba(240,214,190,.7),rgba(240,214,190,.7)),var(--grain),#E2BFA0;background-size:auto,600px 300px,auto}
.cabinet[data-wood=cherry] .cab-engrave{color:rgba(255,236,220,.85);text-shadow:0 -1px 0 rgba(0,0,0,.4)}

/* ---------------------------------------------------------------- cabinet with many drawers */
.dsec .cab-tray{display:grid;grid-template-rows:1fr;transition:grid-template-rows .75s cubic-bezier(.3,1.08,.4,1)}
.dsec.shut .cab-tray{grid-template-rows:0fr}
.dsec-sp{height:12px}
.d-peek{display:flex;align-items:flex-end;gap:8px;height:0;padding:0 28px;overflow:hidden;transition:height .45s ease}
.dsec.shut .d-peek{height:24px}
.d-peek i{flex:none;width:58px;border-radius:7px 7px 0 0;background-size:cover;background-position:50% 30%;box-shadow:0 0 0 1px rgba(80,50,20,.2),inset 0 1px 0 rgba(255,255,255,.4)}
.dsec .cab-front{height:84px;flex-direction:row;gap:18px;cursor:default}
.dsec.shut .cab-front{cursor:pointer}
.dsec .cab-pull{width:104px;height:30px}
.dsec .cab-pull > span{width:104px;height:28px}
.dsec .cab-pull > span::after{height:15px}
.plate i{font-style:normal}
.dsec .plate i{opacity:.55}
.d-empty{grid-column:1/-1;color:var(--ink-3);text-align:center;padding:40px 0;margin:0}
.dsec.air .cab-gap{box-shadow:inset 0 2px 3px rgba(0,0,0,.4),0 0 24px 4px rgba(255,170,60,.55)}
.dsec.air .cab-gap::after{opacity:1}
/* the editor shows each Section as a drawer front between the cards */
.drawer.editing .card.heading{grid-row:span 1;justify-content:center;align-items:center;padding:0 16px;border-radius:8px;background:var(--grain),linear-gradient(180deg,#E1BE90,#D4AE7E 55%,#C79B68);background-size:600px 300px,auto;box-shadow:inset 0 1px 0 rgba(255,240,215,.75),inset 0 -3px 0 rgba(90,55,20,.25),0 0 0 1px rgba(90,55,20,.35)}
.drawer.editing .card.heading::after{content:none}
.drawer.editing .card.heading h3{max-width:70%;font:600 .86rem/1 "Courier New",ui-monospace,monospace;letter-spacing:.06em;text-transform:uppercase;color:#2B1D0E;background:linear-gradient(180deg,#FBF5E8,#F2E7D2);padding:7px 14px;border-radius:2px;box-shadow:0 0 0 4px #E9C063,0 0 0 5px #9C6C1C,0 3px 5px 4px rgba(50,28,6,.35)}
.drawer.editing .card.heading .h-meta{position:absolute;right:16px;font:600 .62rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(62,42,20,.75)}
@media (max-width:640px){ .dsec .cab-front{height:72px} .dsec .cab-pull,.dsec .cab-pull > span{width:84px} .d-peek{padding:0 16px;gap:6px} .d-peek i{width:44px} }


/* ---------------------------------------------------------------- liquid glass */
:root{
  --glass-fill:radial-gradient(120% 70% at 18% -10%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,.3));
  --glass-edge:inset 0 1px 1px rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),inset 0 0 0 1px rgba(255,255,255,.55),inset 0 0 22px rgba(255,255,255,.22);
  --glass-drop:0 1px 2px rgba(40,30,15,.08),0 14px 34px -14px rgba(40,30,15,.38);
}
.glass{background:var(--glass-fill);-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);box-shadow:var(--glass-edge),var(--glass-drop);border:0}
.glass-btn{background:var(--glass-fill);-webkit-backdrop-filter:blur(18px) saturate(1.8);backdrop-filter:blur(18px) saturate(1.8);box-shadow:var(--glass-edge),0 6px 16px -8px rgba(40,30,15,.35);border:0;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s}
.glass-btn:hover{transform:translateY(-1px) scale(1.02)}
.glass-btn:active{transform:scale(.97)}
/* the product wears it */
.dr-status{background:var(--glass-fill);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:var(--glass-edge),0 6px 16px -10px rgba(40,30,15,.35);border:0}
.made a{background:var(--glass-fill);-webkit-backdrop-filter:blur(16px) saturate(1.8);backdrop-filter:blur(16px) saturate(1.8);box-shadow:var(--glass-edge),var(--glass-drop);border:0}
.spark{background:var(--glass-fill);-webkit-backdrop-filter:blur(14px) saturate(1.8);backdrop-filter:blur(14px) saturate(1.8);box-shadow:var(--glass-edge),0 4px 12px -4px rgba(40,30,15,.4)}
.slide{background:radial-gradient(120% 50% at 10% 0%,rgba(255,255,255,.8),rgba(255,255,255,0) 60%),rgba(255,253,248,.78);-webkit-backdrop-filter:blur(30px) saturate(1.8);backdrop-filter:blur(30px) saturate(1.8);box-shadow:var(--glass-edge),0 30px 80px -20px rgba(30,20,8,.55)}
.sl-x,.r-go,.c-arrow{background:var(--glass-fill);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--glass-edge),0 3px 8px -3px rgba(40,30,15,.3)}
.c-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 10px -4px rgba(200,120,10,.6)}
.live-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 12px -4px rgba(229,57,42,.7)}
/* a soft, colored room behind the cabinet so the glass has something to bend */
.room{position:fixed;inset:-10%;z-index:-1;pointer-events:none;background:
  radial-gradient(38% 34% at 12% 18%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 70%),
  radial-gradient(34% 30% at 88% 12%,rgba(255,170,190,.32),transparent 70%),
  radial-gradient(40% 36% at 80% 88%,rgba(160,190,255,.26),transparent 70%),
  radial-gradient(36% 32% at 15% 90%,rgba(255,210,150,.34),transparent 70%)}
/* the floating dock on a drawer page */
.dock{position:fixed;z-index:50;left:50%;bottom:calc(16px + env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px}
.dock button,.dock a{appearance:none;border:0;background:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;height:44px;padding:0 16px;border-radius:999px;font:600 .9rem var(--sans);color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s}
.dock button:hover,.dock a:hover{background:rgba(255,255,255,.55)}
.dock .mine{background:var(--accent);color:var(--accent-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 14px -6px var(--accent-glow)}
.dock .mine:hover{background:var(--accent);filter:brightness(1.06)}
.dock svg{width:17px;height:17px}
@media (max-width:420px){.dock .lbl{display:none}.dock button,.dock a{padding:0 14px}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.glass,.glass-btn,.dr-status,.made a,.spark,.slide{background:rgba(255,253,248,.96)}}

@media (max-width:900px){
  .dr-wrap{grid-template-columns:minmax(0,1fr);gap:28px;padding:32px 0 24px;width:calc(100% - 32px)}
  .dr-profile{position:static;text-align:center;display:flex;flex-direction:column;align-items:center}
  .avatar{width:96px;height:96px}
  .dr-name{margin-top:16px;font-size:1.8rem}
  .grid{--cols:2}
  :root{--gap:12px}
  .card{--rad:22px;padding:16px}
  .card.w:not(.img) > :is(.c-act,.c-arrow,.c-badge){right:calc(50% + 10px)}
}
@media (max-width:380px){ .card{padding:14px} .fav{--s:38px} .card.row{padding:10px 12px 10px 10px} .r-thumb{width:60px;height:44px} }