:root { --ws-tabs-h: 46px; }

.ws-tabs {
  position: fixed; top: var(--topbar-h); left: 0; right: 0; height: var(--ws-tabs-h);
  z-index: 54; display: flex; align-items: center; gap: .75rem; padding: 0 .6rem;
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  border-bottom: 1px solid var(--rule); backdrop-filter: blur(12px);
}

.ws-tablist { display: flex; align-items: center; gap: .15rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ws-tablist::-webkit-scrollbar { display: none; }

.ws-tablist.fade-l { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px); mask-image: linear-gradient(to right, transparent, #000 28px); }
.ws-tablist.fade-r { -webkit-mask-image: linear-gradient(to left, transparent, #000 28px); mask-image: linear-gradient(to left, transparent, #000 28px); }
.ws-tablist.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, transparent, #000 28px, #000 calc(100% - 28px), transparent); }
.ws-tab {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: .88rem; font-weight: 600; padding: .38rem .7rem; border-radius: 999px;
  cursor: pointer; white-space: nowrap; transition: background .15s, color .15s;
}
.ws-tab:hover { color: var(--text); background: color-mix(in srgb, var(--brand) 10%, transparent); }
.ws-tab.on { color: #fff; background: var(--brand); }

.ws-tab-soon { opacity: .62; }
.ws-tab-soon:hover, .ws-tab-soon.on { opacity: 1; }
.ws-soon-pill { display: inline-block; margin-left: .35rem; padding: .08rem .4rem; border-radius: 999px;
  font-size: .6rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); vertical-align: 1px; }
.ws-tab-soon.on .ws-soon-pill { background: rgba(255, 255, 255, .22); color: #fff; }

.ws-tab-guide { display: inline-flex; align-items: center; gap: .3rem; }
.ws-tab-info { display: inline-flex; align-items: center; }

#app .reading { padding-top: calc(var(--topbar-h) + var(--ws-tabs-h)); }
#app .rail { top: calc(var(--topbar-h) + var(--ws-tabs-h)); }

.ws-panel {
  position: fixed; top: calc(var(--topbar-h) + var(--ws-tabs-h)); left: 0; right: 0; bottom: 0;
  z-index: 52; overflow-y: auto; background: var(--bg); color: var(--text);
  padding: 1.6rem clamp(1rem, 5vw, 3rem) 5rem;
}

body.ws-panel-active .demo-bar { display: none; }

.ws-wrap { max-width: 900px; margin: 0 auto; }
.ws-h { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; margin: 0 0 .3rem; text-wrap: balance; }
.ws-sub { color: var(--muted); font-size: .92rem; margin: 0 0 1.4rem; text-wrap: pretty; }

.ws-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.ws-card h4 { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 700; }
.ws-card p { margin: .2rem 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }

.rec-arch { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .6rem; }
.rec-arch b { font-family: var(--serif); font-size: 1.35rem; color: var(--brand-ink); text-transform: capitalize; }
.rec-arch .rec-pill { font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 800;
  color: #fff; background: var(--brand); border-radius: 999px; padding: .16rem .5rem; }
.rec-facts { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: .6rem 0; }
.rec-fact { font-size: .82rem; color: var(--text); background: var(--surface2); border: 1px solid var(--rule);
  border-radius: 8px; padding: .3rem .55rem; }
.rec-fact span { color: var(--faint); }
.rec-reasons { margin: .6rem 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .86rem; line-height: 1.55; }
.rec-warn { margin-top: .8rem; padding: .6rem .8rem; border-radius: 10px; font-size: .84rem; line-height: 1.5;
  background: color-mix(in srgb, #d9822b 16%, transparent); border: 1px solid color-mix(in srgb, #d9822b 40%, transparent); color: var(--text); }

.arch-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; margin: 1rem 0; }
.arch-card { text-align: left; cursor: pointer; background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: 12px; padding: .8rem .9rem; transition: border-color .15s, background .15s; }
.arch-card:hover { border-color: var(--brand-bright); }
.arch-card.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.arch-card b { display: block; font-family: var(--serif); text-transform: capitalize; font-size: 1.05rem; color: var(--brand-ink); }
.arch-card small { color: var(--muted); font-size: .78rem; line-height: 1.4; display: block; margin-top: .2rem; }
@media (max-width: 640px) { .arch-row { grid-template-columns: 1fr; } }

.ws-adv { margin: .6rem 0 1rem; }
.ws-adv summary { cursor: pointer; font-weight: 600; color: var(--brand-ink); padding: .3rem 0; }
.ws-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; margin-top: .8rem; }
.ws-field { display: flex; flex-direction: column; gap: .25rem; }
.ws-field label { font-size: .78rem; color: var(--faint); font-weight: 600; }
.ws-field select, .ws-field input { font: inherit; font-size: .88rem; padding: .4rem .5rem; border-radius: 8px;
  border: 1px solid var(--rule2); background: var(--surface); color: var(--text); }
.ws-field.wide { grid-column: 1 / -1; }
.ws-custom { display: none; gap: .6rem; }
.ws-custom.show { display: flex; }
.ws-custom .ws-field { flex: 1; }
.ws-advgroup { margin-top: 1rem; }
.ws-advgroup:first-of-type { margin-top: .8rem; }
.ws-advgroup-t { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brand-ink); border-bottom: 1px solid var(--rule2); padding-bottom: .3rem; }
.ws-advgroup .ws-grid { margin-top: .55rem; }
@media (max-width: 640px) { .ws-grid { grid-template-columns: 1fr; } }

.ws-btn { appearance: none; border: 1px solid var(--rule2); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 600; font-size: .9rem; padding: .55rem 1rem; border-radius: 999px; cursor: pointer; }
.ws-btn:hover { border-color: var(--brand-bright); }
.ws-btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.ws-btn.primary:hover { background: var(--brand-bright); border-color: var(--brand-bright); }
.ws-btn:disabled { opacity: .55; cursor: default; }
.ws-actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin-top: 1rem; }
.ws-status { font-size: .86rem; color: var(--muted); margin-left: .2rem; }

.ws-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.ws-cards .ws-card { display: flex; flex-direction: column; }
.ws-cards .ws-card .ws-btn { margin-top: auto; align-self: flex-start; }

.ws-spin { display: inline-block; width: 13px; height: 13px; margin-right: .4rem; vertical-align: -1px;
  border: 2px solid color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor;
  border-radius: 50%; animation: ws-spin .7s linear infinite; }
@keyframes ws-spin { to { transform: rotate(360deg); } }

.ws-tab[aria-expanded="true"] { color: #fff; background: var(--brand); }
.ws-menu { position: fixed; z-index: 60; min-width: 240px; max-width: min(340px, 94vw);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 12px;
  box-shadow: var(--shadow); padding: .35rem; font-family: var(--sans); }
.ws-menu-item { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0;
  background: transparent; color: var(--text); font: inherit; font-size: .9rem; padding: .5rem .55rem;
  border-radius: 8px; cursor: pointer; }
.ws-menu-item:hover:not([disabled]), .ws-menu-item:focus { background: color-mix(in srgb, var(--brand) 12%, transparent); outline: none; }
.ws-menu-item[disabled] { opacity: .5; cursor: default; }
.ws-mi-check { width: 1em; flex: none; color: var(--brand); font-weight: 700; }
.ws-mi-label { flex: 1; }
.ws-mi-meta { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.ws-menu-item.err .ws-mi-meta { color: var(--danger, #b02a1a); }
.ws-menu-item.ws-mi-new { color: var(--brand-ink); font-weight: 600; }
.ws-menu-item.ws-mi-back { color: var(--muted); }
.ws-menu-div { height: 1px; background: var(--rule); margin: .3rem .2rem; }
.ws-menu-head { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); padding: .45rem .55rem .25rem; }
.ws-menu-load { padding: .6rem .55rem; color: var(--muted); font-size: .88rem; }

.ws-export-ver { display: flex; align-items: center; gap: .5rem; margin-bottom: 1.1rem; }
.ws-export-ver label { font-size: .8rem; font-weight: 600; color: var(--faint); }
.ws-export-ver select { font: inherit; font-size: .88rem; padding: .4rem .55rem; border-radius: 8px;
  border: 1px solid var(--rule2); background: var(--surface); color: var(--text); }

.ws-mon-banner { border: 1px dashed color-mix(in srgb, var(--brand) 45%, transparent);
  background: color-mix(in srgb, var(--brand) 7%, transparent); border-radius: 12px;
  padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.ws-mon-banner b { color: var(--brand-ink); }
.ws-mon-banner p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.ws-mon-owed { font-size: 1.55rem; font-weight: 700; margin: .15rem 0; }
.ws-mon-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-top: .5rem; }
.ws-mon-table th { text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint); padding: .35rem .6rem; border-bottom: 1px solid var(--rule); }
.ws-mon-table td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rule); }
.ws-soon-card { position: relative; }
.ws-soon-card .ws-soon-pill { position: absolute; top: .9rem; right: .9rem; margin: 0; }
.ws-soon-card .ws-btn, .ws-soon-card select, .ws-soon-card input { pointer-events: none; }

.ws-web-gorow { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.ws-web-go { text-decoration: none; white-space: nowrap; }
.ws-web-go.stale { background: var(--surface); color: var(--muted); border: 1.5px solid color-mix(in srgb, #d9822b 55%, transparent); }
.ws-web-oldnote { font-size: .78rem; color: color-mix(in srgb, #d9822b 85%, var(--text)); font-style: italic; text-wrap: pretty; }

.ws-web-drift { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .8rem;
  border: 1px solid color-mix(in srgb, #d9822b 45%, transparent); background: color-mix(in srgb, #d9822b 12%, var(--surface));
  border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: 1.2rem; }
.ws-web-drift-txt { flex: 1 1 18rem; min-width: 0; }
.ws-web-drift-txt b { color: var(--text); text-wrap: balance; }
.ws-web-drift-txt p { margin: .3rem 0 0; color: var(--muted); font-size: .86rem; line-height: 1.5; text-wrap: pretty; }
.ws-web-drift-act { display: flex; align-items: center; gap: .35rem; flex: 0 0 auto; }
.ws-web-recompile { white-space: nowrap; transition: background .2s, color .2s; }
.ws-web-recompile.ok { background: color-mix(in srgb, #3a9d5d 90%, var(--brand)); color: #fff; }
.ws-web-recompile .ws-spin { border-top-color: currentColor; margin-right: .45rem; }

.ws-tip-wrap { position: relative; display: inline-flex; vertical-align: middle; }
.ws-tip-btn { appearance: none; border: 0; background: transparent; color: var(--faint); cursor: help;
  font-size: .95rem; line-height: 1; padding: .1rem .2rem; border-radius: 999px; }
.ws-tip-btn:hover, .ws-tip-btn:focus-visible { color: var(--brand); outline: none; }
.ws-tip { position: absolute; z-index: 70; left: 50%; bottom: calc(100% + 8px);
  transform: translateX(calc(-50% + var(--ws-tip-shift, 0px)));
  width: max-content; max-width: min(260px, calc(100vw - 24px)); text-wrap: pretty;
  background: var(--text); color: var(--bg); font-size: .78rem; line-height: 1.4;
  padding: .5rem .65rem; border-radius: 9px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .12s;
  pointer-events: none; font-weight: 500; }
.ws-tip::after { content: ""; position: absolute; top: 100%; left: 50%;
  transform: translateX(calc(-50% + var(--ws-tip-arrow, 0px)));
  border: 5px solid transparent; border-top-color: var(--text); }
.ws-tip-wrap:hover .ws-tip, .ws-tip-wrap.open .ws-tip { opacity: 1; visibility: visible; }

.ws-web-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.3rem; margin-bottom: 1.2rem; }
.ws-web-lbl { display: flex; align-items: center; gap: .2rem; margin: 1.1rem 0 .5rem; font-size: .82rem; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase; color: var(--faint); }
.ws-web-setup > .ws-web-lbl:first-child { margin-top: 0; }

.ws-web-tpls { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.ws-web-tpl { text-align: left; cursor: pointer; background: var(--surface); border: 1.5px solid var(--rule);
  border-radius: 12px; padding: .7rem .8rem; transition: border-color .15s, background .15s; }
.ws-web-tpl:hover { border-color: var(--brand-bright); }
.ws-web-tpl.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.ws-web-tpl b { display: block; font-family: var(--serif); font-size: 1.02rem; color: var(--brand-ink); }
.ws-web-tpl small { display: block; margin-top: .2rem; color: var(--muted); font-size: .76rem; line-height: 1.35; }

.ws-web-sws { display: flex; flex-wrap: wrap; gap: .5rem; }
.ws-web-sw { display: inline-flex; align-items: center; gap: .4rem; min-height: 40px; padding: .4rem .75rem;
  border-radius: 999px; border: 2px solid var(--rule); cursor: pointer;
  transition: transform .1s, border-color .15s, box-shadow .15s; }
.ws-web-sw:hover { transform: translateY(-1px); }
.ws-web-sw.sel { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 40%, transparent); }
.ws-web-sw-ic { display: inline-flex; flex: none; }
.ws-web-sw-ic svg { display: block; }
.ws-web-sw-lbl { font-size: .85rem; font-weight: 600; white-space: nowrap; }

.ws-web-faces { display: flex; flex-wrap: wrap; gap: .5rem; }
.ws-web-face { cursor: pointer; background: var(--surface); border: 1.5px solid var(--rule); color: var(--text);
  border-radius: 999px; padding: .45rem .85rem; font-size: .95rem; transition: border-color .15s, background .15s; }
.ws-web-face:hover { border-color: var(--brand-bright); }
.ws-web-face.sel { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--surface)); color: var(--brand-ink); }

.ws-web-preview { display: flex; flex-direction: column; }
.ws-web-frame-wrap { position: relative; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden;
  background: var(--surface2); box-shadow: var(--shadow); }
.ws-web-frame { display: block; width: 100%; height: clamp(360px, 58vh, 560px); border: 0; background: var(--bg); }
.ws-web-frame-cap { margin: .45rem 0 0; text-align: center; font-size: .74rem; letter-spacing: .04em;
  text-transform: uppercase; color: var(--faint); }

.ws-web-id-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.ws-web-cover { width: 96px; height: 144px; object-fit: cover; border-radius: 8px; box-shadow: var(--shadow);
  background: var(--surface2); display: block; }
.ws-web-cover-none { display: grid; place-items: center; text-align: center; font-size: .72rem; color: var(--faint);
  border: 1px dashed var(--rule2); padding: .4rem; }
.ws-web-id-fields { display: flex; flex-direction: column; gap: .7rem; }
.ws-web-field { display: flex; flex-direction: column; gap: .25rem; }
.ws-web-field > span { font-size: .78rem; font-weight: 600; color: var(--faint); }
.ws-web-input, .ws-web-textarea { font: inherit; font-size: .92rem; padding: .5rem .6rem; border-radius: 9px;
  border: 1px solid var(--rule2); background: var(--surface); color: var(--text); width: 100%; box-sizing: border-box; }
.ws-web-textarea { resize: vertical; line-height: 1.45; }
.ws-web-input:disabled { opacity: .7; cursor: not-allowed; }
.ws-web-slug { display: flex; align-items: center; gap: 0; border: 1px solid var(--rule2); border-radius: 9px;
  background: var(--surface); overflow: hidden; }
.ws-web-slug .ws-web-url { padding: .5rem .1rem .5rem .6rem; color: var(--faint); font-size: .86rem; white-space: nowrap; }
.ws-web-slug .ws-web-input { border: 0; border-radius: 0; padding-left: .1rem; background: transparent; }

.ws-web-meta h4, .ws-web-eds h4 { display: flex; align-items: center; gap: .2rem; }
.ws-web-prefill { color: var(--brand-ink); font-size: .8rem; margin: 0 0 .6rem; }
.ws-web-meta .ws-grid { margin-top: .2rem; }
.ws-web-about { margin-top: .9rem; }
.ws-web-count { font-weight: 400; color: var(--faint); font-size: .74rem; margin-left: .3rem; }
.ws-web-count.near { color: color-mix(in srgb, #d9822b 85%, var(--text)); font-weight: 700; }

.ws-ed-row { border: 1px solid var(--rule); border-radius: 10px; padding: .65rem .8rem; margin-top: .6rem; }
.ws-ed-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ws-ed-head b { font-size: .92rem; }
.ws-ed-body { margin-top: .45rem; display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.ws-ed-row.off .ws-ed-body { opacity: .55; }
.ws-ed-note { color: var(--muted); font-size: .82rem; line-height: 1.45; margin: 0; text-wrap: pretty; }
.ws-ed-linked { font-size: .8rem; color: var(--brand-ink); margin: 0; word-break: break-all; }
.ws-ed-sw { flex: none; width: 46px; height: 26px; border-radius: 999px; border: 0; padding: 0;
  background: var(--rule2); position: relative; cursor: pointer; transition: background .15s; }
.ws-ed-sw[aria-checked="true"] { background: var(--brand); }
.ws-ed-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .15s; }
.ws-ed-sw[aria-checked="true"] .ws-ed-knob { left: 23px; }
.ws-ed-tagrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.ws-ed-taglbl { font-size: .78rem; font-weight: 600; color: var(--faint); white-space: nowrap; }
.ws-ed-tag { max-width: 220px; }

.ws-rev-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20, 16, 12, .55);
  display: grid; place-items: center; padding: 16px; }
.ws-rev-modal { box-sizing: border-box; width: min(440px, 100%); max-height: calc(100vh - 32px);
  overflow: auto; background: var(--surface); color: var(--text); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--shadow); padding: 1.1rem 1.2rem; }
.ws-rev-modal h4 { margin: 0 0 .4rem; font-size: 1.02rem; }
.ws-rev-modal p { margin: .2rem 0 .8rem; color: var(--muted); font-size: .88rem; line-height: 1.5; text-wrap: pretty; }
.ws-rev-rows { display: flex; flex-direction: column; gap: .5rem; }
.ws-rev-row { display: flex; align-items: center; gap: .55rem; }
.ws-rev-row > span:first-child { flex: none; width: 5.2em; font-size: .74rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.ws-rev-v { color: var(--muted); font-weight: 600; }
.ws-rev-input { max-width: 130px; }
.ws-rev-actions { margin-top: 1rem; }

.ws-web-cmp-row { margin: .55rem 0 1rem; }
.ws-web-cmp { font-size: .84rem; }
.ws-cmp-scrim { position: fixed; inset: 0; z-index: 80; background: rgba(20, 16, 12, .55);
  display: grid; place-items: center; padding: 16px; }
.ws-cmp-modal { box-sizing: border-box; display: flex; flex-direction: column;
  width: min(1400px, 100%); height: min(880px, calc(100vh - 32px));
  background: var(--surface); color: var(--text); border: 1px solid var(--rule);
  border-radius: 14px; box-shadow: var(--shadow); padding: .9rem 1rem 1rem; }
.ws-cmp-head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.ws-cmp-head h4 { margin: 0; font-size: 1.02rem; text-wrap: balance; }
.ws-cmp-x { appearance: none; border: 0; background: none; color: var(--muted); font-size: 1.45rem;
  line-height: 1; cursor: pointer; padding: .1rem .4rem; border-radius: 8px; }
.ws-cmp-x:hover { color: var(--text); background: var(--surface2); }
.ws-cmp-grid { flex: 1; min-height: 0; margin-top: .6rem; display: grid; gap: .8rem;
  grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: auto; }
.ws-cmp-cell { margin: 0; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ws-cmp-cap { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; }
.ws-cmp-cap b { font-size: .88rem; white-space: nowrap; }
.ws-cmp-cur { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--brand-ink); border: 1px solid var(--brand); border-radius: 999px; padding: .1rem .5rem; }
.ws-cmp-frame-wrap { flex: 1; min-height: 0; position: relative; border: 1px solid var(--rule);
  border-radius: 10px; overflow: hidden; background: var(--surface2); }
.ws-cmp-cell.on .ws-cmp-frame-wrap { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.ws-cmp-frame { position: absolute; inset: 0; width: 200%; height: 200%; border: 0;
  background: var(--bg); transform: scale(.5); transform-origin: 0 0; }
@media (max-width: 1100px) {
  .ws-cmp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-cmp-cell { min-height: 45vh; }
}
@media (max-width: 640px) {
  .ws-cmp-grid { grid-template-columns: 1fr; }
  .ws-cmp-cell { min-height: 55vh; }
}

.ws-web-pubrow { margin: 1.1rem 0 1.6rem; }
.ws-web-pub { font-size: .96rem; padding: .6rem 1.3rem; }

.ws-web-soon-h { margin: 1.6rem 0 .3rem; font-size: .82rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; color: var(--faint); text-wrap: balance; }
.ws-web-soon-sub { margin: 0 0 .9rem; color: var(--muted); font-size: .84rem; line-height: 1.5; max-width: 46rem; text-wrap: pretty; }
.ws-web-plugin { margin-bottom: .9rem; }
.ws-web-plugin-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ws-web-plugin-copy { min-width: 0; }
.ws-web-plugin-row h4 { margin: 0 0 .2rem; text-wrap: balance; }
.ws-web-plugin-copy p { margin: .25rem 0 0; text-wrap: pretty; }
.ws-web-plugin-karaoke { color: var(--muted); font-size: .84rem; line-height: 1.5; }
.ws-web-plugin-link { appearance: none; margin-top: .55rem; padding: 0; background: none; border: 0;
  color: var(--brand); font: inherit; font-size: .84rem; font-weight: 600; cursor: pointer; }
.ws-web-plugin-link:hover { text-decoration: underline; }
.ws-web-switch { flex: none; width: 46px; height: 26px; border-radius: 999px; background: var(--rule2);
  position: relative; opacity: .6; }
.ws-web-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(0,0,0,.25); }

.ws-web-tpl b, .ws-web-lbl, .ws-web-frame-cap, .ws-web-field > span, .ws-soon-card h4 { text-wrap: balance; }
.ws-web-lbl, .ws-web-frame-cap, .ws-web-sw-lbl { white-space: nowrap; }
.ws-web-tpl small, .ws-web-cover-none, .ws-soon-card p { text-wrap: pretty; }

@media (max-width: 820px) {
  .ws-web-grid { grid-template-columns: 1fr; }
  .ws-web-tpls { grid-template-columns: 1fr; }
  .ws-web-frame { height: clamp(340px, 70vh, 520px); }
}
@media (max-width: 460px) {
  .ws-web-id-grid { grid-template-columns: 1fr; }
  .ws-web-cover { margin: 0 auto; }
}

.ws-wallets { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0 .8rem; }
.ws-wallet { display: flex; align-items: center; gap: .75rem; padding: .6rem .8rem;
  border: 1px solid var(--rule, rgba(128,128,128,.22)); border-radius: 12px; }
.ws-wallet b { font-family: var(--serif, ui-serif, Georgia, serif); font-size: 1.15rem;
  font-variant-numeric: tabular-nums; }
.ws-wallet-note { flex: 1; font-size: .78rem; opacity: .65; }
.ws-withdraw:disabled { opacity: .4; cursor: default; }

.ws-voices { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .6rem 0 .9rem; }
.ws-voice { position: relative; text-align: left; font: inherit; cursor: pointer;
  padding: .8rem .9rem 2.3rem; border-radius: 14px; background: transparent;
  border: 1px solid var(--rule, rgba(128,128,128,.25)); }
.ws-voice.on { border-color: var(--brand, #7C4DBA); box-shadow: 0 0 0 1px var(--brand, #7C4DBA) inset; }
.ws-voice b { display: block; font-size: .95rem; margin-bottom: .2rem; }
.ws-voice span { display: block; font-size: .78rem; opacity: .7; line-height: 1.4; }
.ws-voice-play { position: absolute; left: .8rem; bottom: .7rem; font: inherit; font-size: .8rem;
  padding: .1rem .55rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule, rgba(128,128,128,.3)); background: transparent; }
.ws-voice-play:hover { border-color: var(--brand, #7C4DBA); }
.ws-audio-out { margin-top: .6rem; }
@media (max-width: 640px) { .ws-voices { grid-template-columns: 1fr; } }

.ws-subtabs { display: flex; gap: .3rem; margin: 0 0 1.1rem; flex-wrap: wrap; }
.ws-subtab { font: inherit; font-size: .86rem; font-weight: 600; cursor: pointer;
  padding: .35rem .85rem; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: inherit; opacity: .6; }
.ws-subtab:hover { opacity: .85; }
.ws-subtab.on { opacity: 1; background: color-mix(in srgb, currentColor 9%, transparent);
  border-color: color-mix(in srgb, currentColor 16%, transparent); }

.ws-price-row { margin-top: .8rem; }
.ws-price-sym { font-weight: 700; opacity: .7; }
.ws-price-in, .ws-cur-sel { font: inherit; font-size: .92rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--rule2); border-radius: 9px; padding: .42rem .6rem; }
.ws-price-in { width: 6.5rem; }
.ws-price-in:focus-visible, .ws-cur-sel:focus-visible { outline: 2px solid var(--brand-bright); outline-offset: 1px; }
.ws-note { font-size: .84rem; color: var(--muted); margin: .55rem 0 0; }

.ws-radios { display: grid; gap: .1rem; margin: .7rem 0 0; }
.ws-radio, .ws-check { display: flex; gap: .6rem; align-items: flex-start; cursor: pointer;
  padding: .5rem .6rem; border-radius: 10px; }
.ws-radio:hover, .ws-check:hover { background: color-mix(in srgb, currentColor 5%, transparent); }
.ws-radio input, .ws-check input { margin-top: .18rem; accent-color: var(--brand); flex: none; }
.ws-radio b { display: block; font-size: .92rem; font-weight: 600; }
.ws-radio em { display: block; font-style: normal; font-size: .82rem; color: var(--muted); margin-top: .1rem; }
.ws-check span { font-size: .9rem; }

.ws-gate-secs { margin: .6rem 0 0; max-height: 15rem; overflow-y: auto; scrollbar-gutter: stable;
  scrollbar-width: thin; scrollbar-color: transparent transparent;
  border-top: 1px solid var(--rule); padding-top: .5rem; }
.ws-gate-secs:hover, .ws-gate-secs:focus-within { scrollbar-color: color-mix(in srgb, var(--muted) 60%, transparent) transparent; }
.ws-gate-secs::-webkit-scrollbar { width: 12px; background: transparent; }
.ws-gate-secs::-webkit-scrollbar-track { background: transparent; }
.ws-gate-secs::-webkit-scrollbar-thumb { background-color: transparent; background-clip: padding-box;
  border: 3px solid transparent; border-radius: 999px; min-height: 40px; }
.ws-gate-secs:hover::-webkit-scrollbar-thumb { background-color: color-mix(in srgb, var(--muted) 60%, transparent); }

.ws-mon-banner.ws-mon-live { border-color: color-mix(in srgb, var(--brand) 40%, var(--rule));
  background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }

#reading > .ed-views { position: sticky; top: 0; z-index: 41; margin: 0; padding: .55rem 0 .5rem;
  background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px);
  justify-content: center; }

.ed-paper-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0;
  padding-top: .2rem; max-width: none; }
.ed-paper-wrap > .ed-views { flex: none; justify-content: center; margin-bottom: .6rem; }

#panel-edit:has(> .ed-paper-wrap) { overflow: hidden; padding-bottom: 1.2rem; padding-top: .9rem;
  display: flex; flex-direction: column; }