:root{--ink:#20201f;--muted:#706d67;--paper:#fffdf8;--cream:#f5efe3;--line:#ddd4c6;--brand:#e6532f;--brand-dark:#b9361c;--green:#1d7a58;--violet:#7c3aed;--amber:#d99516;--danger:#c43c32;--shadow:0 16px 45px rgba(62,45,27,.10);--shadow-soft:0 8px 24px rgba(62,45,27,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color-scheme:light}
html[data-color-scheme="dark"]{--ink:#f3efe7;--muted:#aaa49a;--paper:#1d1b18;--cream:#12110f;--line:#39342d;--shadow:0 16px 45px rgba(0,0,0,.35);color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);line-height:1.65}.nusa-pattern{position:fixed;inset:0;pointer-events:none;opacity:.35;background-image:radial-gradient(#d8c8b2 1px,transparent 1px);background-size:24px 24px}.nusa-shell,.nusa-stage{min-height:100vh;position:relative}.nusa-main{width:min(1300px,calc(100% - 40px));margin:auto;padding:42px 0 70px}.skip-link{position:fixed;left:16px;top:-80px;z-index:99;background:#111;color:#fff;padding:10px 15px;border-radius:8px}.skip-link:focus{top:16px}a{color:inherit}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}svg{width:1.05em;height:1.05em;display:inline-block;vertical-align:-.16em}
.site-header{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.header-inner{width:min(1300px,calc(100% - 40px));height:72px;margin:auto;display:flex;align-items:center;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:850;letter-spacing:-.04em}.brand img{width:38px;height:38px;border-radius:12px}.brand span{font-size:1.15rem}.top-nav{margin-left:auto;display:flex;gap:7px}.top-nav a{padding:9px 12px;text-decoration:none;border-radius:999px;font-weight:650;font-size:.92rem}.top-nav a:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)}.icon-button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:12px;width:42px;height:42px;display:grid;place-items:center;cursor:pointer}.nusa-drawer,.nusa-drawer-mask,.sidebar-collapse{display:none}
.dashboard-heading{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;padding:26px 0 28px}.breadcrumb{font-size:.84rem;color:var(--muted);display:flex;gap:8px}.breadcrumb a{text-decoration:none}.dashboard-heading h1{font-family:Georgia,serif;font-size:clamp(2.4rem,5vw,4.8rem);line-height:1.02;letter-spacing:-.055em;margin:.2em 0}.dashboard-lead{max-width:760px;font-size:1.08rem;color:var(--muted);margin:0}.heading-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.soft-badge,.live-pill,.metric-tag,.live-badge{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:750;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.live-badge i,.live-dot,.status-light{width:8px;height:8px;border-radius:50%;background:#2cab71;display:inline-block;box-shadow:0 0 0 4px rgba(44,171,113,.12)}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:10px 0 38px}.stat-card,.panel,.feature-card,.faq-grid details{background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.stat-card{padding:20px;position:relative;overflow:hidden}.stat-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--brand)}.stat-card:nth-child(2):before{background:var(--amber)}.stat-card:nth-child(3):before{background:var(--green)}.stat-card:nth-child(4):before{background:var(--violet)}.stat-top{display:flex;justify-content:space-between;align-items:center}.stat-icon{font-size:1.1rem}.stat-card p{margin:12px 0 0;color:var(--muted);font-weight:700}.stat-card strong{display:block;font:700 2.6rem/1 Georgia,serif;margin:8px 0}.stat-card small{color:var(--muted)}.sparkline{display:none}
.section-title-row{display:flex;justify-content:space-between;gap:20px;align-items:end;margin-bottom:15px}.section-kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.75rem;color:var(--brand);font-weight:850}.section-title-row h2,.content-heading h2{font-family:Georgia,serif;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.15;margin:.25em 0}.section-title-row p,.content-heading p{color:var(--muted);margin:0}.outline-button,.small-button,.toolbar-button,.text-button,.editor-statusbar button{font:inherit;cursor:pointer}.outline-button,.small-button,.toolbar-button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:9px 12px;display:inline-flex;align-items:center;gap:7px}.outline-button:hover,.small-button:hover,.toolbar-button:hover{border-color:var(--brand);transform:translateY(-1px)}.danger{color:var(--danger)}
.tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:16px;align-items:start}.panel{overflow:hidden}.gradient-border{position:relative}.gradient-border:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--brand),var(--amber),var(--green),var(--violet))}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px;border-bottom:1px solid var(--line)}.panel-header h3{margin:0 0 5px;font-size:1.05rem}.panel-header p{margin:0;color:var(--muted);font-size:.9rem}.panel-title{display:flex;align-items:center;gap:9px}.panel-title h3{margin:0}.editor-header{align-items:center}.editor-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.editor-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--paper) 78%,var(--cream))}.toolbar-group{display:flex;gap:7px}.toolbar-divider{width:1px;height:28px;background:var(--line)}.toolbar-button{font-size:.88rem}.toolbar-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.toggle-button em{font-style:normal;font-size:.64rem;color:var(--green);font-weight:800}.toggle-button[aria-pressed="false"] em{color:var(--muted)}.transform-control{margin-left:auto;display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:10px;padding:0 10px;background:var(--paper)}.transform-control select{border:0;background:transparent;color:var(--ink);padding:9px 2px;outline:0;font:inherit}.editor-body textarea{display:block;width:100%;min-height:520px;resize:vertical;border:0;outline:0;background:var(--paper);color:var(--ink);padding:24px;font:400 1rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.editor-statusbar{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:16px;padding:11px 16px;border-top:1px solid var(--line);font-size:.78rem;color:var(--muted)}.editor-statusbar span:first-child{display:flex;align-items:center;gap:8px}.editor-statusbar button{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:7px 9px}.save-status{display:flex;align-items:center;gap:6px}
.analysis-column{display:grid;gap:16px}.analysis-list>div,.writing-summary{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;border-bottom:1px solid var(--line);font-size:.9rem}.analysis-list>div:last-child{border-bottom:0}.analysis-list span{color:var(--muted)}.writing-score{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);font-weight:800}.text-button{border:0;background:none;color:var(--brand);padding:0}.issue-list{padding:14px 16px}.issue-empty{display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center}.issue-empty span{grid-column:2;color:var(--muted);font-size:.85rem}.writing-note,.target-message{padding:0 16px 16px;margin:0;color:var(--muted);font-size:.82rem}.target-field{display:grid;grid-template-columns:1fr 110px auto;gap:8px;align-items:center;padding:16px}.target-field input{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:8px;padding:8px}.target-field em{font-style:normal;color:var(--muted)}.progress-meta{display:flex;justify-content:space-between;padding:0 16px 8px;font-size:.85rem}.progress-track,.limit-track{height:8px;background:color-mix(in srgb,var(--line) 60%,transparent);border-radius:999px;overflow:hidden}.progress-track{margin:0 16px 12px}.progress-track span,.limit-track span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--brand),var(--amber));border-radius:inherit;transition:width .2s ease}
.platform-panel,.keyword-panel{margin-top:16px}.platform-header,.keyword-header{align-items:center}.platform-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:16px}.platform-card{border:1px solid var(--line);border-radius:14px;padding:15px;background:color-mix(in srgb,var(--paper) 92%,var(--cream))}.platform-card-head{display:flex;gap:10px;align-items:center}.platform-logo{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:900;background:#ece5d9}.platform-card-head strong,.platform-card-head small{display:block}.platform-card-head small{color:var(--muted)}.platform-value{display:flex;align-items:baseline;gap:3px;margin:15px 0 8px}.platform-value strong{font-size:1.7rem}.platform-card p{margin:8px 0 0;color:var(--muted);font-size:.82rem}.keyword-empty{padding:30px;text-align:center;display:grid;gap:5px;place-items:center}.keyword-empty span{color:var(--muted)}.keyword-table-wrap{overflow:auto}.keyword-table{width:100%;border-collapse:collapse}.keyword-table th,.keyword-table td{padding:12px 16px;border-top:1px solid var(--line);text-align:left}.keyword-table th{font-size:.78rem;color:var(--muted)}
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0 42px}.feature-card{padding:20px}.feature-card>span{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--brand) 12%,transparent);color:var(--brand)}.feature-card h3{margin:14px 0 6px}.feature-card p{margin:0;color:var(--muted)}.content-section{margin-top:20px}.prose-panel{padding:0}.content-heading{padding:24px;border-bottom:1px solid var(--line)}.prose{max-width:820px;margin:auto;padding:28px}.prose h2,.prose h3{line-height:1.25;margin:1.6em 0 .55em}.prose p,.prose li{color:color-mix(in srgb,var(--ink) 82%,var(--muted))}.prose a{color:var(--brand)}.faq-section{margin-top:42px}.faq-grid{display:grid;gap:10px}.faq-grid details{padding:0 18px}.faq-grid summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:15px;padding:16px 0;font-weight:700}.faq-grid summary::-webkit-details-marker{display:none}.faq-grid details p{margin:0;padding:0 0 18px;color:var(--muted)}.faq-grid details[open] summary svg{transform:rotate(90deg)}
.page-shell{max-width:920px;margin:auto}.page-hero{padding:30px 0}.page-hero h1{font-family:Georgia,serif;font-size:clamp(2.2rem,5vw,4rem);line-height:1.05;margin:.2em 0}.page-hero p{color:var(--muted)}.content-card{padding:28px;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.content-card .prose{padding:0;max-width:none}.contact-form{display:grid;gap:13px}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:11px 12px;border-radius:10px}.site-footer{background:#211f1b;color:#f5efe3;margin-top:40px}.footer-inner{width:min(1300px,calc(100% - 40px));margin:auto;padding:34px 0;display:flex;justify-content:space-between;gap:28px}.footer-links{display:flex;gap:16px;flex-wrap:wrap}.footer-links a{color:#e9dfcf}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;background:#171512;color:#fff;border-radius:999px;padding:10px 16px;z-index:100;transition:.2s;pointer-events:none}.toast.is-visible{opacity:1;transform:translate(-50%,0)}
.focus-mode .nusa-main{width:min(1500px,calc(100% - 30px))}.focus-mode .dashboard-heading,.focus-mode .stat-grid,.focus-mode .content-section,.focus-mode .faq-section,.focus-mode .feature-grid,.focus-mode .site-footer{display:none}.focus-mode .tool-layout{grid-template-columns:minmax(0,1fr) 360px}.focus-mode .tool-section>.section-title-row{margin-top:12px}
@media(max-width:980px){.tool-layout{grid-template-columns:1fr}.analysis-column{grid-template-columns:repeat(3,1fr)}.stat-grid{grid-template-columns:repeat(2,1fr)}.dashboard-heading{grid-template-columns:1fr}.heading-badges{justify-content:flex-start}.platform-grid{grid-template-columns:1fr}.feature-grid{grid-template-columns:1fr}.editor-statusbar{grid-template-columns:1fr 1fr}.focus-mode .tool-layout{grid-template-columns:1fr}}
@media(max-width:760px){.top-nav{display:none}.analysis-column{grid-template-columns:1fr}.editor-header,.panel-header,.section-title-row,.footer-inner{display:block}.editor-actions{margin-top:14px;justify-content:flex-start}.outline-button{margin-top:12px}.toolbar-divider{display:none}.transform-control{margin-left:0;width:100%}.transform-control select{width:100%}.editor-statusbar{grid-template-columns:1fr}.footer-links{margin-top:14px}}
@media(max-width:520px){.nusa-main,.header-inner,.footer-inner{width:min(100% - 24px,1300px)}.nusa-main{padding-top:20px}.dashboard-heading h1{font-size:2.7rem}.stat-grid{grid-template-columns:1fr 1fr}.stat-card{padding:16px}.stat-card strong{font-size:2rem}.heading-badges{display:none}.editor-body textarea{min-height:390px;padding:18px}.small-button span{display:none}.toolbar-group{flex-wrap:wrap}.platform-grid{padding:12px}.prose{padding:20px}.content-card{padding:20px}}


/* Enhanced Indonesian spelling assistant */
.editor-highlight-wrap{position:relative;min-height:520px;overflow:hidden;background:var(--paper)}
.editor-highlight,.editor-highlight-wrap #nusaText{box-sizing:border-box;width:100%;min-height:520px;margin:0;padding:24px;border:0;font:400 1rem/1.75 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:normal;white-space:pre-wrap;overflow-wrap:break-word;word-break:normal;tab-size:4}
.editor-highlight{position:absolute;inset:0;z-index:1;overflow:auto;pointer-events:none;color:var(--ink);background:var(--paper);scrollbar-width:none}
.editor-highlight::-webkit-scrollbar{display:none}
.editor-highlight-wrap #nusaText{position:relative;z-index:2;display:block;resize:vertical;outline:0;background:transparent;color:var(--ink);caret-color:var(--ink)}
.editor-highlight-wrap.is-highlight-ready #nusaText{color:transparent}
.editor-highlight-wrap.is-highlight-ready #nusaText::selection{color:transparent;background:color-mix(in srgb,var(--brand) 24%,transparent)}
.editor-highlight-wrap #nusaText::placeholder{color:var(--muted);opacity:.82}
.editor-highlight mark.spelling-error{color:inherit;background:transparent;text-decoration-line:underline;text-decoration-style:wavy;text-decoration-color:#dc2626;text-decoration-thickness:1.5px;text-underline-offset:3px}
.issue-item{padding:14px 0;border-bottom:1px solid var(--line)}
.issue-item:last-child{border-bottom:0}
.issue-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.issue-top>div{min-width:0}
.issue-top strong{display:block;font-size:.91rem;line-height:1.4}
.issue-top p{margin:4px 0 0;color:var(--muted);font-size:.82rem;line-height:1.5}
.issue-badge{flex:0 0 auto;border:1px solid var(--line);border-radius:999px;padding:4px 7px;font-size:.66rem;font-weight:750;color:var(--muted);background:color-mix(in srgb,var(--paper) 86%,var(--cream))}
.issue-high .issue-badge{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 30%,var(--line))}
.issue-item code{display:block;margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--paper) 70%,var(--cream));color:var(--ink);font-size:.76rem;white-space:pre-wrap;overflow-wrap:anywhere}
.issue-fix,.spelling-suggestion,.spelling-add-word{font:inherit;cursor:pointer}
.issue-fix{margin-top:10px;border:1px solid var(--brand);border-radius:8px;background:color-mix(in srgb,var(--brand) 9%,var(--paper));color:var(--brand);padding:7px 10px;font-size:.78rem;font-weight:750}
.spelling-actions{display:grid;gap:9px;margin-top:11px}
.spelling-label{font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:800}
.spelling-suggestions{display:flex;flex-wrap:wrap;gap:7px}
.spelling-suggestion{appearance:none;border:1px solid var(--line);border-radius:8px;background:var(--paper);padding:7px 10px;color:var(--ink);font-size:.8rem}
.spelling-suggestion:hover,.spelling-suggestion:focus-visible{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--paper));outline:0}
.spelling-suggestion:first-child{border-color:color-mix(in srgb,var(--brand) 55%,var(--line));background:color-mix(in srgb,var(--brand) 10%,var(--paper));font-weight:800}
.spelling-add-word{justify-self:start;border:0;background:transparent;padding:2px 0;color:var(--muted);font-size:.76rem;text-decoration:underline;text-underline-offset:3px}
.spelling-add-word:hover,.spelling-add-word:focus-visible{color:var(--brand);outline:0}
.issue-more{color:var(--muted);font-size:.8rem;line-height:1.5}
@media(max-width:520px){.editor-highlight-wrap,.editor-highlight,.editor-highlight-wrap #nusaText{min-height:390px}.editor-highlight,.editor-highlight-wrap #nusaText{padding:18px}.issue-top{display:block}.issue-badge{display:inline-flex;margin-top:8px}}

/* =========================================================
   Writing assistant UI refinement
   ========================================================= */
.writing-panel {
  overflow: hidden;
}

.writing-header {
  align-items: center;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand) 5%, var(--paper)),
      var(--paper) 58%
    );
}

