/* Widget Playground — the shell is quieter than the content, always.
   Rules: hairlines instead of boxes; no card on a card; the preview is the loudest
   thing on any screen; colour is a signal, not decoration. */

@font-face{font-family:Selecta;src:url('/fonts/Selecta-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Selecta;src:url('/fonts/Selecta-Medium.woff2') format('woff2');font-weight:500 700;font-display:swap}
@font-face{font-family:'Edict Display';src:url('/fonts/EdictDisplay-Light.otf') format('opentype');font-weight:300 400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/fonts/PlexMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('/fonts/PlexMono-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --paper:#F1EFE9; --sheet:#FBFAF6; --sink:#E9E6DD;
  --ink:#16150F; --ink2:#6E6857; --ink3:#9C9583;
  --rule:#DCD6C6; --rule2:#E9E4D6;
  --accent:#B4431F; --accent-soft:#F2E2DA;
  --code:#2C4A6B; --image:#8A5A2B;
  --ok:#3F6B4A; --warn:#9A6C1B;
  --rail:60px; --top:52px;
  --ui:Selecta,-apple-system,system-ui,sans-serif;
  --display:'Edict Display',Kalice,Georgia,serif;
  --mono:'Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--paper); color:var(--ink);
  font:400 13px/1.45 var(--ui);
  -webkit-font-smoothing:antialiased;
  display:grid; grid-template-columns:var(--rail) 1fr; overflow:hidden;
}
::selection{background:var(--accent);color:#fff}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
.mono{font-family:var(--mono);font-size:11px;letter-spacing:0}
.tnum{font-variant-numeric:tabular-nums}

/* ------------------------------------------------------------------ rail */
#rail{
  border-right:1px solid var(--rule); background:var(--paper);
  display:flex; flex-direction:column; align-items:center; padding:10px 0 12px;
  gap:2px; position:relative; z-index:30;
}
#rail .mark{
  width:38px;height:38px;border-radius:9px;display:grid;place-items:center;
  color:var(--ink3); position:relative; transition:color .12s, background .12s;
}
#rail .mark:hover{color:var(--ink);background:var(--sink)}
#rail .mark[aria-current="page"]{color:var(--ink);background:var(--ink);color:var(--paper)}
#rail .mark svg{width:19px;height:19px;display:block}
#rail .sep{flex:1}
#rail .tip{
  position:absolute;left:calc(100% + 9px);top:50%;transform:translateY(-50%) translateX(-4px);
  background:var(--ink);color:var(--paper);padding:4px 8px;border-radius:5px;
  font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:.12s var(--ease);z-index:40;
}
#rail .mark:hover .tip{opacity:1;transform:translateY(-50%) translateX(0)}
#rail .logo{width:26px;height:26px;margin-bottom:10px;opacity:.9}

/* ----------------------------------------------------------------- shell */
#shell{display:grid;grid-template-rows:var(--top) 1fr;min-width:0;min-height:0}
#top{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 18px 0 20px;border-bottom:1px solid var(--rule);
  background:var(--paper);gap:16px;
}
#title{font:400 21px/1 var(--display);letter-spacing:-.005em}
#topmeta{display:flex;align-items:center;gap:14px;font-size:11.5px;color:var(--ink2)}
#topmeta .stat{display:flex;align-items:baseline;gap:5px}
#topmeta .stat b{font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
#view{overflow:auto;min-height:0;outline:0;position:relative}

