@font-face {
  font-family:Tabsira Persian;
  src:url('../assets/Vazirmatn.woff2') format('woff2');
  font-display:swap
}
:root {
  --bg:#faf8f3;
  --panel:#f2f2eb;
  --surface:#fffefa;
  --text:#273e35;
  --muted:#788078;
  --line:#e2e5dc;
  --green:#285447;
  --green-soft:#e4ebe1;
  --brass:#a3834e;
  --shadow:0 14px 40px #263d3510;
  --serif:Georgia,'Times New Roman',serif;
  --sans:'Helvetica Neue',Arial,sans-serif;
  color-scheme:light
}
:root[data-theme=dark] {
  --bg:#171d1a;
  --panel:#1d2520;
  --surface:#232d26;
  --text:#e4ebe3;
  --muted:#a7b3a9;
  --line:#354139;
  --green:#a3c9b2;
  --green-soft:#303e34;
  --brass:#c7a466;
  --shadow:0 14px 40px #0002;
  color-scheme:dark
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:14px;
  -webkit-font-smoothing:antialiased
}
button,input,textarea,select {
  font:inherit
}
button,a,input,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer;
  color:inherit
}
button {
  background:none;
  border:0
}
a {
  color:inherit;
  text-decoration:none
}
button:disabled {
  cursor:default
}
button:focus-visible,a:focus-visible,[tabindex]:focus-visible {
  outline:2px solid var(--brass);
  outline-offset:4px
}
input:focus,textarea:focus {
  outline:2px solid var(--brass);
  outline-offset:3px
}
button:hover {
  color:var(--green)
}
button .icon {
  flex-shrink:0
}
.icon {
  width:20px;
  height:20px;
  vertical-align:middle;
  flex-shrink:0
}
.icon-button {
  width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  color:var(--muted)
}
.icon-button:hover {
  background:var(--green-soft);
  color:var(--text)
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.skip-link {
  position:fixed;
  top:-60px;
  z-index:99;
  background:var(--surface);
  padding:12px
}
.skip-link:focus {
  top:0
}
[hidden] {
  display:none!important
}
.topbar {
  height:80px;
  display:flex;
  align-items:center;
  gap:24px;
  border-bottom:1px solid var(--line);
  padding:0 30px;
  background:var(--bg);
  position:relative;
  z-index:20
}
.brand {
  display:flex;
  align-items:center;
  gap:11px;
  min-width:177px;
  color:var(--green)
}
.brand-symbol {
  width:43px;
  height:36px
}
.brand span {
  font-size:27px;
  letter-spacing:-1px;
  font-weight:650
}
.header-divider {
  width:1px;
  height:23px;
  background:var(--line)
}
.header-caption {
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
  font-size:15px
}
.topbar-actions {
  margin-inline-start:auto;
  display:flex;
  align-items:center;
  gap:14px
}
.prototype-badge {
  font-size:10px;
  letter-spacing:.5px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:7px;
  margin-inline-end:15px
}
.prototype-badge i {
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--brass)
}
.language-button {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  color:var(--muted)
}
.language-button .icon {
  width:17px
}
.account-avatar {
  border-radius:50%;
  width:34px;
  height:34px;
  background:var(--green-soft);
  font-family:var(--serif);
  font-size:17px;
  border:1px solid var(--line);
  margin-inline-start:4px
}
.app-body {
  display:grid;
  grid-template-columns:var(--left-width) 1px minmax(0,1fr) 1px var(--right-width);
  height:calc(100dvh - 80px);
  position:relative
}
.sidebar {
  background:var(--panel);
  min-width:0;
  overflow-y:auto;
  scrollbar-width:thin
}
.left-sidebar {
  display:flex;
  flex-direction:column;
  padding:20px 17px 12px
}
.panel-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 3px 19px
}
.tiny-label,.eyebrow {
  font-size:10px;
  font-weight:600;
  letter-spacing:1.6px;
  color:var(--muted);
  line-height:1.6
}
.nav-item {
  width:100%;
  display:flex;
  align-items:center;
  gap:13px;
  min-height:43px;
  border-radius:6px;
  text-align:start;
  padding:10px 12px;
  color:var(--muted);
  font-size:12px;
  white-space:nowrap
}
.nav-item .icon {
  width:19px;
  height:19px
}
.nav-item:hover {
  background:var(--green-soft)
}
.nav-item.active {
  background:var(--green-soft);
  color:var(--green);
  font-weight:600;
  position:relative
}
.nav-item.active:before {
  content:'';
  width:3px;
  height:17px;
  background:var(--green);
  border-radius:3px;
  position:absolute;
  inset-inline-start:-17px
}
.nav-count {
  margin-inline-start:auto;
  font-size:10px
}
.nav-gap {
  height:15px
}
.sidebar-context {
  margin:30px 12px 15px;
  padding-top:23px;
  border-top:1px solid var(--line)
}
.aside-heading {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.aside-heading>.icon {
  width:14px;
  color:var(--muted)
}
.space-link {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px;
  padding:11px 0;
  color:var(--muted);
  text-align:start
}
.space-dot {
  width:6px;
  height:6px;
  background:var(--brass);
  border-radius:2px
}
.space-dot.muted {
  background:#80978a
}
.sidebar-bottom {
  margin-top:auto;
  padding-top:22px
}
.sidebar-bottom .nav-item {
  font-size:11px
}
.sidebar-signature {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted);
  padding:20px 12px 4px
}
.resize-handle {
  background:var(--line);
  position:relative;
  z-index:15;
  cursor:col-resize;
  touch-action:none
}
.resize-handle:before {
  content:'';
  position:absolute;
  inset:0 -4px
}
.resize-handle:hover,.resize-handle:focus-visible {
  background:var(--brass)
}
.resizing,.resizing * {
  cursor:col-resize!important;
  user-select:none!important
}
.center-pane {
  overflow:auto;
  min-width:0;
  scrollbar-width:thin
}
.workspace-bar {
  height:62px;
  padding:0 38px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  gap:12px
}
.breadcrumb {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:11px;
  color:var(--muted)
}
.breadcrumb strong {
  font-weight:500;
  color:var(--text)
}
.workspace-bar>div {
  display:flex;
  gap:7px;
  align-items:center
}
.sample-label {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted);
  margin-inline-end:10px
}
main {
  max-width:1280px;
  margin:0 auto;
  padding:38px 40px 0;
  outline:none
}
.page-heading {
  display:flex;
  gap:20px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:30px
}
.eyebrow {
  color:var(--brass);
  font-size:9px;
  letter-spacing:1.8px
}
h1 {
  font-family:var(--serif);
  font-size:clamp(28px,2.5vw,42px);
  font-weight:400;
  letter-spacing:-1.3px;
  margin:13px 0 12px;
  line-height:1.15
}
p {
  line-height:1.7
}
.page-heading p {
  color:var(--muted);
  font-size:12px;
  margin:0;
  max-width:490px
}
.primary,.secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border-radius:6px;
  padding:11px 15px;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  min-height:40px
}
.primary {
  background:var(--green);
  color:var(--bg)
}
.primary:hover {
  filter:brightness(1.12);
  color:var(--bg)
}
.primary .icon {
  width:15px;
  height:15px
}
.secondary {
  border:1px solid var(--line);
  background:var(--surface)
}
.secondary:hover {
  border-color:var(--brass)
}
.secondary .icon {
  width:16px
}
.text-button {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:11px;
  padding:5px 0
}
.text-button .icon {
  width:16px
}
.continue-card {
  background:var(--green-soft);
  border:1px solid var(--line);
  border-radius:9px;
  min-height:240px;
  display:flex;
  position:relative;
  overflow:hidden;
  padding:26px 28px;
  gap:20px
}
.continue-copy {
  position:relative;
  z-index:2;
  max-width:63%
}
.continue-card .eyebrow {
  color:var(--green);
  font-size:8px;
  letter-spacing:1.5px
}
.draft-label {
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:10px;
  margin-top:26px
}
.draft-label .icon {
  width:13px;
  height:13px
}
.continue-card h2 {
  font:400 25px/1.2 var(--serif);
  letter-spacing:-.5px;
  margin:12px 0
}
.continue-card p {
  font-size:11px;
  color:var(--muted);
  max-width:320px;
  margin:0 0 15px
}
.paper-stack {
  width:190px;
  position:absolute;
  inset-inline-end:35px;
  bottom:-27px;
  height:219px;
  transform:rotate(7deg)
}
.paper {
  background:var(--surface);
  border:1px solid var(--line);
  width:170px;
  height:228px;
  position:absolute;
  box-shadow:var(--shadow);
  padding:22px
}
.paper.back {
  transform:rotate(-14deg);
  background:var(--bg);
  inset-inline-start:-15px;
  top:-6px
}
.paper.front span {
  font-size:6px;
  letter-spacing:1.7px;
  color:var(--muted)
}
.paper h3 {
  font:400 20px/1.2 var(--serif);
  margin:18px 0 16px
}
.paper i {
  height:2px;
  background:var(--line);
  margin-bottom:7px;
  display:block
}
.paper i:nth-of-type(3) {
  width:80%
}
.paper-mark {
  font-family:var(--serif);
  font-size:26px;
  color:var(--brass);
  text-align:center;
  margin-top:14px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:31px 0 16px
}
.section-heading h2 {
  font-family:var(--serif);
  font-weight:400;
  font-size:21px;
  letter-spacing:-.4px;
  margin:0
}
.section-heading>span {
  color:var(--muted);
  font-size:10px
}
.quick-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.quick-card {
  text-align:start;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:7px;
  padding:18px 15px;
  position:relative;
  transition:transform .18s,border-color .18s
}
.quick-card:hover {
  border-color:var(--brass);
  transform:translateY(-2px)
}
.quick-icon {
  display:block;
  color:var(--green);
  margin-bottom:18px
}
.quick-icon .icon {
  width:22px;
  height:22px
}
.quick-card strong {
  font-size:12px;
  font-weight:550;
  display:block
}
.quick-card small {
  font-size:10px;
  line-height:1.5;
  display:block;
  color:var(--muted);
  margin-top:7px
}
.quick-arrow {
  position:absolute;
  inset-inline-end:15px;
  top:20px;
  width:15px;
  height:15px;
  color:var(--muted)
}
.work-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:19px
}
.work-card {
  min-width:0
}
.cover {
  height:137px;
  width:100%;
  display:block;
  border-radius:6px;
  position:relative;
  overflow:hidden;
  text-align:start;
  background:#dbe3d4
}
.cover-label {
  position:absolute;
  bottom:13px;
  inset-inline-start:14px;
  font:italic 13px var(--serif);
  color:#3c5143
}
.cover>.icon {
  position:absolute;
  bottom:12px;
  inset-inline-end:12px;
  width:15px;
  color:#3c5143
}
.cover-art {
  display:block;
  position:absolute;
  transition:transform .4s
}
.cover:hover .cover-art {
  transform:scale(1.08) rotate(-5deg)
}
.attention .cover-art {
  width:110px;
  height:140px;
  border:1px solid #6d846b;
  border-radius:50% 50% 0 0;
  left:50%;
  top:24px;
  transform:rotate(-12deg);
  box-shadow:-17px 0 0 -1px #dbe3d4,-18px 0 0 0 #8b9c80,-34px 0 0 -1px #dbe3d4,-35px 0 0 0 #a0ae92
}
.language {
  background:#e6e0d3
}
.language .cover-art {
  width:125px;
  height:125px;
  left:38%;
  top:-22px;
  border:1px solid #b3a58a;
  transform:rotate(32deg);
  box-shadow:15px 15px 0 -1px #e6e0d3,16px 16px 0 #b3a58a,30px 30px 0 -1px #e6e0d3,31px 31px 0 #b3a58a
}
.memory {
  background:#dce3e5
}
.memory .cover-art {
  width:170px;
  height:170px;
  left:34%;
  top:30px;
  border:1px solid #94a7aa;
  border-radius:50%;
  box-shadow:0 -15px 0 -1px #dce3e5,0 -16px 0 #94a7aa,0 -30px 0 -1px #dce3e5,0 -31px 0 #94a7aa
}
.work-meta {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:9px 0 2px;
  font-size:8px;
  letter-spacing:1px;
  color:var(--muted)
}
.save {
  width:27px;
  height:27px
}
.save .icon {
  width:15px;
  height:15px
}
.is-saved {
  color:var(--green);
  background:var(--green-soft)
}
.is-saved .icon {
  fill:var(--green-soft)
}
.title-link {
  font:400 18px/1.3 var(--serif);
  text-align:start;
  padding:0;
  letter-spacing:-.2px
}
.author {
  font-size:9px;
  color:var(--muted);
  margin-top:9px;
  display:flex;
  flex-wrap:wrap;
  gap:6px
}
.workspace-footer {
  display:flex;
  justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  margin-top:38px;
  padding:20px 0 24px;
  font-size:9px;
  color:var(--muted)
}
.footer-dot {
  color:var(--brass);
  padding:0 5px
}
.right-sidebar {
  padding:20px 23px;
  display:flex;
  flex-direction:column
}
.right-sidebar .panel-heading {
  margin:0 0 32px
}
.tools-content>.eyebrow {
  font-size:8px;
  letter-spacing:1.3px
}
.quote-symbol {
  font:64px/.8 var(--serif);
  color:var(--brass);
  margin-top:28px;
  opacity:.7
}
blockquote {
  font:italic 23px/1.45 var(--serif);
  margin:0 0 20px;
  letter-spacing:-.4px
}
.quote-credit {
  font-size:8px;
  letter-spacing:1.5px;
  color:var(--muted)
}
.inspector-group {
  margin-top:31px;
  padding-top:23px;
  border-top:1px solid var(--line)
}
.aside-heading h3 {
  font-size:12px;
  font-weight:550;
  margin:0
}
.thread-item {
  display:flex;
  gap:11px;
  text-align:start;
  font-size:11px;
  line-height:1.5;
  margin:22px 0;
  padding:0
}
.thread-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:#698675;
  flex-shrink:0;
  margin-top:4px
}
.thread-dot.brass {
  background:var(--brass)
}
.thread-item small {
  display:block;
  font-size:9px;
  color:var(--muted);
  margin-top:5px
}
.tool-row {
  display:flex;
  align-items:center;
  gap:9px;
  padding:16px 0;
  width:100%;
  font-size:11px;
  text-align:start
}
.tool-row .icon {
  width:16px
}
.tool-row .icon:last-child {
  margin-inline-start:auto;
  width:14px
}
.aside-bottom {
  text-align:center;
  margin-top:70px;
  color:var(--muted)
}
.small-symbol {
  font:38px var(--serif);
  color:var(--brass);
  opacity:.65
}
.aside-bottom p {
  font:italic 15px/1.7 var(--serif);
  white-space:pre-line
}
.tool-note {
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}
.tools-content h3 {
  font:400 23px var(--serif)
}
.full {
  width:100%
}
.outline-item {
  display:flex;
  gap:13px;
  font-size:10px;
  color:var(--muted);
  line-height:1.6;
  padding:18px 0
}
.outline-item span {
  color:var(--text)
}
.privacy-note {
  margin-top:25px;
  font-size:10px;
  color:var(--muted);
  line-height:1.8
}
.privacy-note .icon {
  width:13px
}
.left-collapsed .app-body {
  grid-template-columns:72px 1px minmax(0,1fr) 1px var(--right-width)
}
.right-collapsed .app-body {
  grid-template-columns:var(--left-width) 1px minmax(0,1fr) 0 0
}
.left-collapsed.right-collapsed .app-body {
  grid-template-columns:72px 1px minmax(0,1fr) 0 0
}
.left-collapsed .left-sidebar {
  padding-inline:10px
}
.left-collapsed .left-sidebar .nav-label {
  display:none
}
.left-collapsed .left-sidebar .panel-heading {
  justify-content:center
}
.left-collapsed .nav-item {
  justify-content:center;
  padding-inline:0
}
.right-collapsed .right-sidebar {
  visibility:hidden;
  padding:0
}
.right-collapsed .right-handle {
  visibility:hidden
}
.mobile-nav,.mobile-shade {
  display:none
}
.editor-bar {
  display:flex;
  justify-content:space-between;
  border:1px solid var(--line);
  border-radius:7px 7px 0 0;
  background:var(--panel);
  padding:14px 20px;
  font-size:10px;
  color:var(--muted)
}
.editor-bar .icon {
  width:14px;
  margin-inline-end:5px
}
.editor-paper {
  background:var(--surface);
  padding:44px 45px 20px;
  border:1px solid var(--line);
  border-top:0;
  box-shadow:var(--shadow)
}
#note-title {
  width:100%;
  background:none;
  color:var(--text);
  border:0;
  font:30px/1.3 var(--serif);
  padding:0
}
#note-body {
  width:100%;
  min-height:390px;
  resize:vertical;
  background:none;
  color:var(--text);
  border:0;
  font:17px/1.9 var(--serif);
  padding:0
}
.editor-rule {
  height:1px;
  background:var(--line);
  margin:25px 0
}
.editor-footer {
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:var(--muted);
  padding-top:16px
}
.editor-footer .icon {
  width:12px;
  height:12px
}
.collection-toolbar {
  margin-bottom:25px
}
.search-field {
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid var(--line);
  padding:12px 16px;
  border-radius:6px;
  background:var(--surface)
}
.search-field .icon {
  color:var(--muted);
  width:17px
}
.search-field input {
  width:100%;
  background:none;
  border:0;
  color:var(--text);
  font-size:13px
}
.filter-pills {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:18px
}
.filter-pills button {
  padding:7px 12px;
  font-size:11px;
  border-radius:20px;
  color:var(--muted)
}
.filter-pills button.selected {
  background:var(--green-soft);
  color:var(--green)
}
.collection-grid .cover {
  height:180px
}
.empty-state {
  color:var(--muted);
  padding:40px 0;
  line-height:1.8
}
.exhibit-hero {
  text-align:center;
  background:var(--green-soft);
  padding:40px 30px;
  border-radius:8px
}
.exhibit-avatar {
  width:66px;
  height:66px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:50%;
  margin:0 auto 24px;
  font:44px var(--serif);
  color:var(--green)
}
.exhibit-hero h2 {
  font:34px var(--serif);
  margin:16px 0
}
.exhibit-hero p {
  font:15px/1.8 var(--serif);
  max-width:420px;
  margin:0 auto;
  color:var(--muted)
}
.topic-tags {
  display:flex;
  justify-content:center;
  gap:8px;
  margin-top:24px;
  flex-wrap:wrap
}
.topic-tags span {
  font-size:10px;
  border:1px solid var(--line);
  border-radius:20px;
  padding:6px 12px;
  background:var(--surface)
}
.people-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px
}
.person-card {
  padding:25px;
  border:1px solid var(--line);
  border-radius:8px;
  background:var(--surface)
}
.person-avatar {
  border-radius:50%;
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  background:var(--green-soft);
  font:19px var(--serif)
}
.person-card h2 {
  font:23px var(--serif)
}
.person-card>span {
  font-size:11px;
  color:var(--brass)
}
.person-card p {
  font-size:12px;
  color:var(--muted)
}
.quiet-note {
  padding:24px 0;
  font-size:12px;
  line-height:1.8;
  color:var(--muted)
}
.message-preview {
  border:1px dashed var(--line);
  padding:60px 30px;
  text-align:center;
  border-radius:9px
}
.message-preview>div>.icon {
  width:38px;
  height:38px;
  color:var(--brass)
}
.message-preview h2 {
  font:26px var(--serif)
}
.message-preview p {
  max-width:400px;
  margin:0 auto 25px;
  color:var(--muted);
  font-size:13px
}
dialog {
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  padding:38px;
  width:min(520px,calc(100vw - 32px));
  box-shadow:0 30px 100px #0003
}
dialog::backdrop {
  background:#17281f66;
  backdrop-filter:blur(4px)
}
dialog h2 {
  font:30px/1.25 var(--serif);
  margin:15px 0
}
dialog p,dialog li {
  font-size:13px;
  line-height:1.8;
  color:var(--muted)
}
dialog a {
  text-decoration:underline
}
dialog ul {
  padding-inline-start:20px
}
.modal-close {
  position:absolute;
  top:9px;
  inset-inline-end:9px
}
.modal-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:24px
}
dialog label {
  display:block;
  margin:20px 0;
  font-size:12px
}
dialog input:not([type=checkbox]),dialog textarea {
  display:block;
  width:100%;
  margin-top:10px;
  padding:12px;
  border:1px solid var(--line);
  border-radius:6px;
  background:var(--bg);
  color:var(--text)
}
dialog textarea {
  min-height:100px;
  resize:vertical
}
.setting-check {
  display:flex!important;
  align-items:center;
  gap:10px
}
.reader-intro {
  font:21px/1.6 var(--serif)!important;
  color:var(--text)!important
}
#toast {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translate(-50%,15px);
  background:var(--text);
  color:var(--bg);
  padding:13px 22px;
  border-radius:7px;
  font-size:12px;
  z-index:100;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s;
  max-width:90vw
}
#toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
[dir=rtl] {
  --sans:'Tabsira Persian',Tahoma,sans-serif;
  --serif:'Tabsira Persian',Tahoma,serif
}
[dir=rtl] h1 {
  letter-spacing:0;
  line-height:1.7;
  font-size:30px
}
[dir=rtl] .brand span {
  letter-spacing:0
}
[dir=rtl] .eyebrow,[dir=rtl] .tiny-label {
  letter-spacing:0
}
[dir=rtl] .text-button .icon,[dir=rtl] .quick-arrow {
  transform:scaleX(-1)
}
[dir=rtl] .paper-stack {
  transform:rotate(-7deg)
}
@media(hover:hover) and (min-width:800px) {
  .hover-preview.left-collapsed .left-sidebar:hover,.hover-preview.left-collapsed .left-sidebar:focus-within {
    position:absolute;
    inset-inline-start:0;
    top:0;
    bottom:0;
    width:var(--left-width);
    z-index:18;
    box-shadow:var(--shadow);
    padding-inline:17px
  }
  .hover-preview.left-collapsed .left-sidebar:hover .nav-label,.hover-preview.left-collapsed .left-sidebar:focus-within .nav-label {
    display:block
  }
  .hover-preview.left-collapsed .left-sidebar:hover .nav-item,.hover-preview.left-collapsed .left-sidebar:focus-within .nav-item {
    justify-content:flex-start;
    padding-inline:12px
  }
}
@media(min-width:1600px) {
  main {
    padding:48px 55px 0
  }
  .continue-card {
    min-height:265px
  }
  .cover {
    height:170px
  }
  .page-heading {
    margin-bottom:35px
  }
  .quick-card {
    padding:23px
  }
  .section-heading {
    margin-top:36px
  }
  .paper-stack {
    inset-inline-end:65px;
    bottom:-9px
  }
}
@media(max-width:1250px) {
  .header-caption {
    display:none
  }
  .page-heading {
    align-items:flex-start
  }
  .page-heading>.primary {
    font-size:0;
    padding:10px
  }
  .page-heading>.primary .icon {
    width:18px;
    height:18px
  }
  main {
    padding:28px 25px 0
  }
  .workspace-bar {
    padding-inline:25px
  }
  .section-heading>span {
    display:none
  }
  .paper-stack {
    inset-inline-end:10px;
    opacity:.75
  }
  .continue-copy {
    max-width:65%
  }
  .work-grid {
    gap:12px
  }
  .right-sidebar {
    padding-inline:19px
  }
  .topbar-actions {
    gap:9px
  }
  .brand {
    min-width:155px
  }
  .quick-card {
    padding:15px 12px
  }
  .quick-card small {
    font-size:9px
  }
}
@media(max-width:1099px) {
  .app-body,.right-collapsed .app-body {
    grid-template-columns:var(--left-width) 1px minmax(0,1fr) 0 0
  }
  .left-collapsed .app-body,.left-collapsed.right-collapsed .app-body {
    grid-template-columns:72px 1px minmax(0,1fr) 0 0
  }
  .right-sidebar {
    position:absolute;
    inset-inline-end:0;
    top:0;
    bottom:0;
    width:290px;
    z-index:30;
    box-shadow:var(--shadow)
  }
  .right-handle {
    display:none
  }
  .right-collapsed .right-sidebar {
    display:none
  }
  #app:not(.right-collapsed) .mobile-shade {
    display:block;
    position:absolute;
    inset:0;
    background:#17281f44;
    z-index:25;
    width:100%;
    height:100%
  }
  .prototype-badge {
    margin-inline-end:0
  }
  .sample-label {
    display:none
  }
  .page-heading>.primary {
    font-size:11px
  }
  .page-heading>.primary .icon {
    width:15px
  }
}
@media(max-width:799px) {
  .topbar {
    height:65px;
    padding:0 16px;
    gap:10px
  }
  .brand {
    min-width:0
  }
  .brand-symbol {
    width:32px;
    height:29px
  }
  .brand span {
    font-size:23px
  }
  .topbar>.header-divider,.topbar-actions>.header-divider,.prototype-badge {
    display:none
  }
  .topbar-actions {
    gap:5px
  }
  .topbar-actions>.icon-button[data-nav=search] {
    display:none
  }
  .language-button .icon {
    display:none
  }
  .language-button {
    padding:6px
  }
  .account-avatar {
    width:30px;
    height:30px
  }
  .app-body,.left-collapsed .app-body,.right-collapsed .app-body,.left-collapsed.right-collapsed .app-body {
    height:calc(100dvh - 65px);
    display:block
  }
  .center-pane {
    height:100%
  }
  .left-sidebar {
    position:absolute;
    inset-inline-start:0;
    top:0;
    bottom:0;
    width:250px;
    z-index:30;
    box-shadow:var(--shadow)
  }
  .left-collapsed .left-sidebar {
    display:none
  }
  .left-handle {
    display:none
  }
  .right-sidebar {
    width:min(300px,85vw)
  }
  .mobile-nav {
    display:inline-flex
  }
  .workspace-bar {
    height:53px;
    padding:0 15px;
    justify-content:flex-start
  }
  .workspace-bar>div {
    margin-inline-start:auto
  }
  .workspace-bar>div>[data-action=focus] {
    display:none
  }
  .breadcrumb {
    font-size:10px;
    gap:8px
  }
  #app:not(.left-collapsed) .mobile-shade {
    display:block;
    position:absolute;
    inset:0;
    background:#17281f44;
    z-index:25;
    width:100%;
    height:100%
  }
  main {
    padding:27px 20px 0
  }
  .page-heading {
    gap:10px;
    flex-wrap:wrap
  }
  h1 {
    font-size:31px
  }
  .page-heading p {
    font-size:12px
  }
  .page-heading>.primary {
    font-size:11px
  }
  .continue-card {
    padding:22px;
    min-height:230px
  }
  .continue-card h2 {
    font-size:24px
  }
  .continue-copy {
    max-width:68%
  }
  .paper-stack {
    width:130px;
    inset-inline-end:-15px;
    opacity:.6;
    bottom:-40px
  }
  .paper {
    width:145px
  }
  .quick-grid {
    gap:9px
  }
  .quick-card {
    padding:15px 10px
  }
  .quick-card strong {
    font-size:11px
  }
  .quick-card small {
    font-size:9px
  }
  .quick-arrow {
    display:none
  }
  .quick-icon {
    margin-bottom:14px
  }
  .section-heading h2 {
    font-size:20px
  }
  .section-heading .text-button {
    font-size:10px
  }
  .work-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px 13px
  }
  .work-grid .work-card:last-child:nth-child(3) {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:40% 1fr;
    column-gap:15px
  }
  .work-grid .work-card:last-child:nth-child(3) .cover {
    grid-row:1/4;
    height:120px
  }
  .work-grid .work-card:last-child:nth-child(3) .work-meta {
    margin:0
  }
  .title-link {
    font-size:18px
  }
  .author {
    font-size:9px
  }
  .workspace-footer {
    font-size:8px;
    line-height:1.7
  }
  .workspace-footer>span:first-child {
    max-width:55%
  }
  .editor-paper {
    padding:28px 22px 20px
  }
  #note-title {
    font-size:25px
  }
  #note-body {
    font-size:16px;
    min-height:420px
  }
  .editor-footer {
    font-size:9px;
    gap:15px
  }
  .people-grid {
    grid-template-columns:1fr
  }
  .collection-grid .cover {
    height:135px
  }
  .exhibit-hero {
    padding-inline:20px
  }
  .exhibit-hero h2 {
    font-size:29px
  }
  [dir=rtl] h1 {
    font-size:27px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }
}