.writing-score {
  min-width: 48px;
  height: 48px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--green) 35%, var(--line));
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--green) 8%, var(--paper));
  color: var(--green);
  font-size: 1rem;
  font-weight: 850;
  box-shadow: 0 6px 18px rgba(29, 122, 88, .08);
}

.writing-score.is-warning {
  border-color: color-mix(in srgb, var(--amber) 45%, var(--line));
  background: color-mix(in srgb, var(--amber) 10%, var(--paper));
  color: #9a6200;
}

.writing-score.is-low {
  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
  background: color-mix(in srgb, var(--danger) 9%, var(--paper));
  color: var(--danger);
}

.writing-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 84%, var(--cream));
}

.issue-count-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
  color: var(--muted);
  font-size: .8rem;
}

.issue-count-summary strong {
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
}

.issue-count-summary span {
  white-space: nowrap;
}

.writing-summary .text-button {
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--brand);
  padding: 7px 9px;
  font-size: .76rem;
  font-weight: 750;
  line-height: 1.35;
  text-align: right;
}

.writing-summary .text-button:hover,
.writing-summary .text-button:focus-visible {
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  outline: none;
}

.issue-list {
  padding: 0 16px;
}

.issue-item {
  position: relative;
  margin: 12px 0;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--paper) 96%, var(--cream));
  box-shadow: 0 7px 20px rgba(62, 45, 27, .055);
}

