styles.css

:root {
    --ink:#273444;
    --muted:#677586;
    --blue:#2874b9;
    --paper:#ffffff;
    --line:#dce2e8;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    color:var(--ink);
    background:var(--paper);
    font-synthesis:none;
}

* {
    box-sizing:border-box;
}

body {
    margin:0;
    overflow:hidden;
}

button,input,select {
    font:inherit;
}

button,a,input,select,summary {
    -webkit-tap-highlight-color:transparent;
}

button,summary {
    cursor:pointer;
}

button:disabled {
    cursor:default;
    opacity:.42;
}

a {
    color:inherit;
    text-decoration:none;
}

a:hover {
    text-decoration:underline;
}

button {
    color:inherit;
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,.spacer:focus-visible {
    outline:3px solid #d4991a;
    outline-offset:4px;
}

[hidden] {
    display:none!important;
}

h1, h2, h3 { margin-top: 0; }
p { line-height: 1.6; }
.brand { font-size: 20px; font-weight: 700; white-space: nowrap; }

.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    min-height:40px;
    padding:9px 15px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    text-decoration:none;
}

.btn:hover:not(:disabled) {
    background:#f0f4f8;
}

.btn.primary {
    background:var(--blue);
    color:#fff;
    border-color:var(--blue);
}

.btn.primary:hover:not(:disabled) {
    background:#1d5f99;
}

#status {
    position:fixed;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    max-width:calc(100% - 30px);
    z-index:40;
    background:var(--ink);
    color:#fff;
    border-radius:6px;
    padding:9px 15px;
    font-size:12px;
    box-shadow:0 3px 15px #0001;
}

#status:empty {
    display:none;
}

#status.error {
    background:#932f25;
}

.editing {
    overflow:hidden;
    background:#edf0f4;
}

#editor {
    height:100dvh;
    display:flex;
    flex-direction:column;
}

.editor-header {
    min-height:64px;
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 24px;
    background:var(--paper);
    border-bottom:1px solid var(--line);
}

#documentName {
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:var(--muted);
    padding-left:20px;
}

.editor-toolbar {
    display:flex;
    gap:20px;
    align-items:center;
    justify-content:flex-start;
    padding:10px 24px;
    flex-shrink:0;
    border-bottom:1px solid var(--line);
    background:white;
}

.tool-group,.zoom-controls {
    display:flex;
    align-items:center;
    gap:4px;
}

.tool-group .btn[aria-pressed=true] {
    background:var(--blue);
    color:#fff;
}

.zoom-controls .btn {
    padding-inline:12px;
}

.zoom-controls span {
    font-size:12px;
    width:45px;
    text-align:center;
}

.breaks-label {
    display:flex;
    gap:5px;
    align-items:center;
    font-size:12px;
}

.editor-workspace {
    flex:1;
    flex-direction:row-reverse;
    display:flex;
    min-height:0;
}

.viewer-container {
    flex:1;
    background:#edf0f4;
    min-width:0;
    overflow:auto;
    position:relative;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
}

.pdf-viewer {
    padding:24px 20px 70px;
    min-width:100%;
    width:max-content;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
}

.pdf-page {
    position:relative;
    flex:none;
    background:#fff;
    box-shadow:0 3px 15px #2734441a;
    overflow:hidden;
}

.content-slice {
    position:absolute;
    left:0;
    pointer-events:none;
}

.placing .pdf-page {
    cursor:crosshair;
}

.sidebar {
    width:245px;
    flex:none;
    background:var(--paper);
    border-right:1px solid var(--line);
    padding:26px 20px;
    overflow:auto;
}

.sidebar h2 {
    font-size:16px;
    margin-bottom:20px;
}

.sidebar label {
    display:block;
    font-size:11px;
    line-height:1.4;
    margin-bottom:17px;
    color:var(--muted);
}

.sidebar input,.sidebar select {
    display:block;
    width:100%;
    background:#fff;
    border:1px solid #c9d1c6;
    color:var(--ink);
    border-radius:4px;
    padding:10px;
    margin-top:7px;
    font-size:14px;
}