/* Shared interface language controls and complete tool-panel dismissal. */
.language-picker { display:flex; align-items:center; gap:5px; color:var(--muted); }
.language-picker .icon { width:16px; }
.language-picker select { max-width:110px; padding:7px 3px; color:var(--text); border:0; background:transparent; font-size:12px; }
.tools-reopen { display:none; position:absolute; inset-inline-end:0; top:76px; z-index:22; width:26px; height:46px; background:var(--panel); border:1px solid var(--line); border-inline-end:0; border-radius:6px 0 0 6px; color:var(--green); }
.tools-reopen:hover { background:var(--green-soft); }
.right-collapsed .tools-reopen { display:flex; align-items:center; justify-content:center; }
.open-tools-arrow { transform:rotate(180deg); }
[dir=rtl] .open-tools-arrow { transform:none; }
[dir=rtl] .close-tools-arrow { transform:rotate(180deg); }
[dir=rtl] .tools-reopen { border-radius:0 6px 6px 0; }
.right-collapsed main { padding-inline-end:40px; }
.muted-option { color:var(--muted); }
.account-options { margin-top:22px; }
.account-options .tool-row { border-bottom:1px solid var(--line); }
[data-content] { unicode-bidi:plaintext; }
:root[lang=ar] { --sans:'Tabsira Persian',Tahoma,Arial,sans-serif; --serif:'Tabsira Persian',Tahoma,Arial,sans-serif; }
:root[lang=he] { --sans:Arial,'Helvetica Neue',sans-serif; --serif:Arial,'Helvetica Neue',sans-serif; }
.nav-label { white-space:normal; line-height:1.45; }
.eyebrow,.tiny-label,.sidebar-signature { text-transform:uppercase; }
.outline-item { text-align:start; }
@media(max-width:799px){
 .language-picker .icon {display:none;}
 .language-picker select {max-width:84px;font-size:12px;}
 .right-collapsed main {padding-inline-end:30px;}
 .tools-reopen {top:64px;width:23px;height:40px;}
}

