/* Articles rest directly on a shared matte background; only editing controls have frames. */
.artting-story { position:relative; margin:20px 0 70px; }
.artting-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.artting-tabs .button { min-width:0; min-height:62px; padding:10px 8px; font-family:"CAGA Pixel",var(--font-sans-cjk); font-size:22px; --pixel-face:#13212c; }
.artting-tabs [aria-selected=true] { --pixel-face:#244957; color:#e6fcff; box-shadow:inset 0 -4px #5ba0b2; }
.artting-article-toolbar { display:flex; justify-content:flex-end; min-height:20px; margin:24px 0 30px; }
.artting-updated { color:#7796aa; font-size:12px; }
.artting-article { padding:0 clamp(0px,2vw,28px) 48px; background:transparent; border:0; min-height:180px; }
.artting-article:focus-visible { outline:3px solid var(--pixel-focus); outline-offset:8px; }
.article-text { color:#cbdfe7; font-size:var(--article-size,18px); line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; margin:24px 0; }
.article-font-pixel { font-family:"CAGA Pixel",var(--font-sans-cjk); }
.article-font-sans { font-family:var(--font-sans-cjk); }
.article-media { margin:32px auto; width:var(--media-width,100%); max-width:100%; }
.article-media img,.article-media video { width:100%; height:auto; display:block; background:#080e15; object-fit:contain; }
.article-media figcaption { color:#91acbc; font-size:13px; text-align:center; line-height:1.8; margin:14px 0 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.article-empty { color:#7e9aaa; font-family:"CAGA Pixel",var(--font-sans-cjk); font-size:20px; text-align:center; padding:28px 0; line-height:1.9; }
.artting-article>:first-child { margin-top:0; }
.artting-article>:last-child { margin-bottom:0; }
.artting-editor { width:min(1000px,calc(100% - 32px)); max-height:calc(100svh - 36px); }
.artting-editor fieldset { border:0; padding:0; margin:0; min-width:0; display:grid; gap:22px; }
.article-edit-block { padding:22px; margin:0 0 20px; background:var(--pixel-grain) #111f2b; border:10px solid transparent; border-image:url('/art/voxel-rim.svg') 28 / 10px / 0 stretch; background-clip:padding-box; display:grid; gap:14px; }
.article-block-bar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; color:#bddce4; }
.article-block-bar>div { display:flex; gap:6px; }
.article-format { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.article-format label,.article-edit-block>label,.gallery-edit-controls>label:not(.button) { display:grid; gap:7px; font-size:12px; color:#90acbf; min-width:0; }
.artting-editor textarea { min-height:150px; }
.article-edit-media { background:#080d14; width:var(--media-width,100%); margin-inline:auto; }
.article-width-control { grid-template-columns:1fr auto; align-items:center; }
.article-width-control input,.article-width-control small { grid-column:1/-1; }
.article-width-control input[type=range] { width:100%; min-height:32px; padding:0; border:0; accent-color:#9cdde9; cursor:ew-resize; }
.article-width-control output { color:#d4eff5; font-variant-numeric:tabular-nums; }
.article-width-control small { color:#8fa5b7; font-size:12px; line-height:1.7; }
.article-edit-media img,.article-edit-media video { display:block; width:100%; max-height:330px; object-fit:contain; }
.article-add-actions,.article-publish-bar,.gallery-edit-controls { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.article-publish-bar { justify-content:flex-end; }
.article-file-button { position:relative; overflow:hidden; cursor:pointer; }
.article-file-button input { position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
.article-file-button:focus-within { outline:3px solid var(--pixel-focus); outline-offset:-9px; }
.article-replace { display:block!important; position:relative; min-height:44px; text-align:center; }
.article-draft-preview { padding:24px; }
.artting-editor [hidden] { display:none!important; }
.artting-editor .form-message { font-size:13px; }
.artting-editor fieldset:disabled .article-file-button { opacity:.5; cursor:wait; }
.gallery-edit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.gallery-edit-item { min-width:0; padding:9px; background:var(--pixel-grain) #15212d; clip-path:var(--pixel-cut-small); box-shadow:inset 0 -4px #09121d; }
.gallery-edit-item.is-selected { background-color:#274655; }
.gallery-edit-item>button { display:block; width:100%; padding:0; color:#c4dce7; background:none; border:0; cursor:pointer; }
.gallery-edit-item>button>span:last-child { display:block; margin:8px 0; font-size:12px; }
.gallery-edit-thumb { width:100%; aspect-ratio:16/9; }
.gallery-edit-item>div { display:flex; justify-content:center; gap:4px; }
.gallery-edit-item .small-button { padding:3px 7px; }
.gallery-edit-controls>label:not(.button) { flex:1; min-width:150px; }
@media(max-width:700px) {
  .artting-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
  .artting-tabs .button { font-size:20px; min-height:54px; }
      .artting-article { padding:0 0 32px; border:0; }
  .artting-editor { width:calc(100% - 20px); max-height:calc(100svh - 20px); }
  .article-edit-block { padding:12px; border-width:8px; border-image-width:8px; }
  .article-format { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .gallery-edit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .gallery-edit-item .small-button { padding:2px 5px; }
  .artting-editor .modal-content { padding:12px 0; }
}

/* A single pixel image/pencil opens a small, labelled editing palette. */
.project-detail-topbar { position:relative; z-index:5; display:flex; align-items:center; justify-content:space-between; min-height:48px; gap:20px; }
.artting-tools { position:relative; flex:0 0 auto; }
.artting-tools-trigger { display:grid; place-items:center; list-style:none; width:48px; height:48px; min-height:0; padding:3px; cursor:pointer; --pixel-face:#152430; }
.artting-tools-trigger::-webkit-details-marker { display:none; }
.artting-tools svg { width:26px; height:26px; flex:none; shape-rendering:crispEdges; pointer-events:none; }
.artting-tools-menu { position:absolute; right:0; top:calc(100% + 12px); width:min(310px,calc(100vw - 40px)); padding:10px; border:10px solid transparent; border-image:url('/art/voxel-rim.svg') 28 / 10px / 0 stretch; background:var(--pixel-grain) #101a25; background-clip:padding-box; box-shadow:0 14px 32px #0009; }
.artting-tools:not([open]) .artting-tools-menu { display:none; }
.artting-tools-heading { margin:6px 8px 12px; color:#91abbc; font-family:"CAGA Pixel",var(--font-sans-cjk); font-size:16px; }
.artting-tools-menu button { display:flex; align-items:center; gap:14px; width:100%; padding:12px 8px; border:0; background:transparent; color:#96bdcd; cursor:pointer; text-align:left; clip-path:var(--pixel-cut-small); }
.artting-tools-menu button:hover,.artting-tools-menu button:focus-visible { background:var(--pixel-grain) #203541; color:#d0f1f5; }
.artting-tools-menu button:focus-visible { outline:0; box-shadow:inset 0 0 0 3px #a8dff2; }
.artting-tools-menu button span { display:grid; gap:6px; }
.artting-tools-menu strong { font-family:"CAGA Pixel",var(--font-sans-cjk); font-size:18px; color:#d2e6eb; font-weight:400; }
.artting-tools-menu small { font-size:11px; color:#9daebb; line-height:1.5; }
.article-category-label { display:flex; align-items:center; flex-wrap:wrap; gap:12px; margin:20px 0 24px; color:#a8bdcd; font-size:13px; }
.article-category-label select { border:6px solid transparent; border-image:url('/art/voxel-key.svg') 18 / 6px / 0 stretch; background:var(--pixel-grain) #172633; background-clip:padding-box; color:#e1eef4; padding:8px 12px; font-size:16px; font-family:"CAGA Pixel",var(--font-sans-cjk); }

/* The grain becomes visible below the tabs, with square-shaped dissolved edges. */
.project-detail { position:relative; isolation:isolate; }
.project-detail-body { position:relative; isolation:isolate; padding-top:1px; padding-bottom:40px; }
.pixel-dissolve-surface { position:relative; isolation:isolate; --dissolve-start:84px; }
.pixel-dissolve-surface::before,.pixel-dissolve-surface::after { content:""; position:absolute; z-index:-1; pointer-events:none; left:calc((100% - 100vw) / 2); width:100vw; }
.pixel-dissolve-surface::before { top:var(--dissolve-start); height:224px; background-image:var(--pixel-grain),linear-gradient(#03070b,#101923); mask-image:url('/art/detail-dissolve.svg'); mask-size:512px 224px; mask-repeat:repeat-x; }
.pixel-dissolve-surface::after { top:calc(var(--dissolve-start) + 224px); bottom:0; background-image:var(--pixel-grain),linear-gradient(#101923,#121c26 60%,#111923); mask-image:linear-gradient(#000 calc(100% - 140px),transparent); }
.author-works { --dissolve-start:0px; padding:60px 0 120px; min-height:380px; }
.author-works .author-work-heading { border:0; }
.project-detail-body .artting-tabs { position:relative; z-index:1; }
.project-detail-body .world-community { margin-top:18px; }
.project-detail-body .article-text { color:#ccd9e3; }

/* Black stage, two moving ribbons and thin pixel mattes, with no image frame. */
.project-detail .project-gallery { display:block; margin-top:30px; padding:44px 46px; background:#000; }
.project-detail .project-gallery-stage { width:100%; }
.project-detail .project-gallery-viewport { border:0; background:#000; aspect-ratio:16/9; overflow:hidden; }
.project-detail .project-gallery-image { z-index:0; }
.project-gallery-ribbon { position:absolute; left:0; width:100%; height:120px; pointer-events:none; z-index:2; }
.project-gallery-edge { position:absolute; left:0; width:100%; height:48px; pointer-events:none; z-index:1; image-rendering:pixelated; }
.project-gallery-edge[data-dissolve=top] { top:0; }
.project-gallery-edge[data-dissolve=bottom] { bottom:0; }
.project-detail .project-gallery .gallery-arrow { position:absolute; top:50%; margin:0; margin-top:-22px; width:36px; height:44px; min-height:0; border-width:6px; border-image-width:6px; padding:0; --pixel-face:#152530; z-index:4; }
.project-detail .project-gallery [data-gallery-step="-1"] { left:0; }
.project-detail .project-gallery [data-gallery-step="1"] { right:0; }
.project-detail .gallery-arrow svg { width:20px; height:20px; }
.project-detail .project-gallery-count { bottom:-48px; z-index:3; font-size:10px; color:#71838f; letter-spacing:.16em; }
.project-detail .project-gallery + .project-detail-copy { padding-top:32px; padding-bottom:24px; }
.project-detail .project-gallery[data-count="1"] :is(.gallery-arrow,.project-gallery-count) { display:none; }
.project-detail .project-gallery[data-count="1"] { padding-inline:0; }
.project-detail .artting-story .artting-article { border:0; border-image:none; background:none; box-shadow:none; }
@media(max-width:700px) {
  .project-detail { padding-top:24px; }
  .project-detail .project-gallery { padding:28px 0; margin-top:18px; }
  .project-gallery-ribbon { height:72px; }
  .project-gallery-edge { height:28px; }
  .project-detail .project-gallery .gallery-arrow { width:32px; height:40px; margin-top:-20px; border-width:5px; border-image-width:5px; }
  .project-detail .project-gallery [data-gallery-step="-1"] { left:-8px; }
  .project-detail .project-gallery [data-gallery-step="1"] { right:-8px; }
  .project-detail .gallery-arrow svg { width:18px; height:18px; }
  /* Keep the visible key small while retaining a usable touch target. */
  .project-detail .gallery-arrow::after { content:""; position:absolute; inset:-8px; }
  .project-detail .project-gallery-count { bottom:-35px; }
  .project-detail-body { --dissolve-start:136px; }
  .author-works { padding:40px 0 90px; }
  .artting-article-toolbar { margin:20px 0 25px; }
}
@media(prefers-reduced-motion:reduce) {
  .artting-tools-trigger { transition:none; }
}