.sidebar input:invalid {
    border-color:#a63629;
}

.muted,.sidebar-note {
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.sidebar-note {
    border-top:1px solid var(--line);
    padding-top:18px;
    margin-top:25px;
}

.property-actions {
    display:flex;
    gap:8px;
}

.danger {
    color:#a1372c;
}

.spacer {
    position:absolute;
    left:0;
    width:100%;
    border-block:1px dashed #99b8d3;
    background-color:#fff;
    cursor:grab;
    touch-action:none;
    z-index:2;
}

.spacer.selected {
    outline:2px solid var(--blue);
    outline-offset:-2px;
    background-color:#f0f6ea;
}

.spacer-ruled {
    background-image:linear-gradient(to bottom,transparent calc(100% - .5px),#c2ccd1 0);
    background-size:100% var(--pitch);
}

.spacer-squared {
    background-image:linear-gradient(to bottom,transparent calc(100% - .5px),#c2ccd1 0),linear-gradient(to right,transparent calc(100% - .5px),#c2ccd1 0);
    background-size:var(--pitch) var(--pitch);
}

.spacer-dot-grid {
    background-image:radial-gradient(circle,#c2ccd1 .6px,transparent .8px);
    background-size:var(--pitch) var(--pitch);
    background-position:calc(var(--pitch)/2) calc(var(--pitch)/2);
}

.spacer-label {
    position:absolute;
    right:7px;
    top:6px;
    font-size:10px;
    color:var(--blue);
    background:#eef6ffe8;
    padding:4px 7px;
    border-radius:4px;
    pointer-events:none;
}

.spacer-handle {
    position:absolute;
    bottom:-12px;
    left:calc(50% - 23px);
    height:26px;
    width:46px;
    border-radius:15px;
    background:var(--blue);
    color:#fff;
    text-align:center;
    line-height:26px;
    cursor:ns-resize;
    z-index:4;
    touch-action:none;
}

.page-break {
    position:absolute;
    left:0;
    right:0;
    height:0;
    border-top:1px dashed #c77727;
    z-index:5;
    color:#9d5514;
    font-size:9px;
    pointer-events:none;
    text-align:right;
}

.insertion-guide {
    position:absolute;
    left:0;
    right:0;
    height:1px;
    background:var(--blue);
    font-size:10px;
    color:var(--blue);
    z-index:6;
    pointer-events:none;
    text-align:right;
}

.project-menu {
    position:relative;
}

.project-menu summary {
    list-style:none;
}

.project-menu>div {
    position:absolute;
    top:48px;
    right:0;
    min-width:200px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:6px;
    padding:6px;
    z-index:20;
    box-shadow:0 7px 20px #0001;
}

.project-menu button,.project-menu a {
    display:block;
    background:none;
    border:0;
    text-align:left;
    padding:11px;
    font-size:12px;
    width:100%;
}

.project-menu button:hover {
    background:#eef2e9;
}

dialog {
    border:1px solid var(--line);
    padding:32px;
    border-radius:10px;
    width:min(530px,calc(100% - 30px));
    color:var(--ink);
    background:var(--paper);
    max-height:90dvh;
    overflow:auto;
}

dialog::backdrop {
    background:#27344480;
}

dialog h2 {
    font-size:27px;
}

dialog>p {
    font-size:14px;
}

.export-option {
    display:flex;
    gap:12px;
    padding:18px;
    border:1px solid var(--line);
    border-radius:5px;
    margin-block:12px;
    cursor:pointer;
}

.export-option small {
    display:block;
    margin-top:5px;
    color:var(--muted);
    font-size:12px;
    line-height:1.5;
}

.dialog-actions {
    display:flex;
    justify-content:flex-end;
    gap:9px;
    margin-top:25px;
}

#previewDialog {
    width:min(850px,calc(100% - 20px));
    background:#edf0f4;
}

.preview-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    margin-bottom:20px;
}

.preview-heading h2 {
    margin:0;
}

#previewPages {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
}

#previewPages canvas {
    max-width:100%;
    height:auto;
    box-shadow:0 3px 10px #0002;
}


