/* A quiet creative studio: useful color, a real writing sheet, and room to breathe. */
:root[data-theme="light"] {
  --bg:#f5f5f7; --bg-sidebar:#ededf0; --bg-elev:#fff; --bg-subtle:#fafafb;
  --bg-input:#fff; --bg-hover:#ececf2; --bg-active:#e7e4f4;
  --border:#e4e4ea; --border-strong:#d2d1dc; --text:#292934; --text-2:#60606c; --text-3:#747481;
  --brand:#7663b1; --brand-hover:#64519b; --brand-soft:#eeebf7;
  --radius:10px; --radius-lg:20px;
}
.app { grid-template-columns:224px minmax(0,1fr); }
.sidebar { padding:18px 12px; }
.side-head { margin-bottom:20px; }
.nav-item { min-height:36px; border-radius:10px; }
.nav-section { margin-top:20px; letter-spacing:.04em; }
.nav-item[data-collection="blog"] svg {color:#9273bb}
.nav-item[data-collection="books"] svg {color:#af8550}
.nav-item[data-collection="films"] svg {color:#6e8bac}
.nav-item[data-collection="photos"] svg {color:#6c9c87}
.nav-item[data-collection="artwork"] svg {color:#ba7894}
.nav-item[data-collection="projects"] svg {color:#b88b62}
.main { margin:14px 14px 14px 0; border-radius:22px; box-shadow:0 0 0 1px var(--border),0 12px 40px -24px #29293430; }
.topbar { min-height:58px; padding:10px 20px; background:var(--bg-subtle); }
.toolbar { min-height:46px; padding-left:20px; padding-right:20px; }
.btn { border-radius:10px; min-height:34px; }
.btn.primary { box-shadow:0 3px 8px -3px color-mix(in srgb,var(--brand) 50%,transparent); }
.demo-banner { background:var(--brand-soft); color:var(--text-2); }
.studio-welcome { padding:36px 32px 24px; }
.studio-welcome h1 { font-size:34px; letter-spacing:-.045em; }
.eyebrow { letter-spacing:.13em; font-size:10px; color:var(--text-2); }
.create-card { padding:22px; border-radius:18px; min-height:142px; background:var(--bg-elev); }
.create-card:nth-child(1) {background:color-mix(in srgb,#ccb9ea 18%,var(--bg-elev))}
.create-card:nth-child(2) {background:color-mix(in srgb,#ecd0a3 22%,var(--bg-elev))}
.create-card:nth-child(3) {background:color-mix(in srgb,#afd8c7 22%,var(--bg-elev))}
.create-card:nth-child(4) {background:color-mix(in srgb,#bdd6ee 22%,var(--bg-elev))}
.create-card svg {width:24px;height:24px;margin-bottom:8px}
.create-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px -12px #29293450; }
.collection-intro h1 {font-size:30px}
.collection-card {border-radius:16px;overflow:hidden}
.collection-card:hover {box-shadow:0 8px 24px -16px #29293460}
.collection-card-info {background:var(--bg-elev)}
.hero {border-radius:16px;background:var(--bg-elev)}
.row { min-height:52px; }
.group-head {padding-top:18px;padding-bottom:12px}
.settings-content,.piece-body {line-height:1.6}
.piece-body .dialkit-text-control {display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:14px}
.piece-body .dialkit-text-input {width:100%;text-align:left;min-height:40px;resize:vertical}
.piece-body .dialkit-text-label {align-self:flex-start}
.panel {padding:24px 20px;background:var(--bg-subtle)}
.writing-page .view {background:var(--bg)}
.writing-workspace {display:grid;grid-template-columns:minmax(0,1fr) 276px;align-items:start;min-height:100%;}
.writing-page .write {width:calc(100% - 48px);max-width:760px;margin:26px auto;min-height:calc(100vh - 220px);padding:34px 32px 100px;border-radius:24px;background:var(--writing-paper,var(--bg-elev));box-shadow:0 1px 3px #2929340a,0 0 0 1px var(--border);}
.writing-page .piece-title {font-size:26px;line-height:1.4;margin-bottom:30px;}
.writing-page #editor-slot .mantel-prose .ProseMirror {min-height:45vh;padding-bottom:80px;line-height:var(--writing-line-height,1.8)}
.writing-inspector {padding:28px 22px;position:sticky;top:0;max-height:calc(100vh - 172px);overflow:auto;border-left:1px solid var(--border);}
.inspector-heading h2 {font-size:18px;margin:7px 0 24px;letter-spacing:-.03em}
.writing-control-section {margin-bottom:24px;padding-bottom:24px;border-bottom:1px dashed var(--border-strong)}
.writing-control-section h3 {font-size:12px;margin:0 0 14px;font-weight:600}
.page-mood-preview {display:flex;gap:7px;margin-bottom:12px}
.mood-sample {display:grid;place-items:center;width:38px;height:42px;border-radius:12px;font-size:12px;color:#3f3b4a;border:1px solid #00000008}
.mood-paper {background:#fff}.mood-sky {background:#e5f1fc}.mood-mint {background:#e4f6eb}.mood-butter {background:#fff5d2}.mood-lilac {background:#eee7fb}
.writing-font-card {border-radius:18px;padding:16px;background:var(--bg-elev);margin-bottom:12px;display:flex;flex-direction:column;gap:8px;}
.writing-font-card>span {font-family:"Paper Mono",monospace;font-size:30px;font-weight:400;}
.writing-font-card strong {font-size:12px}.writing-font-card small {color:var(--text-2);font-size:10px;line-height:1.5}
.writing-control-section .mantel-config-control {margin:8px 0;}
.writing-action-grid {display:grid;grid-template-columns:repeat(4,1fr);gap:14px 6px}
.writing-action {display:flex;flex-direction:column;gap:7px;align-items:center;background:none;border:0;padding:0;color:var(--text-2);font-size:9px;cursor:pointer;}
.action-glyph {width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--bg-elev);font-size:20px;color:var(--text);transition:background .15s,transform .15s}
.writing-action:hover .action-glyph {background:var(--brand-soft);transform:translateY(-2px)}
.writing-action:focus-visible {outline:2px solid var(--brand);outline-offset:4px;border-radius:6px}
.writing-hint {font-size:11px;line-height:1.7;color:var(--text-2)}
:root[data-theme="light"][data-page-style="sky"] {--writing-paper:#f2f8ff}
:root[data-theme="light"][data-page-style="mint"] {--writing-paper:#f2faf5}
:root[data-theme="light"][data-page-style="butter"] {--writing-paper:#fffbee}
:root[data-theme="light"][data-page-style="lilac"] {--writing-paper:#f8f4ff}
:root[data-theme="dark"][data-page-style="sky"] {--writing-paper:#1a222d}
:root[data-theme="dark"][data-page-style="mint"] {--writing-paper:#192621}
:root[data-theme="dark"][data-page-style="butter"] {--writing-paper:#29261e}
:root[data-theme="dark"][data-page-style="lilac"] {--writing-paper:#242030}
@media(min-width:1101px) {body:has(.mantel-image-details:not([hidden])) .writing-inspector {display:none} body:has(.mantel-image-details:not([hidden])) .writing-workspace {grid-template-columns:1fr}}
@media(max-width:1100px) {.writing-inspector {display:none}.writing-workspace {grid-template-columns:1fr}}
@media(max-width:800px) {.app {grid-template-columns:1fr}.main {margin:8px;border-radius:18px}.sidebar {padding:16px 12px}.studio-welcome {padding:26px 20px}.studio-welcome h1 {font-size:28px}.create-card {padding:16px}.writing-page .write {width:calc(100% - 32px);padding:26px 24px}.collection-intro h1 {font-size:26px}}
@media(max-width:600px) {.topbar {padding:10px 12px;gap:8px}.toolbar {padding:4px 12px}.writing-page .write {width:calc(100% - 20px);margin:12px auto;padding:24px 18px}.writing-page .piece-title {font-size:23px}.editor-preferences .btn {font-size:11px}.writing-font-card {padding:14px}.btn,.icon-btn {min-height:36px}.create-card {min-height:120px}}
@media(prefers-reduced-motion:reduce) {.create-card:hover,.writing-action:hover .action-glyph {transform:none}.action-glyph {transition:none}}
.resume-section {padding:8px 32px 28px}
.resume-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.resume-heading h2 {font-size:16px;letter-spacing:-.02em;margin:0}
.resume-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.resume-card {display:flex;flex-direction:column;text-align:left;gap:12px;padding:20px;border:1px solid var(--border);border-radius:16px;background:var(--bg-elev);color:var(--text);cursor:pointer;transition:border-color .15s}
.resume-card:hover {border-color:var(--brand)}
.resume-type {display:flex;align-items:center;gap:7px;font-size:11px;color:var(--text-2)}
.resume-card strong {font-size:16px;line-height:1.5;overflow-wrap:anywhere}
.resume-excerpt {font-size:12px;line-height:1.6;color:var(--text-2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.resume-footer {display:flex;align-items:center;gap:6px;font-size:10px;color:var(--text-2);margin-top:auto;padding-top:6px}
.resume-footer>span:last-child {margin-left:auto}
@media(max-width:800px) {.resume-section {padding:8px 20px 24px}}
@media(max-width:600px) {.resume-grid {grid-template-columns:1fr}.resume-heading {align-items:flex-start}.resume-card {padding:16px}.resume-heading h2 {font-size:14px}}
.piece-body .dialkit-text-control {height:auto!important;min-height:100px;overflow:visible;background:var(--bg-elev);border:1px solid var(--border);border-radius:14px}
.piece-body .dialkit-text-input {height:auto!important;min-height:52px}
.mantel-config-control .dialkit-segmented-button[data-active="true"] {color:var(--brand)}
.writing-action:nth-child(2) .action-glyph {font-style:italic}
.writing-action:nth-child(3) .action-glyph {text-decoration:underline}
.app[data-collection="books"] .collection-card-visual {background:color-mix(in srgb,#e8d8b7 20%,var(--bg-subtle))}
.app[data-collection="films"] .collection-card-visual {background:color-mix(in srgb,#b4cce4 18%,var(--bg-subtle))}
.app[data-collection="blog"] .collection-card-visual {background:color-mix(in srgb,#d8c7ee 20%,var(--bg-subtle))}
@media(prefers-color-scheme:light) {
 :root:not([data-theme])[data-page-style="sky"] {--writing-paper:#f2f8ff}
 :root:not([data-theme])[data-page-style="mint"] {--writing-paper:#f2faf5}
 :root:not([data-theme])[data-page-style="butter"] {--writing-paper:#fffbee}
 :root:not([data-theme])[data-page-style="lilac"] {--writing-paper:#f8f4ff}
}
@media(prefers-color-scheme:dark) {
 :root:not([data-theme])[data-page-style="sky"] {--writing-paper:#1a222d}
 :root:not([data-theme])[data-page-style="mint"] {--writing-paper:#192621}
 :root:not([data-theme])[data-page-style="butter"] {--writing-paper:#29261e}
 :root:not([data-theme])[data-page-style="lilac"] {--writing-paper:#242030}
}