/* Fixed footprint: theme changes must not shift header controls. */
.brand{width:177px;flex:0 0 177px;justify-content:center}
.brand .brand-art{display:block;position:relative;width:76px;height:76px;flex:none}
.brand-art img{display:block;width:100%;height:100%;object-fit:contain}
.brand-art .brand-gold{display:none}
[data-theme=dark] .brand-art{background:#F3EFE5;mask:url('/assets/tabsira-logo.png') center/contain no-repeat}
[data-theme=dark] .brand-art img{visibility:hidden}
[data-theme=dark] .brand-art .brand-gold{display:block;position:absolute;inset:0;background:#C9AA76;clip-path:inset(30% 32% 52% 50%)}
@media(max-width:799px){.brand{width:124px;flex-basis:124px}.brand .brand-art{width:61px;height:61px}}
@media(max-width:380px){.brand{width:90px;flex-basis:90px}.topbar{gap:8px}.language-picker select{max-width:75px}}

/* B2 header lockup; the stacked official artwork remains intact. */
.brand{direction:ltr;gap:0}
.brand .brand-emblem{position:relative;display:block;overflow:hidden;width:58px;height:58px;flex:0 0 58px}
.brand .brand-emblem .brand-art{position:absolute;width:83px;height:83px;left:-14px;top:-5px}
.brand .brand-word{font-family:Georgia,'Times New Roman',serif;font-size:31px;font-weight:400;line-height:1;letter-spacing:-1px;align-self:center;margin-left:-13px;transform:translateY(3px)}
[data-theme=dark] .brand-word{color:#F3EFE5}
[dir=rtl] .brand .brand-word{letter-spacing:-1px}
@media(max-width:799px){
 .brand{gap:0}
 .brand .brand-emblem{width:42px;height:42px;flex-basis:42px}
 .brand .brand-emblem .brand-art{width:60px;height:60px;left:-10px;top:-4px}
 .brand .brand-word{font-size:25px;margin-left:-9px;transform:translateY(2px)}
}
@media(max-width:380px){
 .brand .brand-emblem{width:32px;height:32px;flex-basis:32px}
 .brand .brand-emblem .brand-art{width:46px;height:46px;left:-8px;top:-3px}
 .brand .brand-word{font-size:19px;margin-left:-7px;transform:translateY(1px)}
}

/* Drag handles remain reachable through a snap transition. */
.tools-reopen,.mobile-nav{touch-action:none}
.dragging-right .tools-reopen{display:flex;align-items:center;justify-content:center;cursor:col-resize}
.dragging-right .right-handle{visibility:visible}
.resizing .sidebar{transition:none!important}
@media(min-width:1100px){
 .right-collapsed .right-handle{visibility:visible;position:absolute;inset-inline-end:0;top:0;bottom:0;width:5px;z-index:21}
}
@media(min-width:800px){
 .left-collapsed .nav-item:focus-visible{outline-offset:-3px}
}
@media(max-width:1099px){
 #app:not(.right-collapsed) .right-handle{display:block;position:absolute;inset-inline-end:290px;top:0;bottom:0;width:6px;z-index:32}
}
@media(max-width:799px){
 #app:not(.left-collapsed) .left-handle{display:block;position:absolute;inset-inline-start:250px;top:0;bottom:0;width:6px;z-index:32}
 #app:not(.right-collapsed) .right-handle{inset-inline-end:min(300px,85vw)}
}

/* Reordering belongs to each item; panel edges continue to resize. */
.workspace-bar>.mobile-workspace-controls {display:none}
.reorder-item {position:relative}
.reorder-grip {
 position:absolute;inset-inline-end:0;top:8px;width:20px;height:26px;
 display:grid;place-items:center;color:var(--muted);background:var(--surface);
 border-radius:4px;opacity:0;cursor:grab;touch-action:none;z-index:2;
 font-size:17px;transition:opacity .15s;
}
.reorder-item:hover>.reorder-grip,.reorder-item:focus-within>.reorder-grip {opacity:1}
.reorder-grip:focus-visible {opacity:1;outline:2px solid var(--green);outline-offset:1px}
.reorder-dragging {outline:1px dashed var(--muted);background:var(--green-soft)}
.reorder-dragging>.reorder-grip {opacity:1;cursor:grabbing}
.left-sidebar nav .nav-item {padding-inline-end:22px}
.left-collapsed .left-sidebar nav .nav-item {padding-inline-end:12px}
.left-collapsed .reorder-grip {inset-inline-end:-7px;width:14px}
.tools-content>.reorder-item>.reorder-grip {inset-inline-end:-17px;top:0}
@media(max-width:1099px) {.workspace-bar>.mobile-workspace-controls {display:flex}}
@media(hover:none) {.reorder-grip {opacity:.7}}