.issue-item:last-child {
  border-bottom: 1px solid var(--line);
}

.issue-item::before {
  content: "";
  position: absolute;
  top: 13px;
  bottom: 13px;
  left: 0;
  width: 3px;
  border-radius: 0 999px 999px 0;
  background: var(--line);
}

.issue-item.issue-high::before {
  background: var(--danger);
}

.issue-item.issue-medium::before {
  background: var(--amber);
}

.issue-item.issue-low::before {
  background: var(--green);
}

.issue-top {
  gap: 14px;
}

.issue-top > div {
  flex: 1;
}

.issue-top strong {
  font-size: .92rem;
  letter-spacing: -.01em;
}

.issue-top p {
  margin-top: 5px;
  font-size: .8rem;
}

.issue-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--danger) 7%, var(--paper));
  color: var(--danger);
  font-size: .67rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.issue-medium .issue-badge {
  border-color: color-mix(in srgb, var(--amber) 35%, var(--line));
  background: color-mix(in srgb, var(--amber) 8%, var(--paper));
  color: #9a6200;
}

.issue-low .issue-badge {
  border-color: color-mix(in srgb, var(--green) 35%, var(--line));
  background: color-mix(in srgb, var(--green) 8%, var(--paper));
  color: var(--green);
}

.issue-context {
  margin-top: 12px;
}

