/* ── Sandline Studio · Etched Dusk (see DESIGN.md) ───── */ :root { color-scheme: dark; --dusk: oklch(0.21 0.014 60); --dusk-raised: oklch(0.255 0.016 60); --dusk-up: oklch(0.30 0.018 60); --dusk-line: oklch(0.34 0.018 60); --sand: oklch(0.945 0.022 85); --sand-dim: oklch(0.80 0.028 82); --sand-faint: oklch(0.62 0.02 70); --ink: oklch(0.27 0.02 55); --steel: oklch(0.76 0.035 240); --danger: oklch(0.62 0.14 25); --disp: "Marcellus", serif; --mono: "IBM Plex Mono", monospace; font-family: "Karla", ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } html, body { margin: 0; height: 100vh; overflow: hidden; background: var(--dusk); color: var(--sand-dim); } /* The studio wants a locked, non-scrolling viewport. The auth and admin pages are ordinary documents that must scroll (long user tables, error lines). overflow on propagates to the viewport, so those pages have to release it here too — overriding alone would leave the overflow clipped and unreachable. */ html:has(> .auth-body), html:has(> .admin-body), html:has(> .terms-body) { height: auto; overflow: auto; } button, input, select { font: inherit; } :focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; } .app-shell { display: grid; grid-template-columns: 272px 1fr; height: 100vh; overflow: hidden; } /* ── Sidebar ─────────────────────────────────────────── */ .controls { background: var(--dusk-raised); border-right: 1px solid var(--dusk-line); padding: 14px 14px 18px; overflow-y: auto; overflow-x: hidden; height: 100vh; scrollbar-width: thin; scrollbar-color: var(--dusk-line) transparent; } .brand { margin-bottom: 14px; } .brand p { margin: 0; font-family: var(--mono); color: var(--steel); font-size: 0.62rem; letter-spacing: 0.14em; } .brand p a { color: inherit; text-decoration: none; } .brand p a:hover { color: var(--sand); } .brand h1 { margin: 2px 0 0; font-family: var(--disp); font-weight: 400; color: var(--sand); font-size: 1.35rem; line-height: 1.15; letter-spacing: 0.02em; } /* ── Upload zone ─────────────────────────────────────── */ .drop-zone { display: grid; gap: 2px; place-items: center; min-height: 58px; border: 1px dashed var(--sand-faint); border-radius: 8px; background: var(--dusk); cursor: pointer; margin-bottom: 8px; padding: 10px; text-align: center; } .drop-zone:hover { border-color: var(--steel); } .drop-zone input { position: absolute; opacity: 0; pointer-events: none; } .drop-zone span { color: var(--sand); font-weight: 700; font-size: 0.84rem; } .drop-zone small { font-size: 0.68rem; color: var(--sand-faint); } /* ── Image tool buttons (bg removal / B&W / reset) ────── */ .remove-bg-btn { width: 100%; min-height: 28px; margin-bottom: 5px; background: var(--dusk-up); border: 1px solid var(--dusk-line); border-radius: 6px; color: var(--sand-dim); font-size: 0.74rem; font-weight: 700; cursor: pointer; } .remove-bg-btn:hover:not(:disabled) { border-color: var(--steel); color: var(--sand); } .remove-bg-btn:disabled { opacity: 0.4; cursor: not-allowed; } .bw-btn { } .reset-btn { } .remove-bg-status { margin: 0 0 6px; font-family: var(--mono); font-size: 0.65rem; color: var(--sand-faint); min-height: 10px; text-align: center; } /* ── Quick presets ───────────────────────────────────── */ .preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; } .preset-btn { min-height: 28px; border: 1px solid var(--dusk-line); border-radius: 6px; background: transparent; color: var(--sand-dim); font-size: 0.73rem; font-weight: 700; cursor: pointer; } .preset-btn:hover { border-color: var(--steel); color: var(--sand); background: var(--dusk-up); } /* ── Fine controls disclosure ────────────────────────── */ details.fine { margin-top: 10px; } details.fine > summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--sand-faint); padding: 8px 0; border-top: 1px solid var(--dusk-line); user-select: none; } details.fine > summary::-webkit-details-marker { display: none; } details.fine > summary::before { content: "+ "; color: var(--steel); } details.fine[open] > summary::before { content: "− "; } details.fine > summary:hover { color: var(--sand); } /* ── Control groups ──────────────────────────────────── */ .control-group { display: grid; gap: 6px; padding: 8px 0; border-top: 1px solid var(--dusk-line); } .control-group:first-of-type { border-top: none; } .control-group h2 { margin: 0; font-family: var(--mono); font-weight: 500; font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--sand-faint); } .control-group label { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; align-items: center; font-size: 0.76rem; font-weight: 400; color: var(--sand-dim); } .label-text { display: inline-flex; gap: 5px; align-items: center; } .info { display: inline-grid; place-items: center; width: 12px; height: 12px; border: 1px solid var(--dusk-line); border-radius: 50%; color: var(--sand-faint); background: transparent; font-size: 0.55rem; font-weight: 700; line-height: 1; cursor: help; flex-shrink: 0; } .info:hover { border-color: var(--steel); color: var(--steel); } .control-group select, .control-group input[type="range"] { grid-column: 1 / -1; } select { width: 100%; border: 1px solid var(--dusk-line); border-radius: 6px; background: var(--dusk); color: var(--sand); padding: 5px 8px; font-size: 0.75rem; } input[type="range"] { accent-color: var(--steel); height: 14px; background: transparent; } input[type="password"], input[type="text"] { grid-column: 1 / -1; border: 1px solid var(--dusk-line); border-radius: 6px; background: var(--dusk); color: var(--sand); padding: 5px 8px; font-size: 0.75rem; } output { font-family: var(--mono); color: var(--sand-faint); font-weight: 400; font-size: 0.68rem; } .checkbox-row { grid-template-columns: auto 1fr; justify-content: start; } .checkbox-row input { width: 14px; height: 14px; accent-color: var(--steel); } /* ── Action buttons ──────────────────────────────────── */ .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 12px; margin-top: 10px; border-top: 1px solid var(--dusk-line); } button { min-height: 34px; border: 1px solid var(--dusk-line); border-radius: 999px; background: var(--dusk-up); color: var(--sand-dim); font-weight: 700; font-size: 0.78rem; cursor: pointer; } button:hover:not(:disabled) { border-color: var(--steel); color: var(--sand); } button:disabled { opacity: 0.4; cursor: not-allowed; } /* primary action */ #traceButton { background: var(--sand); border-color: var(--sand); color: var(--ink); grid-column: 1 / -1; } #traceButton:hover:not(:disabled) { background: oklch(0.97 0.018 85); color: var(--ink); } #downloadButton { } #editorToggle { } .status { min-height: 0; margin: 8px 0 0; font-family: var(--mono); font-size: 0.67rem; line-height: 1.45; color: var(--sand-faint); } /* ── Workspace ───────────────────────────────────────── */ .workspace { display: grid; grid-template-rows: 1fr auto; gap: 10px; padding: 14px 16px; overflow: hidden; height: 100vh; } .preview-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; min-height: 0; overflow: hidden; } figure { display: grid; grid-template-rows: auto 1fr; gap: 6px; min-width: 0; min-height: 0; margin: 0; } figcaption { font-family: var(--mono); font-size: 0.64rem; font-weight: 500; color: var(--sand-faint); text-transform: uppercase; letter-spacing: 0.13em; } canvas, svg { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 1; min-height: 0; justify-self: center; align-self: center; border: 1px solid var(--dusk-line); border-radius: 10px; background: oklch(0.985 0.012 85); display: block; } #svgPreview { background: radial-gradient(circle at 44% 40%, oklch(0.965 0.02 85), var(--sand) 58%, oklch(0.885 0.03 82) 92%), var(--dusk-raised); border-color: var(--dusk-line); box-shadow: 0 0 60px oklch(0.945 0.022 85 / 0.07); } /* ── Meter row ───────────────────────────────────────── */ .meter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-family: var(--mono); font-size: 0.66rem; color: var(--sand-faint); } .meter-row span { border: 1px solid var(--dusk-line); border-radius: 999px; background: var(--dusk-raised); padding: 3px 10px; } /* ── AI tuner (dev) ──────────────────────────────────── */ .ai-tune-btn { width: 100%; min-height: 28px; margin-top: 6px; background: var(--dusk-up); border: 1px solid var(--dusk-line); border-radius: 6px; color: var(--sand-dim); font-size: 0.76rem; font-weight: 700; cursor: pointer; } .ai-tune-btn:hover:not(:disabled) { border-color: var(--steel); color: var(--sand); } .ai-tune-btn:disabled { opacity: 0.4; cursor: wait; } .ai-tune-log { margin-top: 6px; max-height: 180px; overflow-y: auto; font-size: 0.7rem; line-height: 1.4; } .ai-tune-log p { margin: 0 0 6px; color: var(--sand-dim); } .ai-tune-log .ai-head { font-weight: 700; color: var(--sand); } .ai-tune-log .ai-apply { color: var(--steel); font-weight: 700; } .ai-tune-log .ai-err { color: var(--danger); font-weight: 700; } @media (max-width: 900px) { html, body { overflow: auto; height: auto; } .app-shell { grid-template-columns: 1fr; height: auto; } .controls { height: auto; overflow-y: visible; border-right: 0; border-bottom: 1px solid var(--dusk-line); } .workspace { height: auto; } .preview-strip { grid-template-columns: 1fr; } } /* ---- auth page ---- */ .auth-body { display: grid; place-items: center; min-height: 100vh; /* override the global html, body { height: 100vh; overflow: hidden } so the card can scroll once an error line pushes it past the viewport */ height: auto; overflow: auto; margin: 0; } .auth-card { width: min(400px, calc(100vw - 3rem)); padding: 2.5rem 2rem; border: 1px solid rgba(0, 0, 0, 0.12); background: #fff; color: var(--ink); } .auth-brand { font-family: var(--mono); letter-spacing: 0.14em; font-size: 0.75rem; } .auth-brand a { color: inherit; text-decoration: none; } .auth-card h1 { font-family: var(--disp); font-weight: 400; margin: 0.5rem 0 0.75rem; } .auth-sub { font-size: 0.9rem; line-height: 1.5; } .auth-card form label { display: block; margin: 1rem 0; font-size: 0.85rem; } .auth-card form input { display: block; width: 100%; box-sizing: border-box; margin-top: 0.35rem; padding: 0.6rem 0.7rem; border: 1px solid rgba(0, 0, 0, 0.25); font: inherit; } .auth-card form button { width: 100%; padding: 0.7rem; border: none; background: var(--ink); color: #fff; font: inherit; cursor: pointer; } .auth-card form button[disabled] { opacity: 0.6; } .auth-error { color: var(--danger); font-size: 0.85rem; min-height: 1.2em; margin: 0.25rem 0 0.75rem; } .auth-switch { font-size: 0.85rem; margin-top: 1.25rem; } .mono-note { font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em; color: rgba(0, 0, 0, 0.5); margin-top: 1.5rem; text-align: center; } /* ---- account chip + pro tags ---- */ .account-chip { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.05em; } .account-email { opacity: 0.7; overflow: hidden; text-overflow: ellipsis; max-width: 11rem; } .account-chip a { color: inherit; } .account-logout { border: 1px solid var(--dusk-line); background: transparent; font: inherit; padding: 0.15rem 0.5rem; cursor: pointer; } .pro-tag { display: inline-block; margin-left: 0.4rem; padding: 0.05rem 0.35rem; border: 1px solid currentColor; border-radius: 2px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.08em; opacity: 0.75; vertical-align: middle; } /* ---- terms & privacy ---- */ .terms-body { margin: 0; height: auto; overflow: auto; background: #fff; color: var(--ink); } .terms-shell { max-width: 40rem; margin: 0 auto; padding: 3rem 1.5rem 5rem; line-height: 1.6; } .terms-header h1 { font-family: var(--disp); font-weight: 400; margin: 0.5rem 0 0.75rem; } .terms-sub { font-size: 0.95rem; opacity: 0.8; } .terms-shell section { margin-top: 2rem; } .terms-shell h2 { font-size: 0.8rem; font-family: var(--mono); letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.75rem; } .terms-shell ul { padding-left: 1.2rem; margin: 0; } .terms-shell li { margin-bottom: 0.6rem; } .terms-shell a { color: inherit; } /* ---- admin ---- */ .admin-body { margin: 0; height: auto; overflow: auto; background: #fff; color: #000; } .admin-shell { max-width: 64rem; margin: 0 auto; padding: 2rem 1.5rem 4rem; } .admin-header h1 { font-family: "Marcellus", serif; font-weight: 400; } .admin-shell h2 { font-size: 0.8rem; font-family: "IBM Plex Mono", monospace; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 2.5rem; } .admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 0.75rem; margin-top: 1.5rem; } .admin-tile { border: 1px solid rgba(0, 0, 0, 0.12); padding: 0.9rem 1rem; } .admin-tile strong { display: block; font-size: 1.5rem; font-family: "Marcellus", serif; font-weight: 400; } .admin-tile span { font-family: "IBM Plex Mono", monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; } .admin-table th { text-align: left; font-family: "IBM Plex Mono", monospace; font-size: 0.65rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; } .admin-table th, .admin-table td { padding: 0.45rem 0.6rem 0.45rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .admin-table select, .admin-table button { font: inherit; } .admin-table .delete, .admin-table .reset-pw { border: 1px solid rgba(0, 0, 0, 0.25); background: transparent; padding: 0.15rem 0.5rem; cursor: pointer; }