.empty-workspace {
    min-height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:40px 24px;
    gap:24px;
}
.upload-panel {
    width:min(560px,100%);
    padding:44px 28px 32px;
    border:2px dashed #c5ced8;
    border-radius:8px;
    background:#fff;
    text-align:center;
}
.upload-icon { color:#7591ad; margin-bottom:18px; }
.upload-panel h1 { font-size:26px; font-weight:600; margin-bottom:12px; }
.upload-panel>p { font-size:14px; color:var(--muted); margin:0 0 24px; }
.upload-panel>.primary { min-height:46px; padding:12px 28px; font-size:15px; }
.sample-button { display:block; margin:17px auto 0; padding:6px; border:0; background:none; color:var(--blue); font-size:13px; }
.sample-button:hover { text-decoration:underline; }
.upload-panel>.privacy { font-size:11px; margin:23px 0 0; }
.empty-workspace.drop-active .upload-panel { border-color:var(--blue); background:#eef6ff; }
.tool-help { width:min(560px,100%); color:var(--muted); font-size:13px; }
.tool-help summary { text-align:center; padding:8px; }
.tool-help[open] { background:#fff; padding:18px; border:1px solid var(--line); border-radius:6px; }
.tool-help li { margin-bottom:12px; line-height:1.6; }
.tool-help a { color:var(--blue); text-decoration:underline; }
body:not(.editing) .sidebar-note { display:none; }
@media(max-width:900px) {
    .editor-header { padding-inline:14px; }
    .editor-toolbar { gap:10px; padding-inline:14px; }
    .sidebar { width:210px; }
}
@media(max-width:650px) {
    .editor-header { gap:8px; flex-wrap:wrap; padding:10px; }
    .editor-header .brand { font-size:19px; flex-basis:40%; }
    #documentName { padding:0; font-size:11px; flex-basis:50%; text-align:right; }
    .editor-header>.btn, .project-menu .btn { min-height:36px; font-size:11px; padding:8px 10px; }
    .editor-header>.btn:first-of-type { margin-left:auto; }
    .editor-toolbar { flex-wrap:wrap; gap:7px; padding:7px 10px; }
    .editor-toolbar .btn { min-height:36px; font-size:11px; padding:8px 10px; }
    .tool-group .btn>span { display:none; }
    .zoom-controls { margin-left:auto; }
    .zoom-controls .btn { padding-inline:8px; }
    .zoom-controls span { width:36px; }
    .breaks-label { font-size:10px; }
    .editor-workspace { flex-direction:column; }
    .sidebar { width:100%; max-height:32dvh; padding:12px 15px; border-right:0; border-top:1px solid var(--line); flex-shrink:0; }
    body:not(.editing) .sidebar { display:none; }
    .sidebar h2 { font-size:14px; margin:0 0 10px; }
    .sidebar-note { display:none; }
    .sidebar .muted { margin:0; }
    .sidebar #spacerProperties:has(input) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .sidebar label { margin:0; }
    .sidebar input,.sidebar select { padding:7px; margin-top:4px; font-size:12px; }
    .property-actions { align-items:end; }
    .property-actions .btn { min-height:34px; font-size:11px; padding:8px; }
    .pdf-viewer { padding-top:16px; }
    .empty-workspace { padding:24px 16px; gap:16px; }
    .upload-panel { padding:28px 16px; }
    .upload-panel h1 { font-size:24px; }
    .upload-panel>p { font-size:13px; }
    #status { bottom:6px; padding:6px 10px; font-size:10px; pointer-events:none; }
    dialog { padding:22px; }
    .dialog-actions { flex-wrap:wrap; }
    .spacer-handle { height:30px; bottom:-14px; line-height:30px; }
    .spacer-label { font-size:8px; }
}
@media(prefers-reduced-motion:reduce) {
    * { scroll-behavior:auto!important; }
}

.landing-content { width:min(880px,100%); display:flex; flex-direction:column; gap:40px; padding:8px 0 48px; }
.landing-content h2 { font-size:22px; font-weight:600; margin:0 0 14px; }
.landing-content h3 { font-size:15px; font-weight:600; margin:0 0 6px; }
.landing-content p { margin:0 0 12px; font-size:15px; }
.landing-content a { color:var(--blue); text-decoration:underline; }
.landing-content figure { margin:0; }
.landing-content img { display:block; width:100%; height:auto; border:1px solid var(--line); border-radius:8px; background:#fff; }
.landing-content figcaption { font-size:13px; color:var(--muted); margin-top:8px; text-align:center; }
.landing-steps { margin:0; padding-left:22px; }
.landing-steps li { margin-bottom:10px; line-height:1.6; font-size:15px; }
.landing-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.landing-grid>div, .landing-grid>a { padding:16px; background:#fff; border:1px solid var(--line); border-radius:8px; font-size:14px; line-height:1.5; }
.landing-grid>a { text-decoration:none; color:inherit; }
.landing-grid>a:hover { border-color:var(--blue); text-decoration:none; }
.landing-grid>a strong { display:block; color:var(--blue); margin-bottom:4px; }
.landing-faq details { border-top:1px solid var(--line); }
.landing-faq details:last-of-type { border-bottom:1px solid var(--line); }
.landing-faq summary { padding:14px 0; font-weight:600; font-size:15px; list-style-position:inside; }
.landing-faq details>p { padding:0 0 14px; color:var(--muted); }
.landing-footer { font-size:13px; color:var(--muted); text-align:center; }
.landing-footer a { color:var(--muted); margin:0 8px; }

.dialog-field {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top:14px;
    font-size:14px;
}

.dialog-field select,.export-option input[type=number] {
    background:#fff;
    border:1px solid #c9d1c6;
    color:var(--ink);
    border-radius:4px;
    padding:8px;
    font-size:14px;
}

.export-option input[type=number] {
    width:5.5em;
    padding:4px 6px;
    font-size:12px;
}

.export-check {
    display:flex;
    align-items:flex-start;
    gap:10px;
    margin-top:14px;
    font-size:13px;
    line-height:1.5;
    cursor:pointer;
}

.export-check input { margin-top:3px; }

.feedback-field {
    display:block;
    margin-top:14px;
    font-size:13px;
}

.feedback-field span { display:block; margin-bottom:6px; color:var(--muted); }

.feedback-field select,.feedback-field textarea,.feedback-field input {
    width:100%;
    box-sizing:border-box;
    background:#fff;
    border:1px solid #c9d1c6;
    color:var(--ink);
    border-radius:4px;
    padding:9px;
    font:inherit;
    font-size:14px;
}

.feedback-field textarea { min-height:110px; resize:vertical; }

.dialog-note { font-size:12px; color:var(--muted); margin-top:14px; }

.dialog-note a,.sidebar-note a { color:inherit; text-decoration:underline; }

.share-actions { justify-content:flex-start; }

.chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

.chip {
    padding:7px 13px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:999px;
    font:inherit;
    font-size:13px;
    cursor:pointer;
}

.chip:hover { background:#f0f4f8; }

.chip[aria-pressed=true] { background:var(--blue); border-color:var(--blue); color:#fff; }

.purpose-more { display:flex; gap:8px; margin-top:12px; }

.purpose-more input {
    flex:1;
    min-width:0;
    background:#fff;
    border:1px solid #c9d1c6;
    color:var(--ink);
    border-radius:6px;
    padding:9px;
    font:inherit;
    font-size:14px;
}

#purposeAsk:not([hidden]) + #shareSection { padding-top:16px; margin-top:16px; border-top:1px solid var(--line); }

.link-btn { background:none; border:0; padding:0; font:inherit; font-size:12px; color:var(--muted); text-decoration:underline; cursor:pointer; }