.issue-context > span,
.spelling-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: .64rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.issue-context code {
  display: block;
  margin: 0;
  padding: 9px 11px;
  border: 1px solid color-mix(in srgb, var(--line) 85%, transparent);
  border-radius: 9px;
  background: color-mix(in srgb, var(--cream) 55%, var(--paper));
  color: var(--ink);
  font-size: .75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.spelling-actions {
  gap: 10px;
  margin-top: 13px;
}

.spelling-suggestions {
  gap: 8px;
}

.spelling-suggestion {
  min-height: 34px;
  border-radius: 9px;
  padding: 7px 11px;
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.spelling-suggestion:hover,
.spelling-suggestion:focus-visible {
  transform: translateY(-1px);
}

.spelling-suggestion:first-child {
  border-color: color-mix(in srgb, var(--brand) 62%, var(--line));
  background: color-mix(in srgb, var(--brand) 11%, var(--paper));
  color: var(--brand-dark);
  box-shadow: 0 5px 14px rgba(230, 83, 47, .08);
}

.spelling-add-word {
  justify-self: stretch;
  width: 100%;
  min-height: 34px;
  border: 1px dashed color-mix(in srgb, var(--violet) 42%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--violet) 5%, var(--paper));
  padding: 7px 10px;
  color: var(--violet);
  font-size: .75rem;
  font-weight: 720;
  text-align: center;
  text-decoration: none;
  transition:
    border-color .18s ease,
    background .18s ease,
    transform .18s ease;
}

.spelling-add-word:hover,
.spelling-add-word:focus-visible {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 10%, var(--paper));
  color: var(--violet);
  transform: translateY(-1px);
}

