/* Linnea — art site. A quiet, gallery-room look. */
.piece-open { display:block; width:100%; padding:0; border:0; background:transparent; cursor:zoom-in; border-radius:6px; }
.piece-open:focus-visible { outline:2px solid #d9a1b0; outline-offset:4px; }
.art-viewer { box-sizing:border-box; width:max-content; max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); padding:8px; border:1px solid #785361; border-radius:14px; background:#201b20; color:#eee4e8; box-shadow:0 20px 80px #0009; }
.art-viewer::backdrop { background:#09070bb3; }
.art-viewer-body > img { display:block; width:auto; height:auto; max-width:min(calc(100vw - 42px),1000px); max-height:calc(100dvh - 94px); object-fit:contain; margin:0; }
:root {
  --bg: #151317;
  --ink: #eee5e8;
  --soft: #bcb0b7;
  --line: #443640;
  --accent: #efafb6;
  --card: #231e25;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; color-scheme: dark; background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 Georgia, "Times New Roman", serif;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 1.1rem 2.5rem;
  border-bottom: 1px solid var(--line);
  background: rgba(21, 19, 23, 0.97);
  position: sticky; top: 0; z-index: 5;
}
nav .wordmark {
  font-size: 1.35rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
nav .wordmark:hover { text-decoration: none; color: var(--accent); }
nav a { color: var(--soft); font-size: 0.95rem; letter-spacing: 0.05em; }
nav a:hover { color: var(--accent); }

header.hero {
  text-align: center;
  padding: 4.5rem 1.5rem 3rem;
}
header.hero h1 {
  font-size: 2.6rem;
  font-weight: normal;
  margin: 0 0 0.6rem;
}
header.hero p {
  color: var(--soft);
  max-width: 34rem;
  margin: 0 auto;
  font-style: italic;
}

main { max-width: 62rem; margin: 0 auto; padding: 0 1.5rem 4rem; }

/* gallery grid */
.gallery {
  display: grid;
  align-items: start;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 2.2rem;
}
.piece {
  background: var(--card);
  border: 1px solid var(--line);
  margin: 0;
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  padding: 0.8rem 0.8rem 1.1rem;
  box-shadow: 0 2px 10px rgba(60, 45, 30, 0.06);
}
.piece img { width: 100%; display: block; }
.piece h3 {
  margin: 0.8rem 0 0.2rem;
  font-size: 1.15rem;
  font-weight: normal;
}
.piece p { margin: 0; color: var(--soft); font-size: 0.95rem; }
.piece .del { display: block; margin-top: 0.6rem; font-size: 0.8rem; }
.empty {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--soft);
  font-style: italic;
  padding: 3rem 0;
}

/* story */
.story { max-width: 40rem; margin: 0 auto; }
.story h1 { font-weight: normal; font-size: 2.2rem; margin-bottom: 1.2rem; }
.story p { margin: 0 0 1.1rem; }

/* upload form */
form.upload { max-width: 30rem; margin: 0 auto; }
form.upload h1 { font-weight: normal; font-size: 2rem; text-align: center; }
form.upload label { display: block; margin-top: 1.2rem; color: var(--soft); font-size: 0.9rem; letter-spacing: 0.05em; }
form.upload input[type=text], form.upload textarea {
  width: 100%;
  margin-top: 0.35rem;
  padding: 0.6rem 0.7rem;
  font: inherit;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
}
form.upload textarea { min-height: 6rem; resize: vertical; }
form.upload input[type=file] { margin-top: 0.35rem; font-size: 0.9rem; }
form.upload button {
  margin-top: 1.6rem;
  width: 100%;
  padding: 0.8rem;
  font: inherit;
  letter-spacing: 0.1em;
  background: #593442;
  color: var(--ink);
  border: 1px solid #80505f;
  cursor: pointer;
}
form.upload button:hover { background: #75495a; }
form.upload #uploadStatus:empty { display: none; }

footer {
  border-top: 1px solid var(--line);
  text-align: center;
  color: var(--soft);
  font-size: 0.85rem;
  padding: 1.5rem;
}

/* Responsive dark gallery and studio journal. */
nav .wordmark { margin-right: auto; }
nav a { min-height: 44px; display: inline-flex; align-items: center; }
nav a[aria-current="page"] { color: var(--ink); }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
main, .story, .blog-layout { width: 100%; }
.piece img { height: auto; border-radius: 6px; }
.piece p, .piece h3, .post-body { overflow-wrap: anywhere; }
form.upload input, form.upload textarea { max-width: 100%; border-radius: 8px; }
form.upload input[type=file] { width: 100%; }
button, input, textarea, summary { touch-action: manipulation; }
button, summary, input[type=file]::file-selector-button { min-height: 44px; }
button { border-radius: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.blog-layout { max-width: 48rem; }
.blog-post { border-bottom: 1px solid var(--line); padding: 0 0 2rem; margin: 0 0 2rem; }
.blog-post time { color: var(--soft); font: .85rem/1.5 system-ui, sans-serif; }
.blog-post h2 { font-weight: normal; line-height: 1.3; font-size: clamp(1.5rem, 4vw, 2rem); margin: .6rem 0 1rem; overflow-wrap: anywhere; }
.post-body { white-space: pre-wrap; }
.post-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.post-actions button, .secondary { background: transparent; color: var(--soft); border: 1px solid var(--line); padding: .45rem 1rem; font: inherit; cursor: pointer; }
.blog-editor { padding: 1rem 1.25rem; border: 1px solid var(--line); background: var(--card); border-radius: 12px; }
.blog-editor summary { cursor: pointer; color: var(--accent); align-content: center; }
.blog-editor form { max-width: none; }
form.upload .secondary { background: transparent; color: var(--ink); border: 1px solid var(--line); margin-top: .75rem; }
#blogStatus:empty { display: none; }
@media (max-width: 700px) {
  nav { gap: .25rem 1rem; padding: .6rem 1rem; position: relative; }
  nav .wordmark { flex-basis: 100%; }
  nav a { font-size: .9rem; letter-spacing: .02em; }
  header.hero { padding: 2.25rem 1rem 2rem; }
  header.hero h1 { font-size: 2rem; }
  main { padding: 0 1rem 2.5rem; }
  .gallery { gap: 1rem; }
  .story h1 { font-size: 1.8rem; }
  .blog-editor { padding: .8rem; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Private browser conversations. */
[hidden] { display: none !important; }
.dm-page { max-width: 52rem; padding-top: 1.5rem; }
.dm-page h1, .dm-page h2 { font-weight: normal; }
.dm-page h2 { font-size: 1.25rem; margin: 0 0 1rem; overflow-wrap: anywhere; }
.dm-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: 12px; background: var(--card); margin-bottom: 1rem; min-width: 0; }
.dm-muted { color: var(--soft); }
.dm-page label { display: block; margin: .6rem 0 .3rem; }
.dm-page input, .dm-page textarea { display: block; width: 100%; min-width: 0; background: var(--bg); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; padding: .7rem; font: inherit; }
.dm-page textarea { resize: vertical; }
.dm-page button { min-height: 44px; font: inherit; cursor: pointer; padding: .55rem .9rem; margin-top: .65rem; color: var(--ink); background: #593442; border: 1px solid #80505f; }
.dm-page button:disabled { opacity: .55; cursor: default; }
.dm-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; }
.dm-thread { height: clamp(14rem, 45vh, 28rem); overflow-y: auto; overscroll-behavior: auto; touch-action: pan-y pinch-zoom; -webkit-overflow-scrolling: touch; padding: .5rem 0; margin-bottom: .7rem; cursor: grab; }
.dm-card { touch-action: pan-y pinch-zoom; }
.dm-grabbing, .dm-grabbing * { cursor: grabbing !important; user-select: none !important; -webkit-user-select: none !important; }
.dm-page input, .dm-page textarea { -webkit-user-select:text !important; user-select:text !important; -webkit-touch-callout:default !important; touch-action:auto; font-size:16px; }
.dm-message { border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; margin: 0 2rem .75rem 0; background: var(--bg); }
.dm-message.dm-mine { margin-left: 2rem; margin-right: 0; background: #34242e; }
.dm-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: .35rem 0; }
.dm-message time { color: var(--soft); font: .75rem/1.5 system-ui, sans-serif; }
.dm-reference { display: block; max-width: 100%; height: auto; max-height: 22rem; object-fit: contain; border-radius: 8px; margin: .6rem 0; }
.dm-message a { display: block; font-size: .85rem; margin: .35rem 0; }
.dm-page .dm-image-preview { display: block; background: var(--bg); border: 1px solid var(--line); max-width: 100%; }
.dm-image-preview .dm-preview { width: 120px; max-height: 120px; image-rendering: pixelated; filter: blur(2px); }
.dm-image-preview span { display: block; color: var(--soft); font-size: .8rem; }
.dm-delete-image { display: block; }
.blog-media { margin: .8rem 0; min-width: 0; }
.blog-media img, .blog-media video { display: block; width: 100%; height: auto; border-radius: 8px; background: #151317; }
.blog-discussion { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: .8rem; }
.blog-discussion > summary { cursor: pointer; min-height: 44px; color: var(--accent); }
.blog-comment { border: 1px solid var(--line); border-radius: 10px; padding: .8rem; margin: .8rem 0; min-width: 0; }
.comment-author { font: .8rem/1.5 system-ui,sans-serif; color: var(--soft); overflow-wrap: anywhere; }
.linnea-comment > .comment-author { color: var(--accent); }
.comment-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-replies { margin-left: .5rem; padding-left: .5rem; border-left: 1px solid var(--line); }
.comment-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.blog-comment-form label { display: block; margin: .8rem 0 .3rem; }
.blog-comment-form textarea { width: 100%; min-width: 0; font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .6rem; resize: vertical; }
.blog-comment-form input[type=file] { width: 100%; max-width: 100%; font-size: 16px; }
.blog-comment-form button, .comment-actions button, .draft-media button { min-height: 44px; font: inherit; color: var(--ink); background: #593442; border: 1px solid #80505f; border-radius: 8px; padding: .45rem .75rem; margin-top: .5rem; cursor: pointer; }
.draft-media { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; align-items: center; overflow-wrap: anywhere; }
.comment-status:empty, #blogPageStatus:empty { display: none; }
.owner-badge { color: var(--accent); border: 1px solid var(--line); border-radius: 999px; padding: .15rem .6rem; font: .8rem/1.5 system-ui,sans-serif; }
.dm-card summary { cursor: pointer; min-height: 44px; color: var(--accent); }
#dmRecoveryCode { font: 16px/1.6 ui-monospace, monospace; }
#dmStatus:empty { display: none; }
.dm-owner { max-width: 76rem; }
.dm-layout { display: grid; grid-template-columns: 17rem minmax(0,1fr); gap: 1rem; }
.dm-visitors { max-height: 40rem; overflow-y: auto; min-width: 0; }
.dm-page .dm-visitor { width: 100%; text-align: left; display: block; margin-top: 0; margin-bottom: .5rem; border-color: var(--line); background: var(--card); }
.dm-visitor strong, .dm-visitor span { display: block; overflow-wrap: anywhere; }
.dm-visitor span { color: var(--soft); font-size: .85rem; }
.dm-page .dm-visitor[aria-pressed="true"] { border-color: var(--accent); background: #34242e; }
@media (max-width: 800px) { .dm-layout { grid-template-columns: 1fr; } .dm-visitors { max-height: 14rem; } .dm-card { padding: .8rem; } .dm-message { margin-right: 1rem; } .dm-message.dm-mine { margin-left: 1rem; } }




.art-viewer-body { display:flex; gap:16px; align-items:center; }
.art-viewer-description { width:clamp(160px,24vw,280px); flex:none; margin:0; white-space:pre-wrap; overflow-wrap:anywhere; max-height:calc(100dvh - 94px); overflow:auto; }
.art-viewer-body:has(.art-viewer-description:not([hidden])) > img { max-width:calc(100vw - 58px - clamp(160px,24vw,280px)); }
.art-editor { width:min(460px,calc(100vw - 32px)); max-height:85dvh; box-sizing:border-box; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:12px; padding:16px; }
.art-editor::backdrop { background:#09070bb3; }
.art-editor label { display:block; margin:10px 0; }
.art-editor input,.art-editor textarea,.art-editor select,.upload select { display:block; width:100%; box-sizing:border-box; padding:10px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; font:inherit; }
.art-edit-button,.art-editor button { min-height:44px; cursor:pointer; background:#593442; color:var(--ink); border:1px solid #80505f; border-radius:6px; padding:8px 14px; }
#gallery > section { margin-bottom:3rem; }
@media (max-width:700px) and (orientation:portrait) {
 .art-viewer-body { flex-direction:column; gap:10px; width:0; min-width:100%; }
 .art-viewer-body > img,.art-viewer-body:has(.art-viewer-description:not([hidden])) > img { max-width:calc(100vw - 42px); max-height:60dvh; }
 .art-viewer-body { width:max-content; }
 .art-viewer-description { width:0; min-width:100%; max-height:20dvh; }
}

.art-viewer { position:fixed; }
.art-viewer-close { position:absolute; top:10px; right:10px; z-index:2; width:44px; height:44px; padding:0; border:1px solid #785361; border-radius:50%; background:#30252ded; color:#eee4e8; font-size:1.8rem; cursor:pointer; }
.art-viewer-info { width:clamp(160px,24vw,280px); flex:none; max-height:calc(100dvh - 42px); overflow:auto; }
.art-viewer-info h2 { margin:0 0 12px; font-size:1.2rem; text-align:center; overflow-wrap:anywhere; padding:0 32px; }
.art-viewer-info .art-viewer-description { width:auto; max-height:none; overflow:visible; text-align:center; }
.art-viewer-body > img,.art-viewer-body:has(.art-viewer-description:not([hidden])) > img { max-width:calc(100vw - 58px - clamp(160px,24vw,280px)); max-height:calc(100dvh - 42px); }
@media (max-width:700px) and (orientation:portrait) {
 .art-viewer-body > img,.art-viewer-body:has(.art-viewer-description:not([hidden])) > img { max-width:calc(100vw - 42px); max-height:70dvh; }
 .art-viewer-info { width:0; min-width:100%; max-height:18dvh; }
 .art-viewer-info .art-viewer-description { width:auto; min-width:0; }
}
@media (max-width:700px) and (orientation:portrait), (max-width:900px) and (pointer:coarse) {
 .art-viewer { position:absolute; top:12px; bottom:auto; margin:0 auto 12px; max-height:none; overflow:visible; }
 .art-viewer-info { max-height:none; overflow:visible; }
 .art-viewer-info .art-viewer-description { max-height:none; overflow:visible; }
}

/* The overlay scrolls; the floating card and its description grow naturally. */
.art-viewer { position:fixed; inset:0; margin:0; width:100%; height:100dvh; max-width:none; max-height:none; padding:12px; border:0; border-radius:0; background:transparent; box-shadow:none; overflow:auto; overscroll-behavior:contain; }
.art-viewer[open] { display:flex; flex-direction:column; align-items:center; }
.art-viewer-card { position:relative; flex:none; width:max-content; max-width:100%; margin:auto 0; padding:8px; border:1px solid #785361; border-radius:14px; background:#201b20; box-shadow:0 20px 80px #0009; }
@media (max-width:700px) and (orientation:portrait), (max-width:900px) and (pointer:coarse) {
 .art-viewer { position:fixed; inset:0; margin:0; max-height:none; overflow:auto; }
 .art-viewer-info { max-height:none; overflow:visible; }
}

.art-position-label { display:inline-flex; align-items:center; gap:8px; margin:8px; }
.art-position { min-height:44px; min-width:60px; background:var(--bg); color:var(--ink); border:1px solid var(--line); border-radius:6px; padding:8px; font:inherit; }
@media (max-width:1100px) and (max-height:600px) and (orientation:landscape) {
 .art-viewer-card { width:calc(100vw - 42px); }
 .art-viewer-body { width:100%; }
 .art-viewer-body > img,.art-viewer-body:has(.art-viewer-description:not([hidden])) > img { max-width:50%; max-height:calc(100dvh - 42px); flex:none; }
 .art-viewer-info { width:auto; min-width:0; flex:1; max-height:none; overflow:visible; }
 .art-viewer-info .art-viewer-description { max-height:none; overflow:visible; }
}

/* Page appearance is published by Linnea; the base palette remains the default. */
body{min-height:100dvh;background-color:var(--bg);background-image:var(--page-image,none);background-size:cover;background-position:center;background-attachment:fixed}
.landing{width:min(1080px,calc(100% - 40px));margin:clamp(46px,9vh,110px) auto 70px}.eyebrow{text-transform:uppercase;letter-spacing:.24em;font:12px/1.5 system-ui,sans-serif;color:var(--accent)}
.landing h1{font-size:clamp(76px,12vw,158px);font-weight:400;line-height:.91;letter-spacing:-.06em;margin:30px 0}.landing h1 em{color:var(--accent);font-weight:400}.landing-intro{max-width:420px;font-size:clamp(18px,2vw,23px)}
.landing-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin:36px 0 72px}.landing-primary{display:inline-flex;gap:35px;padding:15px 22px;border:1px solid var(--accent);border-radius:4px;background:var(--bg)}
.landing-links{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;border-top:1px solid var(--accent);padding-top:22px}.landing-links a{font-size:23px}.landing-links span{display:block;font:13px/1.8 system-ui,sans-serif;color:var(--ink);opacity:.75}
.appearance-page{max-width:760px;margin:48px auto;padding:0 20px}.appearance-form{display:grid;gap:18px}.appearance-form[hidden]{display:none}.appearance-form label{display:grid;gap:8px}.appearance-colors{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.appearance-colors input{width:100%;height:48px;padding:4px}.appearance-form select{padding:12px;background:var(--card);color:var(--ink);border:1px solid var(--line);font:inherit}.appearance-preview{padding:35px;border:1px solid var(--line);border-radius:12px;min-height:220px;background:var(--bg);background-image:var(--page-image,none);background-size:cover;background-position:center;color:var(--ink)}
.blog-layout{display:flex;flex-direction:column}.blog-editor{width:100%;margin:0 0 28px}
@media(max-width:600px){.landing-links{grid-template-columns:1fr;gap:18px}.landing-actions{margin-bottom:46px}.landing{margin-top:48px}.appearance-colors{gap:8px}}

/* Independent page typography; fixed safe font stacks are published by Linnea. */
body,.appearance-preview{font-family:var(--font-body,Georgia,"Times New Roman",serif)}
h1,h2,h3,.wordmark{font-family:var(--font-heading,var(--font-body,Georgia,"Times New Roman",serif))}
.piece h3,.art-viewer-info h2,.blog-post>h2,.landing-links>a,.appearance-preview-title{font-family:var(--font-title,var(--font-heading,var(--font-body,Georgia,"Times New Roman",serif)))}
.art-viewer-description,.post-body,.story>p,.landing-intro,.appearance-preview-description{font-family:var(--font-description,var(--font-body,Georgia,"Times New Roman",serif))}
.appearance-fonts{border:1px solid var(--line);border-radius:10px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:16px;min-width:0}.appearance-fonts legend{color:var(--accent);padding:0 8px}.appearance-fonts>p{grid-column:1/-1;margin:0;font-size:.9rem}.appearance-fonts select{width:100%;min-width:0}.appearance-preview-title{font-size:1.3rem}.appearance-preview-description{line-height:1.6}
@media(max-width:600px){.appearance-fonts{grid-template-columns:1fr}}

.landing-card{position:relative;isolation:isolate;padding:clamp(22px,4vw,48px);border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 60px #0004}.landing-card::before,.landing-card-preview .appearance-preview-content::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--bg);opacity:var(--landing-opacity,.8);z-index:-1;pointer-events:none}.landing-card>:first-child{margin-top:0}.landing-card-preview{padding:20px}.landing-card-preview .appearance-preview-content{position:relative;isolation:isolate;padding:24px;border:1px solid var(--line);border-radius:12px}.appearance-form label[hidden]{display:none}#landingOpacity{width:100%;accent-color:var(--accent)}#landingOpacityControl>span{font-size:.9rem}#landingOpacityValue{font-variant-numeric:tabular-nums}

site-copy{white-space:pre-line}.copy-editor{border:1px solid var(--line);border-radius:12px;padding:16px;min-width:0}.copy-editor summary{cursor:pointer;color:var(--accent);padding:4px 0}.copy-editor label{margin-top:18px;overflow-wrap:anywhere}.copy-editor textarea,.copy-editor input{width:100%;min-width:0;box-sizing:border-box;font:inherit}.copy-editor textarea{resize:vertical;min-height:70px}.copy-content-card{padding:12px 0 24px;border-bottom:1px solid var(--line)}.copy-content-card button{margin-top:12px}.copy-editor>button{margin-top:18px}

.image-quality-panel{grid-column:1/-1;min-width:0}.image-quality-panel[hidden],.image-quality-controls[hidden]{display:none}.image-quality-choice{margin:16px 0;border:1px solid var(--line);border-radius:12px;padding:14px;min-width:0}.image-quality-choice legend{overflow-wrap:anywhere;max-width:100%}.image-quality-enable{display:flex!important;align-items:center;gap:10px}.image-quality-enable input{width:20px!important;flex:0 0 20px}.image-quality-controls{display:grid;gap:14px;margin-top:18px}.image-quality-controls label{display:grid;gap:8px}.image-quality-controls input[type=range]{width:100%;accent-color:var(--accent)}.image-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}.image-comparison figure{margin:0;min-width:0}.image-comparison figcaption{font-size:.85rem;margin-bottom:8px;overflow-wrap:anywhere}.image-compare-well{height:200px;overflow:auto;background:#252128;border-radius:6px}.image-compare-well img{display:block;width:100%;height:100%;object-fit:contain}.image-comparison-zoom img{width:auto;height:auto;max-width:none;max-height:none}.image-size-status{overflow-wrap:anywhere;font-variant-numeric:tabular-nums}.usage-panel{border:1px solid var(--line);border-radius:12px;padding:18px;margin:24px 0}.usage-panel[hidden]{display:none}.usage-panel summary{cursor:pointer;color:var(--accent);font-size:1.2rem}.usage-panel dl{display:grid;grid-template-columns:1fr auto;gap:12px}.usage-panel dd{margin:0;text-align:right}.usage-panel dt{overflow-wrap:anywhere}.usage-total{font-size:1.2rem}.usage-metric{display:grid;grid-template-columns:1fr auto;gap:8px;padding:14px 0;border-bottom:1px solid var(--line)}.usage-metric strong{grid-column:1/-1;font-weight:400;color:var(--muted)}@media(max-width:500px){.image-compare-well{height:150px}.usage-panel dl{grid-template-columns:1fr}.usage-panel dd{text-align:left}.usage-metric{grid-template-columns:1fr}}

.image-comparison figcaption{min-height:2.8em}.usage-panel progress{width:100%;height:14px;accent-color:var(--accent)}

.commission-panel p{white-space:pre-wrap;overflow-wrap:anywhere}.commission-panel label{display:grid;gap:.4rem;margin:.8rem 0}.commission-panel label:has(input[type=checkbox]){display:flex;align-items:start}.commission-panel input[type=checkbox]{width:auto;flex:0 0 auto}.commission-panel fieldset{min-width:0;margin:1rem 0;padding:1rem;border:1px solid #66505e;border-radius:12px}.commission-panel input,.commission-panel textarea,.commission-panel select{max-width:100%;box-sizing:border-box}.commission-panel small{display:block;white-space:pre-wrap;color:var(--muted,#bbaeb8)}