:root { color-scheme: light dark; --paper:#f8f6ef; --ink:#182d27; --muted:#52615a; --rule:#c7cec1; --wash:#e8ece2; --accent:#34664e; --radius:.5rem; }
@media(prefers-color-scheme:dark) { :root { --paper:#18221e; --ink:#f3efe1; --muted:#bdc8bc; --rule:#47594b; --wash:#25352c; --accent:#abd4ad; } }
* { box-sizing:border-box; } [hidden] { display:none!important; }
body { margin:0; font:15px/1.7 system-ui,sans-serif; color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; }
.editor-header, main { max-width:1320px; margin:auto; padding:1.3rem 4vw; }
.editor-header { display:flex; align-items:center; gap:1rem; border-bottom:1px solid var(--rule); }
.editor-brand { display:flex; align-items:center; gap:.7rem; margin-right:auto; font:1.3rem Georgia,serif; text-decoration:none; letter-spacing:-.04em; }
.editor-brand span { display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:var(--ink); color:var(--paper); font-size:.8rem; letter-spacing:-.1em; }
a { color:inherit; text-underline-offset:.25em; } h1,h2,h3 { font-family:Georgia,serif; font-weight:400; line-height:1.2; letter-spacing:-.03em; text-wrap:balance; }
h1 { font-size:clamp(2.4rem,4.5vw,4rem); margin:.2em 0; } h2 { font-size:clamp(1.8rem,3vw,2.4rem); margin:.25rem 0 1rem; } h3 { font-size:1.4rem; margin:0 0 .6rem; } p { margin:.5rem 0 1rem; } button,input,textarea,select { font:inherit; }
button,.button { display:inline-flex; justify-content:center; align-items:center; gap:.5rem; background:var(--ink); color:var(--paper); border:1px solid var(--ink); border-radius:var(--radius); padding:.65rem 1rem; cursor:pointer; text-decoration:none; transition:background 180ms,transform 180ms,border-color 180ms; }
button:hover,.button:hover { transform:translateY(-1px); background:var(--accent); color:var(--paper); } button:disabled { opacity:.5; cursor:default; transform:none; }
.quiet,.toolbar button { background:transparent; color:var(--ink); border-color:var(--rule); } .quiet:hover,.toolbar button:hover { background:var(--wash); color:var(--ink); border-color:var(--accent); }
.text-button { background:transparent; border-color:transparent; color:var(--accent); padding-inline:.25rem; } .text-button:hover { background:transparent; color:var(--ink); }
input,textarea,select { display:block; width:100%; padding:.65rem .8rem; margin:.4rem 0 1.1rem; background:var(--paper); color:var(--ink); border:1px solid var(--rule); border-radius:.3rem; }
input:focus,textarea:focus,select:focus { outline:2px solid var(--accent); outline-offset:2px; } textarea { resize:vertical; } #body { font:.88rem/1.75 ui-monospace,monospace; }
label { display:block; font-size:.85rem; font-weight:550; } :focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.eyebrow,.private-label { text-transform:uppercase; letter-spacing:.1em; font-size:.68rem; color:var(--accent); font-weight:650; } .private-label { border:1px solid var(--rule); border-radius:99px; padding:.25rem .65rem; white-space:nowrap; }
.hint,.file-path { color:var(--muted); font-size:.8rem; line-height:1.6; } .hint { margin:.4rem 0 1rem; } .file-path { overflow-wrap:anywhere; font-family:ui-monospace,monospace; }
#login { max-width:700px; padding-block:clamp(3rem,8vw,7rem); } #login>p:not(.eyebrow) { max-width:48ch; margin:1.5rem 0; color:var(--muted); }
.workspace-heading { display:flex; justify-content:space-between; gap:2rem; align-items:center; padding-top:2rem; } .workspace-heading p { max-width:65ch; color:var(--muted); } .text-link { white-space:nowrap; font-size:.85rem; }
.studio-tabs { display:flex; gap:.5rem; border-bottom:1px solid var(--rule); margin:2rem 0; padding-bottom:.8rem; } .studio-tabs button { background:transparent; border-color:transparent; color:var(--muted); } .studio-tabs button[aria-pressed=true] { color:var(--ink); background:var(--wash); }
.editor-grid { display:grid; grid-template-columns:minmax(190px,1fr) 3fr; gap:3rem; align-items:start; } aside { position:sticky; top:1rem; border-right:1px solid var(--rule); padding-right:1.5rem; }
#file-list { max-height:65vh; overflow:auto; scrollbar-width:thin; } #file-list h3 { font:650 .65rem system-ui,sans-serif; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin:1.4rem 0 .6rem; } #file-list button { display:block; text-align:left; width:100%; background:transparent; color:var(--ink); font-size:.8rem; line-height:1.5; padding:.65rem .75rem; border:0; margin-bottom:.2rem; } #file-list button:hover,#file-list button[aria-current] { background:var(--wash); transform:none; }
.empty-state { border:1px dashed var(--rule); border-radius:var(--radius); padding:clamp(2rem,5vw,4rem); text-align:center; color:var(--muted); } .empty-state h2 { color:var(--ink); } .empty-mark { font:3rem Georgia,serif; color:var(--accent); } .empty-state p { max-width:40ch; margin:1rem auto 1.5rem; }
.editing-heading,.section-title { display:flex; justify-content:space-between; align-items:baseline; gap:1rem; } .editing-heading h2 { margin-bottom:0; } .save-state,.badge { font-size:.7rem; border:1px solid var(--rule); border-radius:99px; padding:.2rem .6rem; white-space:nowrap; color:var(--muted); } .save-state.dirty { color:var(--ink); background:var(--wash); }
.editor-section { border-top:1px solid var(--rule); padding-block:1.6rem; } .field-grid { display:grid; grid-template-columns:1fr 1fr; column-gap:1rem; } .field-grid label.wide { grid-column:1/-1; } .section-label { font:1.4rem Georgia,serif; }
.toolbar { display:flex; gap:.4rem; flex-wrap:wrap; } .toolbar button { font-size:.75rem; padding:.3rem .7rem; }
.drop-zone { border:1px dashed var(--rule); border-radius:var(--radius); padding:1.5rem; background:color-mix(in srgb,var(--wash) 45%,var(--paper)); text-align:center; transition:border-color 180ms,background 180ms; } .drop-zone.drag-over { border:2px solid var(--accent); background:var(--wash); } .drop-zone .hint { margin:.7rem 0 0; } .library-drop { padding:2.5rem 1.5rem; margin-block:1.5rem; } .upload-mark { display:inline-block; font-size:2rem; color:var(--accent); }
.button-row { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; } .attachment { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--rule); border-radius:var(--radius); margin-bottom:1rem; } .attachment strong { display:block; overflow-wrap:anywhere; } .attachment a { font-size:.8rem; }
.gallery-row { display:grid; grid-template-columns:110px 1fr; gap:1rem; padding:1rem; border:1px solid var(--rule); border-radius:var(--radius); margin:1rem 0; } .gallery-row img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:.3rem; } .gallery-row .button-row { grid-column:1/-1; } .gallery-row .button-row button { font-size:.75rem; padding:.3rem .6rem; }
.save-bar { position:sticky; bottom:0; z-index:5; padding:1.2rem 0 .6rem; border-top:1px solid var(--rule); background:color-mix(in srgb,var(--paper) 97%,transparent); backdrop-filter:blur(12px); } #draft-link { display:inline-block; margin:.5rem 1rem; font-size:.85rem; }
.library-controls { display:flex; align-items:end; justify-content:space-between; gap:1rem; margin-block:1.5rem; } .library-controls select { min-width:180px; margin-bottom:0; } .library-controls .hint { margin-bottom:.5rem; }
.asset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; } .asset-card { border:1px solid var(--rule); border-radius:var(--radius); overflow:hidden; } .asset-card>img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; background:var(--wash); } .asset-card__file { display:grid; place-items:center; aspect-ratio:4/3; background:var(--wash); font:2.3rem Georgia,serif; color:var(--accent); } .asset-card__info { padding:1.1rem; } .asset-card strong { display:block; overflow-wrap:anywhere; font-size:.85rem; line-height:1.5; } .asset-card button { font-size:.75rem; width:100%; } .asset-card .text-link { display:inline-block; margin-top:.6rem; } .asset-grid>.empty-state { grid-column:1/-1; }
#status { padding:1rem 1.2rem; margin:0 0 1.5rem; border-radius:var(--radius); background:var(--wash); } #status:empty { display:none; }
.upload-progress { position:fixed; z-index:30; right:1.5rem; bottom:1.5rem; width:min(360px,calc(100vw - 3rem)); background:var(--paper); padding:1rem 1.5rem; border:1px solid var(--rule); border-radius:var(--radius); box-shadow:0 8px 30px #0002; } .upload-progress p { font-size:.85rem; margin:0 0 .5rem; overflow-wrap:anywhere; } progress { width:100%; accent-color:var(--accent); }
.analytics-grid { display:grid; grid-template-columns:2fr 1fr; gap:3rem; } .usage-total { font:3rem Georgia,serif; padding-block:1rem; } table { width:100%; border-collapse:collapse; font-size:.85rem; } th,td { border-bottom:1px solid var(--rule); padding:.7rem .3rem; text-align:left; overflow-wrap:anywhere; } th:last-child,td:last-child { text-align:right; }
@media(max-width:1000px) { .asset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .editor-grid { gap:1.5rem; } }
@media(max-width:760px) { .editor-grid,.analytics-grid { grid-template-columns:1fr; } aside { position:static; border:0; padding:0 0 1rem; border-bottom:1px solid var(--rule); } #file-list { max-height:230px; } .workspace-heading { display:block; } .workspace-heading>.text-link { display:inline-block; margin-top:.5rem; } .private-label { display:none; } .editor-brand { font-size:1.15rem; } .editing-heading { display:block; } .save-state { display:inline-block; margin-top:.8rem; } }
@media(max-width:450px) { .asset-grid,.field-grid { grid-template-columns:1fr; } .gallery-row { grid-template-columns:75px 1fr; padding:.75rem; } .studio-tabs { gap:0; } .studio-tabs button { padding:.6rem .65rem; font-size:.8rem; } .attachment { align-items:start; flex-direction:column; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }
.advanced-fields { grid-column:1/-1; margin-block:.5rem; border:1px solid var(--rule); border-radius:var(--radius); padding:.8rem 1rem; }
.advanced-fields summary { cursor:pointer; font-size:.85rem; color:var(--muted); }
.advanced-fields[open] summary { margin-bottom:1rem; }
dialog { width:min(680px,calc(100% - 2rem)); max-height:85vh; overflow:auto; padding:clamp(1.25rem,4vw,2rem); border:1px solid var(--rule); border-radius:var(--radius); background:var(--paper); color:var(--ink); box-shadow:0 20px 70px #0005; }
dialog::backdrop { background:#101b16a8; backdrop-filter:blur(4px); }
.paper-picker select { min-height:13rem; margin-bottom:.75rem; }
.paper-picker option { padding:.6rem .4rem; font-size:.85rem; }
#pdf-paper-filename { overflow-wrap:anywhere; }
#pdf-paper-status:empty { display:none; }

.rich-block { margin-bottom:1.5rem; }
.rich-input { min-height:3rem; padding:.9rem 1rem; background:var(--paper); border:1px solid var(--rule); border-radius:.3rem; margin-top:.5rem; line-height:1.8; overflow-wrap:anywhere; }
.rich-input:focus { outline:2px solid var(--accent); outline-offset:2px; }
.rich-input p { margin:.2rem 0 .6rem; }
#publish-state { margin-top:.75rem; }