.issue-empty {
  margin: 14px 0;
  padding: 18px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--green) 4%, var(--paper));
}

.writing-note {
  margin: 0;
  padding: 14px 16px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .73rem;
  line-height: 1.55;
}

.editor-highlight mark.spelling-error {
  border-radius: 2px;
  background:
    linear-gradient(
      to bottom,
      transparent 72%,
      color-mix(in srgb, var(--danger) 12%, transparent) 72%
    );
  text-decoration-thickness: 1.6px;
  text-underline-offset: 3px;
}

@media (max-width: 520px) {
  .writing-summary {
    align-items: flex-start;
  }

  .issue-count-summary {
    padding-top: 5px;
  }

  .writing-summary .text-button {
    max-width: 150px;
  }

  .issue-item {
    padding: 14px 13px;
  }

  .issue-badge {
    display: inline-flex;
    margin-top: 8px;
  }

  .spelling-suggestion {
    flex: 1 1 auto;
  }
}



/* Personal dictionary manager */
.writing-tools {
  padding: 14px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 88%, var(--cream));
}

.dictionary-manage-button {
  width: 100%;
  min-height: 36px;
  border: 1px solid color-mix(in srgb, var(--violet) 35%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--violet) 6%, var(--paper));
  color: var(--violet);
  font: inherit;
  font-size: .76rem;
  font-weight: 760;
  cursor: pointer;
}

.dictionary-manage-button:hover,
.dictionary-manage-button:focus-visible {
  border-color: var(--violet);
  background: color-mix(in srgb, var(--violet) 11%, var(--paper));
  outline: none;
}

.dialog-open { overflow: hidden; }

.dictionary-dialog,
.confirm-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
}

.dictionary-dialog[hidden],
.confirm-dialog[hidden] { display: none; }

.dictionary-dialog__backdrop,
.confirm-dialog__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 18, 16, .52);
  backdrop-filter: blur(4px);
}

.dictionary-dialog__panel,
.confirm-dialog__panel {
  position: relative;
  z-index: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 24px 70px rgba(25, 20, 15, .26);
}

.dictionary-dialog__panel {
  width: min(560px, calc(100vw - 28px));
  max-height: min(720px, calc(100vh - 40px));
  margin: 20px auto;
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dictionary-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 20px 17px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--violet) 8%, var(--paper)), var(--paper) 62%);
}

.dictionary-dialog__eyebrow {
  display: block;
  margin-bottom: 5px;
  color: var(--violet);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.dictionary-dialog__header h2 { margin: 0; font-size: 1.2rem; }
.dictionary-dialog__header p { margin: 7px 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; }

.dictionary-dialog__close {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.dictionary-dialog__body {
  min-height: 220px;
  overflow: auto;
  padding: 18px 20px;
}

.dictionary-dialog__summary {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-bottom: 14px;
  color: var(--muted);
  font-size: .8rem;
}

.dictionary-dialog__summary strong { color: var(--ink); font-size: 1.15rem; }

.dictionary-dialog__empty {
  padding: 30px 18px;
  border: 1px dashed var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--cream) 60%, var(--paper));
  text-align: center;
}

.dictionary-dialog__empty strong,
.dictionary-dialog__empty span { display: block; }

.dictionary-dialog__empty span { margin-top: 6px; color: var(--muted); font-size: .8rem; }

.dictionary-word-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dictionary-word-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 11px 10px 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
}

.dictionary-word-item > span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: .85rem;
  font-weight: 680;
}

.dictionary-remove-word {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--danger) 5%, var(--paper));
  padding: 6px 9px;
  color: var(--danger);
  font: inherit;
  font-size: .72rem;
  font-weight: 730;
  cursor: pointer;
}

.dictionary-dialog__footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--cream) 50%, var(--paper));
}

.dictionary-clear-button,
.dictionary-done-button,
.confirm-cancel,
.confirm-accept {
  min-height: 38px;
  border-radius: 10px;
  padding: 8px 13px;
  font: inherit;
  font-size: .78rem;
  font-weight: 780;
  cursor: pointer;
}

.dictionary-clear-button {
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line));
  background: transparent;
  color: var(--danger);
}

.dictionary-clear-button:disabled { opacity: .45; cursor: not-allowed; }

.dictionary-done-button,
.confirm-accept {
  border: 1px solid var(--violet);
  background: var(--violet);
  color: white;
}

