@font-face {
  font-family: Manrope;
  src: url('fonts/manrope-regular.ttf') format('truetype');
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: 'LXGW WenKai';
  src: url('fonts/lxgw-wenkai-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'LXGW WenKai';
  src: url('fonts/lxgw-wenkai-medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
:root {
  --paper: #f5ebd2;
  --card: #fff8e9;
  --panel: #e1e8d5;
  --ink: #143f43;
  --muted: #57706a;
  --line: #c8cbb2;
  --accent: #236db1;
  --orange: #f5a15a;
  --olive: #dce0b4;
  --accent-wash: #dce9e9;
  --sky: #236bb0;
  --sky-text: #fff2d5;
  --sky-hover: #15558b;
  --sky-highlight: #ffce88;
  --field: #fff3d8;
  --field-border: #ffe0aa;
  --field-shadow: #124e8359;
  --card-border: #c7c8a8;
  --card-shadow: #244c3c1c;
  --label-paper: #fff5dded;
  --action: #8a431e;
  --selection: #f8c48d;
  --status-positive: #406f50;
  --dialog-shadow: #073d4150;
  --backdrop: #0b3c5a99;
  --viewer: #dbe6d6;
  --tag-paper: #e6e6ca;
  --prompt-paper: #f4f2dd;
  --lightbox: #123a3e;
  --lightbox-text: #e3e3bd;
  --focus: #9f4e21;
  --font: 'LXGW WenKai', 'PingFang SC', serif;
  --text-font: Manrope, 'LXGW WenKai', 'PingFang SC', sans-serif;
  --page: clamp(32px, 3.2vw, 64px);
}
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; min-width: 1100px; color: var(--ink); background: var(--paper) url('assets/paper-relief.svg'); font: 18px/1.65 var(--font); font-size-adjust: from-font; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { opacity: .35; cursor: default; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: 5px; }
a:hover { color: var(--accent); }
button svg, a svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }
.sky-shell :focus-visible { outline-color: var(--sky-highlight); }
::selection { background: var(--selection); color: var(--ink); }
input { caret-color: var(--accent); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: fixed; top: -80px; left: 24px; z-index: 10; padding: 12px 20px; color: var(--ink); background: var(--orange); border-radius: 4px 8px 3px 7px; }
.skip:focus { top: 10px; }
.back-to-top { position: fixed; z-index: 8; right: 24px; bottom: 26px; width: 56px; height: 60px; padding: 0; display: grid; place-items: center; color: var(--accent); background: var(--card) url('assets/paper-grain.svg'); border: 1px solid var(--card-border); border-radius: 14px; box-shadow: 0 5px 18px var(--card-shadow), 0 2px 0 color-mix(in srgb,var(--line) 50%,transparent); transition: transform .2s, box-shadow .2s, background-color .2s; }
.back-to-top[hidden] { display: none; }
.back-to-top .return-mark { display: block; grid-area: 1 / 1; width: 38px; height: 40px; margin: 0; stroke-width: 1.7; }
.back-to-top .return-wash { fill: var(--accent-wash); stroke: none; }
.back-to-top .return-arrow { stroke-width: 2; }
.back-to-top .return-ground { opacity: .6; stroke-width: 1.25; }
.back-to-top:hover { transform: translateY(-2px); box-shadow: 0 8px 22px var(--card-shadow), 0 2px 0 var(--line); }
.back-to-top:active { transform: translateY(0); }
.back-to-top-label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; padding: 5px 11px; font-size: 14px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 4px 7px 3px 6px; box-shadow: 0 2px 8px var(--card-shadow); opacity: 0; visibility: hidden; transition: opacity .15s; pointer-events: none; }
.back-to-top:is(:hover,:focus-visible) .back-to-top-label { opacity: 1; visibility: visible; }
[data-theme="ink"] .back-to-top { border-radius: 6px; border-color: var(--accent); }
[data-theme="ink"] .back-to-top .return-wash { fill: none; stroke: var(--line); stroke-width: .7; stroke-dasharray: 1 3; }
[data-theme="cobalt"] .back-to-top { border-radius: 1px; border: 2px solid var(--accent); box-shadow: 3px 3px 0 var(--accent); }
[data-theme="cobalt"] .back-to-top .return-arrow { stroke-width: 2.8; }
[data-theme="lifestyle"] .back-to-top { border-radius: 50%; border-color: var(--ink); }
[data-theme="storybook"] .back-to-top { border-radius: 18px; color: var(--ink); box-shadow: 0 3px 0 var(--line); }
@media (prefers-reduced-motion: reduce) { .back-to-top,.back-to-top-label { transition: none; }.back-to-top:hover { transform: none; } }
.sky-shell { position: relative; isolation: isolate; background: var(--sky); color: var(--sky-text); }
.sky-shell::before { content: ''; position: absolute; inset: 0; background: url('assets/paper-relief.svg'), url('assets/paper-grain.svg'); opacity: 1; mix-blend-mode: soft-light; pointer-events: none; z-index: -1; }
.site-header, .hero, main { max-width: 1920px; margin-inline: auto; padding-inline: var(--page); }
.site-header { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 22px; min-height: 82px; z-index: 4; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; font: 650 24px/1.3 Manrope,sans-serif; letter-spacing: -.9px; text-decoration: none; }
.brand:hover { color: var(--sky-text); }
.brand .brand-mark { width: 34px; height: 34px; stroke: var(--sky-highlight); stroke-width: 2; transform: rotate(-4deg); }
.brand-mark path:first-child { fill: var(--sky-highlight); stroke: var(--sky-highlight); }
.brand-mark path:nth-child(2) { stroke: var(--sky); }
.scope-nav { display: flex; align-items: center; gap: 7px; margin-inline: auto; }
.scope-nav button { position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; padding: 11px 17px; font-size: 18px; white-space: nowrap; }
.scope-nav button::before, #categories button::before, .source-toggle button::before, .section-heading button::before, .empty button::before {
  content: ''; position: absolute; inset: 0; background: transparent; z-index: -1;
  -webkit-mask-image: url('assets/brush-stroke.svg'); mask-image: url('assets/brush-stroke.svg');
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.scope-nav button:hover::before { background: var(--sky-hover); }
.scope-nav button.active { color: var(--ink); }
.scope-nav button.active::before { background: var(--orange) url('assets/paper-grain.svg'); }
.scope-nav button>span[id] { font: 11px Manrope,sans-serif; opacity: .8; }
.scope-nav button svg { width: 16px; height: 16px; }
.help-link { display: flex; gap: 7px; align-items: center; text-decoration: none; white-space: nowrap; font-size: 15px; }
.help-link:hover { color: var(--sky-highlight); }
.help-link svg { width: 15px; height: 15px; }
.hero { position: relative; height: 242px; display: flex; align-items: center; }
.hero-copy { position: relative; z-index: 1; padding-bottom: 16px; }
.hero h1 { font-size: 58px; line-height: 1.25; font-weight: 500; letter-spacing: 2px; margin: 0 0 7px; }
.title-spark { display: inline-block; margin-left: 20px; color: var(--sky-highlight); font: 25px var(--font); vertical-align: top; transform: rotate(15deg); padding-top: 5px; }
.hero p { margin: 0 0 20px; color: var(--sky-text); font-size: 20px; letter-spacing: .4px; }
.hero-art { position: absolute; right: var(--page); top: -28px; width: 510px; height: 268px; object-fit: contain; pointer-events: none; }
.sky-star { position: absolute; color: var(--sky-highlight); pointer-events: none; }
.star-one { right: 43%; top: 14px; font-size: 13px; transform: rotate(12deg); }
.star-two { right: 36%; top: 69px; font-size: 28px; }
.search-box { width: 445px; height: 52px; display: flex; align-items: center; gap: 11px; padding: 0 16px; background: var(--field) url('assets/paper-grain.svg'); color: var(--ink); border: 1px solid var(--field-border); border-radius: 7px 5px 8px 4px; box-shadow: 3px 4px 0 var(--field-shadow); }
.search-box:focus-within { box-shadow: 3px 4px 0 var(--field-shadow), 0 0 0 3px var(--focus); }
.search-box>svg { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--muted); stroke-width: 1.8; }
.search-box input { border: 0; background: transparent; color: var(--ink); outline: none; width: 100%; min-width: 0; height: 100%; font-size: 18px; }
.search-box input::placeholder { color: var(--muted); opacity: 1; }
.search-box kbd { padding: 0 6px; color: var(--muted); border: 1px solid var(--line); border-radius: 3px; font: 12px/1.7 Manrope,sans-serif; }
.paper-shore { display: block; width: 100%; height: 20px; fill: var(--paper); margin-top: -1px; }
main { position: relative; padding-top: 18px; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 46px; padding-bottom: 17px; }
#categories { display: flex; gap: 3px; align-items: center; flex-wrap: wrap; }
#categories button { position: relative; isolation: isolate; padding: 8px 14px; color: var(--muted); font-size: 18px; white-space: nowrap; }
#categories button:hover::before { background: var(--panel); }
#categories button.active { color: var(--ink); }
#categories button.active::before { background: var(--olive) url('assets/paper-grain.svg'); }
.display-tools { display: flex; align-items: center; gap: 16px; flex: none; }
.source-toggle { display: inline-flex; gap: 2px; padding: 2px; border-bottom: 1px solid var(--line); }
.source-toggle button { position: relative; isolation: isolate; padding: 6px 12px; color: var(--muted); font-size: 17px; white-space: nowrap; }
.source-toggle button.active { color: var(--sky-text); }
.source-toggle button.active::before { background: var(--ink) url('assets/paper-grain.svg'); }
.sort-label select { padding: 8px 2px 8px 4px; color: var(--muted); border: 0; background: transparent; cursor: pointer; max-width: 120px; font-size: 17px; }
.collection-heading { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.collection-heading h2 { margin: 0; font-size: 18px; font-weight: 500; scroll-margin-top: 24px; }
.collection-heading h2 span { margin-left: 7px; color: var(--muted); font: 12px Manrope,sans-serif; }
.collection-heading p { color: var(--muted); font-size: 14px; margin: 0 0 0 auto; }
.collection-heading>button { padding: 0; color: var(--action); font-size: 14px; text-decoration: underline; }
.gallery { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); grid-auto-rows: auto; align-items: start; gap: 36px 22px; list-style: none; margin: 0; padding: 0; }
.gallery.is-masonry { grid-auto-rows: 8px; row-gap: 0; }
.style-card { position: relative; min-width: 0; align-self: start; }
.card-content { width: 100%; padding: 11px 11px 13px; background: var(--card) url('assets/paper-relief.svg'); border: 1px solid var(--card-border); border-radius: 4px 8px 5px 7px; box-shadow: 2px 3px 0 var(--card-shadow); }
.card-artwork { position: relative; }
.cover-button { display: block; position: relative; width: 100%; padding: 0; background: var(--panel); border-radius: 2px 3px 2px 4px; overflow: clip; text-align: left; }
.cover-button>img { display: block; width: 100%; height: auto; }
.cover-empty { display: grid; min-height: 270px; place-items: center; color: var(--muted); }
.open-indicator { display: grid; place-items: center; position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; color: var(--ink); background: var(--label-paper); border-radius: 4px 2px 5px 3px; opacity: 0; transition: opacity .15s; }
.open-indicator svg { width: 18px; height: 18px; }
.cover-button:hover .open-indicator, .cover-button:focus-visible .open-indicator { opacity: 1; }
.card-save { display: grid; place-items: center; position: absolute; top: 9px; right: 9px; width: 33px; height: 33px; padding: 7px; color: var(--ink); background: var(--label-paper); border-radius: 6px 3px 5px 2px; opacity: 0; transition: opacity .15s; }
.card-save svg { width: 19px; height: 19px; }
.card-artwork:hover .card-save, .card-save:focus-visible, .card-save[aria-pressed=true] { opacity: 1; }
.card-save[aria-pressed=true] { background: var(--orange); }
.card-save[aria-pressed=true] svg { fill: var(--selection); }
.card-heading { display: flex; align-items: start; gap: 8px; margin: 13px 3px 7px; }
.card-heading h3 { font-size: 23px; line-height: 1.4; font-weight: 500; margin: 0; }
.card-heading h3 button { padding: 0; text-align: left; }
.card-heading h3 button:hover { color: var(--action); }
.card-prompt { font-family: var(--text-font); font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0 3px 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: clip; }
.status { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.status:before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.status.tested:before { background: var(--status-positive); }
.status.untested:before { background: var(--action); }
.card-copy { display: flex; gap: 5px; align-items: center; color: var(--action); font-size: 17px; padding: 3px 0; white-space: nowrap; }
.card-copy svg { width: 15px; height: 15px; }
.card-copy:hover { color: var(--action); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.empty { text-align: center; padding: 85px 0 115px; color: var(--muted); }
.empty svg { width: 56px; height: 56px; fill: none; stroke: var(--muted); stroke-width: 1.3; }
.empty h3 { margin: 20px 0 8px; font-size: 25px; font-weight: 500; color: var(--ink); }
.empty p { margin: 0; font-size: 16px; }
.empty button { position: relative; isolation: isolate; color: var(--ink); padding: 12px 24px; margin-top: 24px; }
.empty button::before { background: var(--orange); }
.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; padding: 25px 0 32px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.page-footer>div { display: flex; gap: 18px; align-items: center; }
.page-footer strong { color: var(--ink); font: 600 14px Manrope,sans-serif; }
.page-footer a { text-decoration: none; }
/* The same paper, pigment and pine palette continues into the inspector. */
.detail { width: calc(100% - 80px); max-width: 1560px; height: calc(100dvh - 64px); max-height: 1000px; padding: 0; border: 2px solid var(--card-border); border-radius: 8px 12px 6px 10px; background: var(--card); color: var(--ink); box-shadow: 0 24px 90px var(--dialog-shadow); }
.detail::backdrop, .lightbox::backdrop { background: var(--backdrop); overflow: hidden; overscroll-behavior: contain; }
.detail:modal, .lightbox:modal { overscroll-behavior: contain; }
.detail-layout { display: grid; grid-template-columns: minmax(0,1fr) 440px; height: 100%; }
.viewer { display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: 23px; background: var(--viewer) url('assets/paper-grain.svg'); }
.viewer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.viewer-tabs { display: inline-flex; gap: 6px; }
.viewer-tabs button { padding: 8px 12px; border-radius: 5px 3px 6px 3px; color: var(--muted); font-size: 18px; }
.viewer-tabs button.active { background: var(--card); color: var(--ink); box-shadow: 1px 2px 0 var(--card-shadow); }
.viewer-tabs span { margin-left: 5px; color: var(--muted); font: 12px Manrope,sans-serif; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 8px; border-radius: 5px 7px 3px 6px; }
.icon-button:hover { background: var(--panel); color: var(--ink); }
.icon-button[aria-pressed=true] { color: var(--action); background: var(--selection); }
.icon-button[aria-pressed=true] svg { fill: var(--orange); }
.image-stage { display: flex; align-items: center; justify-content: center; flex: 1; min-height: 0; position: relative; padding-inline: 26px; }
#stage-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; cursor: zoom-in; }
.image-stage img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 4px 18px var(--card-shadow); }
#stage-video { max-width: 100%; max-height: 100%; background: var(--ink); }
.image-arrow { position: absolute; top: calc(50% - 19px); width: 34px; height: 38px; padding: 7px; color: var(--muted); border-radius: 5px; }
.image-arrow:hover { color: var(--ink); background: var(--field); }
#prev-image { left: -9px; }
#next-image { right: -9px; }
.image-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; color: var(--muted); font: 11px/1.5 var(--text-font); margin: 18px 0 12px; }
.image-caption p { margin: 0; white-space: nowrap; overflow: clip; text-overflow: ellipsis; }
.image-caption span { white-space: nowrap; }
.thumbnails { display: flex; align-items: center; gap: 10px; height: 68px; overflow-x: auto; padding: 3px; flex: none; }
.thumbnails button { flex: none; width: 58px; height: 58px; padding: 3px; border: 2px solid transparent; border-radius: 3px; opacity: .6; }
.thumbnails button:hover { opacity: 1; }
.thumbnails button.active { opacity: 1; border-color: var(--action); background: var(--card); }
.thumbnails img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: none; }
.inspector { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--card) url('assets/paper-relief.svg'); }
.inspector-top { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 16px 22px 16px 28px; flex: none; }
.inspector-top>div { display: flex; align-items: center; gap: 4px; }
.inspector-top form { display: inline-flex; }
.inspector-scroll { padding: 4px 28px 30px; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.inspector h2 { margin: 0 0 7px; font-size: 34px; line-height: 1.4; font-weight: 500; }
.style-id { margin: 0 0 22px; color: var(--muted); font: 11px/1.6 Manrope,sans-serif; overflow-wrap: anywhere; }
.description { margin: 0 0 16px; color: var(--muted); font-size: 18px; line-height: 1.85; }
.detail-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.detail-tags span { color: var(--muted); background: var(--tag-paper); border-radius: 3px 5px 2px 4px; padding: 4px 8px; font-size: 14px; }
.prompt-section { position: relative; }
.section-heading { position: sticky; top: -4px; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0 14px; background: var(--card); }
.inspector h3 { margin: 0; font-size: 18px; font-weight: 500; }
.section-heading button { position: relative; isolation: isolate; display: flex; align-items: center; gap: 7px; padding: 10px 14px; color: var(--ink); font-size: 17px; }
.section-heading button::before { background: var(--orange) url('assets/paper-grain.svg'); }
.section-heading button:hover::before { background-color: #ffc184; }
.section-heading button svg { width: 16px; height: 16px; }
.prompt-section select { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px 6px 0 0; background: var(--prompt-paper); color: var(--muted); cursor: pointer; font-size: 14px; }
.prompt-section pre { margin: 0 0 12px; padding: 18px; border: 1px solid var(--line); border-radius: 5px 7px 4px 6px; background: var(--prompt-paper); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; font: 17px/1.85 var(--text-font); font-size-adjust: from-font; }
.prompt-section:has(select:not([hidden])) pre { border-radius: 0 0 5px 6px; border-top: 0; }
.prompt-section>a { color: var(--muted); font-size: 13px; text-decoration: none; }
.evidence-section { margin-top: 28px; padding-top: 23px; border-top: 1px solid var(--line); }
.evidence-section>p { color: var(--muted); margin: 14px 0; font-size: 17px; line-height: 1.85; }
#image-meta { color: var(--muted); font: 11px/1.6 Manrope,sans-serif; }
.file-links, .archive-links { display: flex; gap: 16px; flex-wrap: wrap; }
.file-links { margin-top: 14px; }
.file-links a, .archive-links a { color: var(--accent); font-size: 13px; text-decoration: none; }
.archive-links { padding-top: 22px; margin-top: 24px; border-top: 1px solid var(--line); }
.lightbox { width: calc(100% - 40px); height: calc(100dvh - 40px); max-width: none; max-height: none; padding: 28px; border: 0; border-radius: 6px; background: var(--lightbox); color: var(--sky-text); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.lightbox img { display: block; max-width: 100%; max-height: calc(100% - 38px); object-fit: contain; }
.lightbox p { margin: 14px 0 0; color: var(--lightbox-text); font-size: 14px; }
.lightbox>form { position: absolute; top: 16px; right: 16px; }
.lightbox-close { width: 38px; height: 38px; padding: 8px; border-radius: 6px; color: var(--ink); background: var(--orange); }
#toast { position: fixed; inset: auto auto 28px 50%; width: max-content; max-width: 80%; margin: 0; padding: 12px 22px; border: 1px solid var(--muted); border-radius: 4px 7px 5px 8px; background: var(--ink) url('assets/paper-grain.svg'); color: var(--sky-text); transform: translate(-50%,12px); z-index: 100; opacity: 0; pointer-events: none; font-size: 16px; transition: opacity .15s,transform .15s; box-shadow: 2px 3px 0 var(--card-shadow); }
#toast.visible { opacity: 1; transform: translate(-50%,0); }
[hidden] { display: none!important; }
@media (max-width: 1279px) {
  .gallery { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .site-header { gap: 22px; }
  .scope-nav { gap: 0; }
  .scope-nav button { padding-inline: 11px; }
  .brand { font-size: 22px; }
  .hero-art { width: 440px; right: 25px; }
  #categories { gap: 0; }
  #categories button { padding-inline: 9px; }
  .display-tools { gap: 8px; }
  .detail-layout { grid-template-columns: minmax(0,1fr) 420px; }
}
@media (min-width: 1800px) {
  .gallery { column-gap: 28px; }
  .hero-art { width: 610px; right: calc(var(--page) + 30px); }
  .hero { height: 256px; }
}
@supports not (font-size-adjust: from-font) { body { line-height: 1.7; } .prompt-section pre { line-height: 1.9; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none!important; scroll-behavior: auto!important; } }
/* Theme picker and pigment details share the current page palette. */
:root { color-scheme: light; accent-color: var(--accent); }
.theme-picker { position: relative; justify-self: end; font-size: 17px; }
.theme-picker summary { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 7px 11px; border: 1px solid currentColor; border-radius: 6px 4px 7px 3px; list-style: none; cursor: pointer; white-space: nowrap; }
.theme-picker summary::-webkit-details-marker { display: none; }
.theme-picker summary>svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-chevron { font: 16px Manrope,sans-serif; margin-left: 3px; }
.theme-options { position: absolute; top: calc(100% + 10px); right: 0; width: 250px; padding: 8px; border: 1px solid var(--card-border); border-radius: 5px 8px 4px 6px; background: var(--card) url('assets/paper-relief.svg'); color: var(--ink); box-shadow: 4px 7px 0 var(--field-shadow); }
.theme-options button { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 8px; text-align: left; font-size: 19px; border-radius: 4px; }
.theme-options button:hover, .theme-options button[aria-pressed=true] { background: var(--panel); }
.theme-options small { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.theme-swatch { width: 33px; height: 36px; flex: none; border-radius: 4px 7px 3px 6px; }
.swatch-gouache { background: linear-gradient(135deg,#236bb0 0 50%,#f5a15a 50% 77%,#456a50 77%); }
.swatch-ink { background: #f6efdd url('assets/ink-hatch.svg'); border: 1px solid #244f8d; }
.theme-check { margin-left: auto; opacity: 0; font: 17px Manrope,sans-serif; }
[aria-pressed=true]>.theme-check { opacity: 1; }
.hero-tools { display: flex; align-items: center; gap: 26px; }
.pigment-samples { display: flex; gap: 8px; align-items: center; transform: rotate(-5deg); }
.pigment-samples i { display: block; width: 16px; height: 19px; border-radius: 40% 55% 48% 36%; background: #377fc1 url('assets/paper-grain.svg'); border: 1px solid #fff2d54d; }
.pigment-samples i:nth-child(2) { background-color: var(--orange); transform: rotate(20deg); }
.pigment-samples i:nth-child(3) { background-color: #a3ac59; height: 15px; }
.pigment-samples i:nth-child(4) { background-color: var(--ink); transform: rotate(-17deg); }
.pigment-samples i:nth-child(5) { background-color: var(--card); height: 17px; }
.decor-sprig { position: absolute; right: 40%; bottom: 4px; width: 112px; height: 80px; color: #9da957; opacity: .8; transform: rotate(-13deg); pointer-events: none; }
.ink-flourish { display: none; }
.hero-art--ink { display: none; }
.card-content { position: relative; }
.card-content::before { content: ''; position: absolute; top: -6px; left: 22px; width: 35px; height: 10px; background: #e7b575 url('assets/paper-grain.svg'); opacity: .83; transform: rotate(-5deg); -webkit-mask-image: url('assets/brush-stroke.svg'); mask-image: url('assets/brush-stroke.svg'); -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.style-card:nth-child(3n) .card-content::before { left: auto; right: 24px; transform: rotate(7deg); background-color: #aeb47b; }
/* Blue ink uses linework and hatching throughout the controls and paper frames. */
:root[data-theme="ink"] {
  --paper: #f6efdd;
  --card: #fff9eb;
  --panel: #dce8ef;
  --ink: #244f8d;
  --muted: #49658a;
  --line: #91a7bd;
  --accent: #244f8d;
  --orange: #244f8d;
  --olive: #dce8ef;
  --accent-wash: #dce8ef;
  --sky: #f6efdd;
  --sky-text: #244f8d;
  --sky-hover: #dce8ef;
  --sky-highlight: #244f8d;
  --field: #fff9eb;
  --field-border: #49658a;
  --field-shadow: #244f8d20;
  --card-border: #91a7bd;
  --card-shadow: #244f8d18;
  --label-paper: #fff9ebed;
  --action: #244f8d;
  --selection: #d2e2ef;
  --status-positive: #244f8d;
  --dialog-shadow: #244f8d38;
  --backdrop: #18385f8c;
  --viewer: #e3e9e8;
  --tag-paper: #dce8ef;
  --prompt-paper: #f6f1e4;
  --lightbox: #173760;
  --lightbox-text: #f6efdd;
  --focus: #244f8d;
}
[data-theme="ink"] .sky-shell { border-bottom: 3px double var(--ink); }
[data-theme="ink"] .sky-shell::before { mix-blend-mode: multiply; opacity: .7; }
[data-theme="ink"] .sky-shell::after { content: ''; position: absolute; inset: auto 0 -9px; height: 6px; background: url('assets/ink-hatch.svg'); pointer-events: none; }
[data-theme="ink"] .paper-shore { display: none; }
[data-theme="ink"] .hero-art--gouache, [data-theme="ink"] .decor-sprig { display: none; }
[data-theme="ink"] .hero-art--ink { display: block; width: 580px; right: var(--page); top: -14px; height: 260px; }
[data-theme="ink"] .ink-flourish { display: block; position: absolute; right: 39%; bottom: 25px; width: 145px; height: 55px; opacity: .55; pointer-events: none; }
[data-theme="ink"] .sky-star { display: none; }
[data-theme="ink"] .title-spark { color: var(--ink); }
[data-theme="ink"] .scope-nav button::before, [data-theme="ink"] #categories button::before, [data-theme="ink"] .source-toggle button::before, [data-theme="ink"] .section-heading button::before, [data-theme="ink"] .empty button::before { -webkit-mask-image: none; mask-image: none; border-radius: 2px; }
[data-theme="ink"] .scope-nav button::before { inset: auto 10px 3px; height: 5px; }
[data-theme="ink"] .scope-nav button:hover::before { background: var(--panel); }
[data-theme="ink"] .scope-nav button.active::before { background: var(--ink) url('assets/ink-hatch.svg'); }
[data-theme="ink"] .search-box { border-radius: 1px; box-shadow: 4px 4px 0 var(--field-shadow); border: 1px solid var(--ink); outline: 1px solid #91a7bd; outline-offset: 3px; }
[data-theme="ink"] .search-box:focus-within { outline-color: var(--ink); outline-width: 2px; }
[data-theme="ink"] .pigment-samples { transform: none; }
[data-theme="ink"] .pigment-samples i { border-color: #91a7bd; border-radius: 1px; background-color: var(--paper); }
[data-theme="ink"] .pigment-samples i:nth-child(2) { background: #244f8d; transform: none; }
[data-theme="ink"] .pigment-samples i:nth-child(3) { background: #5e83ad; }
[data-theme="ink"] .pigment-samples i:nth-child(4) { background: #a1bdd3; transform: none; }
[data-theme="ink"] .theme-picker summary, [data-theme="ink"] .theme-options { border-radius: 1px; }
[data-theme="ink"] .theme-options { border-color: var(--ink); box-shadow: 4px 5px 0 var(--field-shadow); }
[data-theme="ink"] #categories button.active::before { inset: 3px; border: 1px solid var(--ink); background: var(--panel); }
[data-theme="ink"] .source-toggle { border-color: var(--ink); }
[data-theme="ink"] .source-toggle button.active { color: var(--card); }
[data-theme="ink"] .source-toggle button.active::before { background: var(--ink); }
[data-theme="ink"] .card-content { border-radius: 1px; border-color: var(--line); box-shadow: 4px 5px 0 var(--field-shadow); }
[data-theme="ink"] .card-content::before, [data-theme="ink"] .style-card:nth-child(3n) .card-content::before { top: -4px; left: 16px; right: auto; width: 45px; height: 7px; background: var(--card) url('assets/ink-hatch.svg'); transform: none; opacity: 1; -webkit-mask-image: none; mask-image: none; border-inline: 1px solid var(--ink); }
[data-theme="ink"] .cover-button, [data-theme="ink"] .card-save { border-radius: 1px; }
[data-theme="ink"] .card-save[aria-pressed=true] { color: var(--card); }
[data-theme="ink"] .card-save[aria-pressed=true] svg { fill: var(--ink); }
[data-theme="ink"] .detail { border-color: var(--ink); border-radius: 2px; }
[data-theme="ink"] .viewer { background: var(--viewer) url('assets/ink-hatch.svg'); }
[data-theme="ink"] .section-heading button, [data-theme="ink"] .empty button { color: var(--card); }
[data-theme="ink"] .section-heading button::before, [data-theme="ink"] .empty button::before { background: var(--ink); }
[data-theme="ink"] .section-heading button:hover::before { background: #3869a4; }
[data-theme="ink"] .prompt-section pre, [data-theme="ink"] .prompt-section select, [data-theme="ink"] .viewer-tabs button, [data-theme="ink"] .detail-tags span { border-radius: 1px; }
[data-theme="ink"] .lightbox-close { color: var(--card); }
[data-theme="ink"] #toast { color: var(--card); }
@media (max-width: 1450px) {
  .site-header { gap: 14px; }
  .brand { font-size: 22px; }
  .scope-nav { gap: 2px; }
  .scope-nav button { padding-inline: 8px; font-size: 17px; }
  .theme-picker { font-size: 16px; }
  .hero-tools { gap: 17px; }
  .pigment-samples { gap: 6px; }
  .decor-sprig, .ink-flourish { opacity: .55; }
  [data-theme="ink"] .hero-art--ink { width: 480px; }
}
@media (max-width: 1279px) {
  .scope-nav button { padding-inline: 6px; }
  .hero-tools { gap: 14px; }
  .search-box { width: 415px; }
  .pigment-samples i { width: 13px; }
  .decor-sprig, [data-theme="ink"] .ink-flourish { display: none; }
  [data-theme="ink"] .hero-art--ink { width: 430px; right: 20px; }
  .toolbar { gap: 12px; flex-wrap: wrap; }
}
/* Small controls follow the same paper, pigment and ink as the larger surfaces. */
html { scrollbar-color: var(--muted) var(--paper); scrollbar-width: thin; }
.inspector-scroll, .thumbnails, .prompt-section pre { scrollbar-color: var(--muted) var(--prompt-paper); scrollbar-width: thin; }
.theme-options button:focus-visible { outline-color: var(--focus); outline-offset: 1px; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 15px; height: 15px; margin-left: 8px; background: var(--muted); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 5 10 10M5 15 15 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 5 10 10M5 15 15 5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; cursor: pointer; }
.sort-label select { max-width: 142px; min-height: 42px; padding: 7px 10px; border: 1px solid var(--card-border); border-radius: 5px 3px 6px 4px; background: var(--card) url('assets/paper-relief.svg'); color: var(--ink); font-size: 18px; }
.sort-label select:hover, .prompt-section select:hover { border-color: var(--action); }
.prompt-section select { min-height: 44px; font-family: var(--font); font-size: 17px; color: var(--ink); }
select>button { display: flex; align-items: center; min-width: 0; flex: 1; padding: 0; font: inherit; color: inherit; text-align: left; }
selectedcontent { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[data-theme="ink"] .sort-label select { border-radius: 1px; border-color: var(--muted); box-shadow: 2px 2px 0 var(--field-shadow); }
@supports (appearance: base-select) {
  select, select::picker(select) { appearance: base-select; }
  select { gap: 8px; align-items: center; }
  select:open { border-color: var(--action); }
  select::picker-icon { content: '⌄'; color: var(--muted); font: 17px/1 Manrope,sans-serif; transition: transform .15s; }
  select:open::picker-icon { transform: rotate(180deg); }
  select::picker(select) { margin-block: 8px; padding: 6px; min-width: 178px; max-width: min(560px,calc(100vw - 48px)); max-height: min(340px,65dvh); overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--card-border); border-radius: 5px 8px 4px 7px; background: var(--card) url('assets/paper-relief.svg'); color: var(--ink); box-shadow: 3px 5px 0 var(--field-shadow); font: 18px/1.55 var(--font); scrollbar-color: var(--muted) var(--card); scrollbar-width: thin; }
  #prompt-select::picker(select) { min-width: 300px; }
  select option { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 4px 6px 3px 5px; color: var(--ink); background: transparent; white-space: normal; overflow-wrap: anywhere; font: inherit; cursor: pointer; }
  select option::checkmark { content: '✓'; color: var(--action); font: 15px/1 Manrope,sans-serif; }
  select option:checked { background: var(--selection) url('assets/paper-grain.svg'); color: var(--ink); }
  select option:hover, select option:focus-visible { background: var(--panel); color: var(--ink); outline: 1px solid var(--line); outline-offset: -2px; }
  [data-theme="ink"] select::picker(select) { border-radius: 1px; border-color: var(--ink); box-shadow: 3px 4px 0 var(--field-shadow); }
  [data-theme="ink"] select option { border-radius: 1px; }
  [data-theme="ink"] select option:checked { background: var(--panel); border-left: 2px solid var(--ink); }
}