/* ------------------------------------------------------------- primitives */
.over{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.hr{height:1px;background:var(--rule2);border:0}
.btn{
  height:30px;padding:0 12px;border-radius:6px;border:1px solid var(--rule);
  background:var(--sheet);font-size:12px;display:inline-flex;align-items:center;gap:6px;
  transition:.11s var(--ease);white-space:nowrap;
}
.btn:hover{border-color:var(--ink3);background:#fff}
.btn:active{transform:translateY(.5px)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink);font-weight:500}
.btn.primary:hover{background:#000;border-color:#000}
.btn.primary:disabled{opacity:.4;cursor:default;transform:none}
.btn.ghost{border-color:transparent;background:transparent;color:var(--ink2)}
.btn.ghost:hover{background:var(--sink);color:var(--ink);border-color:transparent}
.btn.tiny{height:24px;padding:0 8px;font-size:11px;border-radius:5px}
.btn kbd{font-family:var(--mono);font-size:9.5px;opacity:.5;margin-left:2px}
.chip{
  height:25px;padding:0 9px;border-radius:13px;border:1px solid var(--rule);
  background:var(--sheet);font-size:11.5px;display:inline-flex;align-items:center;gap:5px;
  transition:.11s var(--ease);color:var(--ink2);
}
.chip:hover{border-color:var(--ink3);color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.sm{height:21px;font-size:10.5px;padding:0 8px}
.inp{
  width:100%;background:var(--sheet);border:1px solid var(--rule);border-radius:7px;
  padding:9px 11px;font-size:13px;line-height:1.45;resize:none;transition:.12s var(--ease);
}
.inp:focus{outline:0;border-color:var(--ink);background:#fff}
.inp::placeholder{color:var(--ink3)}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:7px;overflow:hidden;background:var(--sheet)}
.seg button{padding:0 11px;height:28px;font-size:12px;color:var(--ink2);border-right:1px solid var(--rule)}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.empty{padding:64px 30px;text-align:center;color:var(--ink2);max-width:520px;margin:0 auto}
.empty h2{font:400 26px/1.2 var(--display);color:var(--ink);margin-bottom:10px}
.empty p{font-size:13px;line-height:1.6}

/* --------------------------------------------------------- playground */
.pg{display:grid;grid-template-columns:340px 1fr;height:100%;min-height:0}
.composer{
  border-right:1px solid var(--rule);overflow:auto;padding:16px 16px 90px;
  display:flex;flex-direction:column;gap:16px;background:var(--paper);
}
.composer section{display:flex;flex-direction:column;gap:8px}
.composer .lbl{display:flex;align-items:center;justify-content:space-between}
.composer textarea.inp{min-height:78px;font-size:14px;line-height:1.4}
.wrapchips{display:flex;flex-wrap:wrap;gap:5px}
.genbar{
  position:sticky;bottom:-90px;margin:0 -16px -90px;padding:12px 16px;
  background:linear-gradient(to top,var(--paper) 62%,transparent);
}
.genbar .btn.primary{width:100%;height:38px;justify-content:center;font-size:13.5px}

/* light table — the widgets are the stars, so they get a room of their own */
.table{position:relative;overflow:auto;min-height:0;padding:26px 26px 60px}
.table.ground-dark{background:#171719}
.table.ground-light{background:#E4E2DD}
.table.ground-photo{background:
  radial-gradient(90% 70% at 22% 12%,#6E86B8 0%,#3C4A73 45%,#1B2138 100%)}
.tablebar{
  position:sticky;top:0;z-index:5;margin:-26px -26px 20px;padding:11px 20px;
  display:flex;align-items:center;gap:12px;justify-content:space-between;
  background:var(--paper);border-bottom:1px solid var(--rule);
}
.table.ground-dark .tablebar,.table.ground-photo .tablebar{background:#141416;border-color:#2A2A2E;color:#E8E6E1}
.table.ground-light .tablebar{background:#E4E2DD}
.sheet{display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start}

/* a candidate: the widget, then its evidence, in that order */
.cand{position:relative;display:flex;flex-direction:column;gap:9px;transition:.14s var(--ease)}
.cand .frame{
  position:relative;border-radius:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.16),0 10px 26px -8px rgba(0,0,0,.28);
  transition:.16s var(--ease);
}
.cand[data-sel="1"] .frame{box-shadow:0 0 0 2px var(--accent),0 12px 30px -8px rgba(0,0,0,.34)}
.cand .frame iframe{display:block;border:0;border-radius:22px;background:transparent}
.cand .meta{display:flex;flex-direction:column;gap:3px;max-width:100%}
.cand .line1{display:flex;align-items:center;gap:7px;font-size:11.5px}
.cand .engdot{width:5px;height:5px;border-radius:50%;background:var(--code);flex:none}
.cand .nm{font-weight:500;color:var(--ink)}
.cand .line2{font-size:10.5px;color:var(--ink3);display:flex;gap:9px;align-items:center}
.table.ground-dark .cand .nm,.table.ground-photo .cand .nm{color:#F2F0EB}
.table.ground-dark .cand .line2,.table.ground-photo .cand .line2{color:#8E8C88}
.cand .acts{position:absolute;top:8px;right:8px;display:flex;gap:4px;opacity:0;transition:.12s}
.cand:hover .acts,.cand[data-sel="1"] .acts{opacity:1}
.cand .acts button{
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:rgba(20,20,20,.72);color:#fff;backdrop-filter:blur(8px);font-size:12px;
}
.cand .acts button:hover{background:#000}
.cand .acts button[aria-pressed="true"]{background:var(--accent)}
.gscore{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;background:var(--sink);color:var(--ink2)}
.gscore.good{background:#E3EDE4;color:var(--ok)}
.gscore.bad{background:#F6E4DC;color:var(--accent)}

/* ------------------------------------------------------------- library */
.libwrap{padding:0}
.libbar{
  position:sticky;top:0;z-index:6;background:var(--paper);border-bottom:1px solid var(--rule);
  padding:11px 20px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.libbar .search{flex:1;min-width:180px;max-width:340px}
.libbar .search input{height:30px;padding:0 10px}
.masonry{columns:5 210px;column-gap:14px;padding:16px 20px 80px}
.card{
  break-inside:avoid;margin-bottom:14px;position:relative;cursor:pointer;
  border-radius:10px;overflow:hidden;background:var(--sheet);
  border:1px solid var(--rule2);transition:.13s var(--ease);
}
.card:hover{border-color:var(--ink3);transform:translateY(-1px)}
.card img{display:block;width:100%;height:auto;background:var(--sink)}
.card .cmeta{padding:8px 10px 9px;display:flex;flex-direction:column;gap:3px}
.card .ct{font-size:11.5px;font-weight:500;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card .cs{font-size:10px;color:var(--ink3);display:flex;gap:6px;align-items:center}
.card .fav{position:absolute;top:7px;right:7px;width:22px;height:22px;border-radius:6px;
  display:grid;place-items:center;background:rgba(0,0,0,.55);color:#fff;font-size:11px;opacity:0;transition:.12s}
.card:hover .fav,.card .fav[aria-pressed="true"]{opacity:1}
.card .fav[aria-pressed="true"]{background:var(--accent)}
.card .untag{position:absolute;top:7px;left:7px;width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 2px rgba(255,255,255,.85)}
.dropzone{position:fixed;inset:0;z-index:200;background:rgba(22,21,15,.82);
  display:grid;place-items:center;color:var(--paper);pointer-events:none}
.dropzone .inner{border:2px dashed rgba(255,255,255,.5);border-radius:16px;padding:46px 60px;text-align:center}
.dropzone h2{font:400 30px/1.1 var(--display);margin-bottom:8px}

/* -------------------------------------------------------------- drawer */
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(520px,52vw);z-index:210;
  background:var(--sheet);border-left:1px solid var(--rule);
  box-shadow:-24px 0 48px -28px rgba(0,0,0,.3);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s var(--ease);
}
.drawer.on{transform:none}
.drawer .dhead{display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;border-bottom:1px solid var(--rule2);gap:10px}
.drawer .dbody{overflow:auto;padding:16px;display:flex;flex-direction:column;gap:16px;flex:1}
.drawer .dfoot{border-top:1px solid var(--rule2);padding:10px 16px;display:flex;gap:8px;justify-content:space-between}
.scrim{position:fixed;inset:0;z-index:205;background:rgba(22,21,15,.28);opacity:0;transition:opacity .2s}
.scrim.on{opacity:1}
.frow{display:flex;flex-direction:column;gap:6px}
.frow>label{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.frow .inp{font-size:12.5px}

/* --------------------------------------------------------------- misc */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  background:var(--ink);color:var(--paper);padding:9px 15px;border-radius:8px;
  font-size:12.5px;z-index:400;opacity:0;transition:.18s var(--ease);
  box-shadow:0 8px 24px -8px rgba(0,0,0,.5);max-width:70vw;
}
.toast.on{opacity:1;transform:translateX(-50%)}
.toast.bad{background:var(--accent)}
.keys{position:fixed;inset:0;z-index:420;background:rgba(22,21,15,.86);display:grid;place-items:center;color:var(--paper)}
.keys .panel{width:min(560px,86vw);display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
.keys h2{font:400 24px/1 var(--display);grid-column:1/-1;margin-bottom:10px}
.keys .k{display:flex;justify-content:space-between;gap:14px;font-size:12.5px;padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.1)}
.keys .k kbd{font-family:var(--mono);font-size:11px;color:#fff;opacity:.75}
.spin{display:inline-block;width:12px;height:12px;border:1.6px solid currentColor;border-right-color:transparent;
  border-radius:50%;animation:sp .7s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}
.pulse{animation:pl 1.1s ease-in-out infinite}
@keyframes pl{0%,100%{opacity:.35}50%{opacity:.9}}

@media (max-width:1100px){ .pg{grid-template-columns:300px 1fr} .masonry{columns:3 190px} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} }