.confirm-dialog__panel {
  width: min(430px, calc(100vw - 28px));
  margin: min(22vh, 160px) auto 0;
  padding: 22px;
  border-radius: 16px;
}

.confirm-dialog__panel h2 { margin: 0; font-size: 1.12rem; }
.confirm-dialog__panel p { margin: 10px 0 0; color: var(--muted); font-size: .84rem; line-height: 1.6; }

.confirm-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.confirm-cancel {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 520px) {
  .dictionary-dialog__panel {
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
    border-radius: 14px;
  }

  .dictionary-dialog__header,
  .dictionary-dialog__body,
  .dictionary-dialog__footer {
    padding-left: 15px;
    padding-right: 15px;
  }

  .dictionary-dialog__footer { flex-direction: column-reverse; }

  .dictionary-clear-button,
  .dictionary-done-button { width: 100%; }
}

/* =========================================================
   Editor toolbar — clean responsive layout
   ========================================================= */

/* The editor panel becomes the sizing context, so the toolbar responds
   to the real editor width instead of the full browser width. */
.tool-layout > .panel:first-child {
  container-type: inline-size;
  container-name: editor-panel;
}

.editor-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "history toggles transform";
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 82%, var(--cream));
}

.editor-toolbar > .toolbar-group:first-child {
  grid-area: history;
}

.editor-toolbar > .toolbar-toggles {
  grid-area: toggles;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.editor-toolbar > .transform-control {
  grid-area: transform;
}

.editor-toolbar > .toolbar-divider {
  display: none;
}

.editor-toolbar .toolbar-group {
  display: flex;
  align-items: center;
  gap: 7px;
}

.editor-toolbar .toolbar-button {
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  color: var(--ink);
  font-size: .78rem;
  line-height: 1.2;
  white-space: nowrap;
  box-shadow: 0 2px 7px rgba(47, 38, 28, .025);
}

.editor-toolbar .toolbar-button:hover:not(:disabled),
.editor-toolbar .toolbar-button:focus-visible {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, var(--paper));
  transform: translateY(-1px);
  outline: none;
}

.editor-toolbar .toolbar-button:disabled {
  opacity: .46;
  cursor: not-allowed;
  transform: none;
}

.editor-toolbar .toggle-button {
  width: 100%;
  min-width: 0;
  justify-content: center;
  overflow: hidden;
}

.editor-toolbar .toggle-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-toolbar .toggle-button em {
  flex: 0 0 auto;
  margin-left: 2px;
  font-size: .61rem;
}

.editor-toolbar .toolbar-button svg,
.editor-toolbar .transform-control svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
}

.editor-toolbar .transform-control {
  min-width: 164px;
  height: 38px;
  margin-left: 0;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--paper);
  box-shadow: 0 2px 7px rgba(47, 38, 28, .025);
}

.editor-toolbar .transform-control:focus-within {
  border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 10%, transparent);
}

.editor-toolbar .transform-control select {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  padding: 8px 22px 8px 0;
  font: inherit;
  font-size: .78rem;
  cursor: pointer;
}

/* Common desktop/laptop editor width:
   first row = Undo/Redo + format selector
   second row = three feature toggles */
@container editor-panel (max-width: 860px) {
  .editor-toolbar {
    grid-template-columns: auto minmax(164px, 190px);
    grid-template-areas:
      "history transform"
      "toggles toggles";
    row-gap: 9px;
  }

  .editor-toolbar > .toolbar-group:first-child {
    justify-self: start;
  }

  .editor-toolbar > .transform-control {
    width: 100%;
    min-width: 0;
    max-width: 190px;
    justify-self: end;
  }

  .editor-toolbar > .toolbar-toggles {
    width: 100%;
  }

  .editor-toolbar .toggle-button {
    min-height: 38px;
  }
}

/* Narrow editor/mobile: every control gets enough room and no text is cut. */
@container editor-panel (max-width: 560px) {
  .editor-toolbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "history"
      "toggles"
      "transform";
    gap: 9px;
    padding: 11px 12px;
  }

  .editor-toolbar > .toolbar-group:first-child,
  .editor-toolbar > .toolbar-toggles,
  .editor-toolbar > .transform-control {
    width: 100%;
    max-width: none;
  }

  .editor-toolbar > .toolbar-group:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .editor-toolbar > .toolbar-toggles {
    grid-template-columns: 1fr;
  }

  .editor-toolbar > .transform-control {
    justify-self: stretch;
  }

  .editor-toolbar .toolbar-button {
    justify-content: center;
  }

  .editor-toolbar .toggle-button span {
    overflow: visible;
    text-overflow: clip;
  }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
  @media (min-width: 761px) and (max-width: 1280px) {
    .editor-toolbar {
      grid-template-columns: auto minmax(164px, 190px);
      grid-template-areas:
        "history transform"
        "toggles toggles";
    }
  }
}

/* Keep the original mobile layout predictable. */
@media (max-width: 760px) {
  .editor-toolbar {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "history"
      "toggles"
      "transform";
    gap: 9px;
    padding: 11px 12px;
  }

  .editor-toolbar > .toolbar-group:first-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .editor-toolbar > .toolbar-toggles {
    display: grid;
    grid-template-columns: 1fr;
  }

  .editor-toolbar > .transform-control {
    width: 100%;
    min-width: 0;
    max-width: none;
  }

  .editor-toolbar .toolbar-button {
    justify-content: center;
  }
}

/* =========================================================
   Editor header actions — desktop alignment fix
   ========================================================= */
@media (min-width: 761px) {
  .editor-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 16px 18px 18px;
  }

  .editor-header > div:first-child {
    min-width: 0;
  }

  .editor-header .panel-title {
    margin-bottom: 4px;
  }

  .editor-header p {
    max-width: 460px;
    line-height: 1.55;
  }

  .editor-actions {
    display: grid;
    grid-template-columns: repeat(4, auto);
    align-items: center;
    justify-content: end;
    gap: 7px;
    margin: 0;
  }

  .editor-actions .small-button {
    min-height: 40px;
    margin: 0;
    padding: 8px 11px;
    border-radius: 10px;
    justify-content: center;
    white-space: nowrap;
    font-size: .82rem;
    line-height: 1.15;
  }

  .editor-actions .small-button svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
  }
}

/* Normal laptop widths: keep all four actions on one row,
   but tighten them slightly so the header stays balanced. */
@media (min-width: 761px) and (max-width: 1180px) {
  .editor-header {
    gap: 12px;
    padding-left: 15px;
    padding-right: 12px;
  }

  .editor-header p {
    max-width: 390px;
    font-size: .84rem;
  }

  .editor-actions {
    gap: 6px;
  }

  .editor-actions .small-button {
    min-height: 38px;
    padding: 7px 9px;
    font-size: .76rem;
  }
}

/* Only when the editor panel itself becomes too narrow,
   use a deliberate 2 × 2 grid instead of one stray button. */
@media (min-width: 761px) and (max-width: 900px) {
  .editor-header {
    grid-template-columns: minmax(0, 1fr) 188px;
    align-items: start;
  }

  .editor-actions {
    width: 188px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-actions .small-button {
    width: 100%;
    min-width: 0;
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* Mobile keeps a clean full-width grid. */
@media (max-width: 760px) {
  .editor-header {
    display: block;
  }

  .editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
  }

  .editor-actions .small-button {
    width: 100%;
    min-height: 40px;
    margin: 0;
    justify-content: center;
  }
}

/* =========================================================
   Static pages: About, Privacy, Terms, Contact
   ========================================================= */
.document-stage{max-width:1120px;margin:0 auto;padding:8px 0 20px}
.document-heading{max-width:820px;padding:22px 0 24px}
.document-heading .breadcrumb{margin:0 0 14px;align-items:center}
.document-heading h1{margin:8px 0 12px;font-family:Georgia,serif;font-size:clamp(2.25rem,4.8vw,4.1rem);line-height:1.04;letter-spacing:-.045em}
.document-intro{max-width:760px;color:var(--muted);font-size:1.04rem;line-height:1.75}
.document-intro p{margin:0}
.document-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start}
.document-card{min-width:0;overflow:hidden}
.document-content{max-width:none;margin:0;padding:34px 38px 40px}
.document-content>:first-child{margin-top:0}
.document-content>:last-child{margin-bottom:0}
.document-content h2{margin:1.65em 0 .55em;font-size:1.55rem;letter-spacing:-.025em}
.document-content h3{margin:1.4em 0 .45em;font-size:1.15rem}
.document-content p,.document-content li{font-size:.98rem;line-height:1.8}
.document-content ul,.document-content ol{padding-left:1.35rem}
.document-sidebar{position:sticky;top:92px;display:grid;gap:14px}
.side-note,.side-links{padding:20px;box-shadow:var(--shadow-soft)}
.side-note-icon{width:40px;height:40px;display:grid;place-items:center;margin-bottom:13px;border-radius:12px;background:color-mix(in srgb,var(--violet) 10%,var(--paper));color:var(--violet)}
.side-note h2,.side-links h2{margin:0 0 9px;font-size:1rem}
.side-note p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.65}
.side-note-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--brand);font-size:.82rem;font-weight:750;text-decoration:none}
.side-links{padding:12px}
.side-links h2{padding:5px 7px 10px}
.side-links a{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:10px;text-decoration:none}
.side-links a:hover{background:color-mix(in srgb,var(--brand) 7%,transparent)}
.side-links>a>svg{flex:0 0 auto;color:var(--brand)}
.side-links span,.side-links strong,.side-links small{display:block;min-width:0}
.side-links strong{font-size:.84rem}
.side-links small{margin-top:1px;color:var(--muted);font-size:.7rem;line-height:1.4}
.page-faq{margin-top:32px}

/* Contact form */
.contact-panel{margin-top:8px;padding:30px 38px 38px;border-top:1px solid var(--line);background:color-mix(in srgb,var(--paper) 90%,var(--cream))}
.contact-form-heading{margin-bottom:22px}
.contact-form-heading h2{margin:5px 0 7px;font-size:1.45rem}
.contact-form-heading p{margin:0;color:var(--muted)}
.contact-form{display:grid;gap:16px}
.contact-form label{display:grid;gap:7px;color:var(--ink);font-size:.82rem;font-weight:720}
.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--paper);color:var(--ink);padding:11px 12px;font:inherit;line-height:1.5;transition:border-color .18s ease,box-shadow .18s ease}
.contact-form input:focus,.contact-form textarea:focus{border-color:color-mix(in srgb,var(--brand) 65%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent);outline:0}
.contact-form textarea{min-height:170px;resize:vertical}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.form-actions small{max-width:520px;color:var(--muted);font-size:.72rem;font-weight:500;line-height:1.5}
.primary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border:1px solid var(--brand);border-radius:10px;background:var(--brand);color:#fff;padding:9px 15px;font:inherit;font-weight:780;cursor:pointer}
.primary-button:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.form-notice{margin-bottom:18px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:.84rem}
.form-notice.is-ok{border-color:color-mix(in srgb,var(--green) 40%,var(--line));background:color-mix(in srgb,var(--green) 7%,var(--paper));color:var(--green)}
.form-notice.is-error{border-color:color-mix(in srgb,var(--danger) 40%,var(--line));background:color-mix(in srgb,var(--danger) 7%,var(--paper));color:var(--danger)}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important}

@media(max-width:980px){
  .document-layout{grid-template-columns:1fr}
  .document-sidebar{position:static;grid-template-columns:1fr 1fr}
  .document-layout.is-contact .document-sidebar{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .document-heading{padding-top:12px}
  .document-heading h1{font-size:2.4rem}
  .document-content{padding:25px 21px 30px}
  .contact-panel{padding:25px 21px 28px}
  .document-sidebar,.document-layout.is-contact .document-sidebar{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .form-actions{align-items:flex-start;flex-direction:column}
  .primary-button{width:100%}
}


/* =========================================================
   Mobile navigation drawer
   ========================================================= */
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.mobile-menu-button{display:none}

@media(max-width:760px){
  .header-inner{height:72px;gap:12px}
  .brand{min-width:0;gap:10px}
  .brand img{width:36px;height:36px}
  .brand span{font-size:1.05rem;white-space:nowrap}
  .header-actions{margin-left:auto;gap:7px}
  .mobile-menu-button{display:grid}
  .icon-button{width:40px;height:40px;border-radius:11px}

  .nusa-drawer{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:90;
    display:flex;
    width:min(330px,86vw);
    flex-direction:column;
    background:var(--paper);
    border-left:1px solid var(--line);
    box-shadow:-22px 0 55px rgba(28,22,16,.18);
    transform:translateX(105%);
    visibility:hidden;
    transition:transform .24s ease,visibility .24s ease;
  }

  .mobile-nav-open .nusa-drawer{
    transform:translateX(0);
    visibility:visible;
  }

  .nusa-drawer-mask{
    position:fixed;
    inset:0;
    z-index:80;
    display:block;
    background:rgba(24,20,16,.46);
    opacity:0;
    visibility:hidden;
    backdrop-filter:blur(3px);
    transition:opacity .2s ease,visibility .2s ease;
  }

  .mobile-nav-open .nusa-drawer-mask{
    opacity:1;
    visibility:visible;
  }

  .mobile-nav-open{overflow:hidden}

  .nusa-drawer-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-height:72px;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
  }

  .drawer-brand{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--ink);
    font-weight:850;
    text-decoration:none;
  }

  .drawer-brand img{width:34px;height:34px;border-radius:10px}
  .drawer-brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  .drawer-close{
    flex:0 0 auto;
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border:1px solid var(--line);
    border-radius:11px;
    background:var(--paper);
    color:var(--ink);
    font:400 1.6rem/1 sans-serif;
    cursor:pointer;
  }

  .drawer-nav{
    display:grid;
    gap:5px;
    padding:14px;
    overflow-y:auto;
  }

  .drawer-nav a{
    display:flex;
    align-items:center;
    gap:12px;
    min-height:48px;
    padding:11px 13px;
    border:1px solid transparent;
    border-radius:12px;
    color:var(--ink);
    font-size:.94rem;
    font-weight:700;
    text-decoration:none;
  }

  .drawer-nav a svg{width:19px;height:19px;color:var(--muted)}
  .drawer-nav a:hover,.drawer-nav a:focus-visible{
    border-color:color-mix(in srgb,var(--violet) 28%,var(--line));
    background:color-mix(in srgb,var(--violet) 7%,var(--paper));
    outline:none;
  }
  .drawer-nav a:hover svg,.drawer-nav a:focus-visible svg{color:var(--violet)}
}

@media(max-width:380px){
  .brand span{max-width:165px;overflow:hidden;text-overflow:ellipsis}
  .header-inner{width:calc(100% - 20px)}
  .icon-button{width:38px;height:38px}
}