:root{color-scheme:dark;--bg:#050505;--line:#232323;--muted:#858581;--ink:#eeeee8;--accent:#e7ed9b}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-size:13px;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{color:inherit;font:inherit;background:none;border:0;cursor:pointer}button:focus-visible,a:focus-visible{outline:1px solid var(--accent);outline-offset:7px}header{height:106px;margin:0 5.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:13px;font-size:15px;letter-spacing:2px}.brand i{width:9px;height:9px;background:var(--accent);box-shadow:7px -7px 0 -2px var(--accent)}.brand-en{font-size:10px;letter-spacing:1.7px;color:var(--muted);margin-left:11px}nav{display:flex;gap:35px;align-items:center}nav a{color:var(--accent)}nav a span{font-size:9px;margin-left:6px}nav button{color:var(--muted)}main{margin:0 8.5%}.intro{padding:82px 0 69px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted);line-height:1.6}.intro h1{font-size:clamp(42px,5.2vw,70px);font-weight:400;line-height:1.3;letter-spacing:3px;margin:27px 0 30px}.intro-bottom{display:flex;justify-content:space-between;align-items:flex-end}.intro-bottom p{color:var(--muted);line-height:1.9;margin:0}.edition{text-align:right;font-size:11px;line-height:2;color:var(--muted)}.edition span{color:#b9b9b2;letter-spacing:2px}.section-label{border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;font-size:10px;letter-spacing:1px;color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.work{display:block;padding:0;text-align:left;width:100%}.art-window{position:relative;aspect-ratio:1 / 1;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center;border:1px solid #121212;transition:border-color .3s}.work:hover .art-window{border-color:#575748}.crop{position:relative;overflow:hidden;flex-shrink:0}.crop img{position:absolute;max-width:none;image-rendering:pixelated;user-select:none}.work-meta{display:flex;align-items:center;justify-content:space-between;padding:20px 0}.work-meta h2{font-weight:400;font-size:13px;margin:0}.work-meta .idx{font:10px monospace;color:#72726e;margin-right:15px}.work-meta .go{color:#666;transition:color .2s,transform .2s}.work:hover .go{color:var(--accent);transform:translate(2px,-2px)}.work-sub{font-size:10px;letter-spacing:1px;color:#777;margin-left:34px}.closing{border-top:1px solid var(--line);margin-top:70px;padding:65px 0 72px;display:flex;align-items:center;gap:25px}.spark{font-size:30px;color:var(--accent)}.closing p{line-height:1.9;color:#b4b4ad}.closing a{margin-left:auto;font-size:11px;color:var(--muted)}footer{margin:0 5.2%;border-top:1px solid var(--line);padding:28px 0 34px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.muted{color:var(--muted)}footer .muted{margin-left:8px;color:#555}dialog{color:var(--ink);background:var(--bg);border:0}#viewer{width:100vw;max-width:none;height:100dvh;max-height:none;padding:0;margin:0}#viewer[open]{display:flex;flex-direction:column}.viewer-header{display:flex;justify-content:space-between;align-items:center;padding:26px 4%;z-index:1;color:#aaa;font-size:11px}.desktop-hint{color:#555;font-size:10px}.stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.stage>.whole{height:min(100%,76vw);width:auto;max-width:100%;object-fit:contain;image-rendering:pixelated}.viewer-bottom{display:flex;justify-content:space-between;align-items:center;padding:20px 5% 35px;gap:20px}.viewer-bottom h2{font-size:25px;font-weight:400;margin:10px 0}.viewer-bottom p{font-size:10px}.viewer-tools{display:flex;gap:35px;align-items:center}.segmented{display:flex;border:1px solid #333;padding:4px;gap:4px}.segmented button{font-size:11px;padding:10px 15px;color:#888}.segmented button[aria-pressed=true]{background:#222;color:var(--ink)}.arrows{display:flex;gap:8px}.arrows button{border:1px solid #333;width:40px;height:40px}.arrows button:hover{border-color:#aaa}#about{padding:60px;max-width:calc(100% - 40px);width:490px;border:1px solid #333}#about::backdrop{background:#000b;backdrop-filter:blur(6px)}#about h2{font-size:32px;font-weight:400}#about p{line-height:2}#about-close{position:absolute;right:20px;top:15px;font-size:24px}@media(min-width:1500px){main{max-width:1300px;margin:auto}}@media(max-width:700px){header{height:80px}.brand-en{display:none}nav{gap:20px}main{margin:0 6%}.intro{padding:54px 0 45px}.intro h1{font-size:47px}.eyebrow{font-size:8px;letter-spacing:1.4px}.edition{font-size:9px}.section-label{font-size:8px;letter-spacing:0}.grid{grid-template-columns:1fr;gap:30px}.closing{margin-top:45px;padding:40px 0}footer{gap:18px;flex-wrap:wrap}footer>span:nth-child(2){display:none}.viewer-bottom{align-items:flex-start;padding-bottom:25px}.viewer-tools{flex-direction:column;gap:15px;align-items:flex-end}.segmented button{padding:9px;font-size:10px}.desktop-hint{display:none}#about{padding:45px 30px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* Keep the collection focused on the animations. */
.work-meta,.work-sub{display:none}

/* A quiet, image-only gallery. */
header,.intro,.section-label,.closing,footer,.viewer-header,.viewer-bottom{display:none}
main{margin:0 8.5%;min-height:100dvh;display:flex;align-items:center}
.collection{width:100%;padding:60px 0}
.grid{gap:32px}
.art-window{border:0;background:#000}
.work:hover .art-window{border:0}
#viewer .stage{cursor:zoom-out}
@media(max-width:700px){main{margin:0 9%}.collection{padding:40px 0}.grid{gap:28px;grid-template-columns:1fr}.art-window{max-width:360px;width:100%;margin:auto}}

/* Subtle feedback without changing the pixel scale. */
.art-window{outline:1px solid transparent;outline-offset:-1px;transition:outline-color .25s ease,background-color .25s ease}
.art-window>.crop{transition:transform .25s ease}
@media(hover:hover){.work:hover .art-window{outline-color:#30302c;background:#080808}.work:hover .art-window>.crop{transform:translateY(-4px) scale(1.2)}}
.work:focus-visible .art-window{outline-color:#525247}
@media(prefers-reduced-motion:reduce){.art-window,.art-window>.crop{transition:none}.work:hover .art-window>.crop{transform:none}}

@media(hover:hover){.work:hover .art-window{outline-color:transparent}}

@media(hover:hover){.work:hover .art-window{background:#000}}

@media(min-width:701px){.grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

@media(min-width:701px){main{width:80%;max-width:800px;margin:0 auto}.grid{gap:24px}}
.art-window{overflow:visible}

.work[draggable=true]{cursor:grab}
.work.dragging{opacity:.35;cursor:grabbing}
.work.drop-target .art-window{box-shadow:inset 0 -2px #77776d}

.category-tabs{display:flex;position:sticky;top:0;z-index:5;align-items:center;justify-content:center;flex-wrap:wrap;gap:24px;padding:25px 5%;background:#050505ed;backdrop-filter:blur(10px)}
.category-tabs button{font-size:12px;color:#777;padding:8px 0;white-space:nowrap}
.category-tabs button.active{color:#eee;border-bottom:1px solid #aaa}
.category-tabs button.category-drop{color:#e7ed9b}
.category-tabs .upload-trigger{font-size:10px;color:#666;margin-left:20px}
.category-empty{display:block;margin:80px auto;color:#666;font-size:12px;padding:30px}
[hidden]{display:none!important}
main{min-height:calc(100dvh - 84px)}
.uploaded-image{max-width:80%;max-height:80%;object-fit:contain;image-rendering:pixelated;transition:transform .25s}
@media(hover:hover){.work:hover .uploaded-image{transform:translateY(-4px) scale(1.2)}}
@media(max-width:700px){.category-tabs{gap:18px;padding:15px 5%}.category-tabs .upload-trigger{margin-left:0}}
.category-tab-group{display:inline-flex;align-items:center;gap:7px}
.category-tabs .category-edit{font-size:13px;color:#565652;padding:8px 2px}
.category-tabs .category-edit:hover{color:#ddd}
.category-name-input{width:120px;max-width:35vw;background:#141414;color:#eee;border:0;border-bottom:1px solid #aaa;padding:8px;font:inherit;font-size:12px;outline:none}

.grid.gb-gallery{gap:10px}
.gb-gallery .uploaded-image{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain}
.gb-gallery .art-window{overflow:hidden}

#viewer .stage{cursor:grab;touch-action:none;user-select:none}
#viewer .stage.panning{cursor:grabbing}
.zoom-tools{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 20px 24px;flex-shrink:0;background:#050505;z-index:2}
.zoom-tools button{border:1px solid #333;border-radius:4px;min-width:38px;height:36px;padding:0 12px;font-size:14px;color:#bbb}
.zoom-tools button:hover{background:#202020;color:#fff}
.zoom-value{min-width:60px;text-align:center;font-size:11px;color:#888;font-variant-numeric:tabular-nums}

button:focus-visible,a:focus-visible{outline:1px solid #555;outline-offset:4px}
.work:focus-visible{outline:none}
.work:focus-visible .art-window{outline-color:transparent}

/* Lift and scale the complete square, including its background. */
.work{position:relative;transition:transform .25s ease}
@media(hover:hover){
 .work:hover{transform:translateY(-4px) scale(1.06);z-index:2}
 .work:hover .art-window>.crop,.work:hover .uploaded-image{transform:none}
}
@media(prefers-reduced-motion:reduce){.work{transition:none}.work:hover{transform:none}}

@media(min-width:701px){.grid.gb-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}

@media(min-width:701px){.grid:not(.gb-gallery){grid-template-columns:repeat(3,minmax(0,1fr))}}

#stage{position:relative}
.pixel-grid{position:absolute;pointer-events:none;transform-origin:top left;background-image:linear-gradient(to right,#ffffff45 1px,transparent 1px),linear-gradient(to bottom,#ffffff45 1px,transparent 1px);z-index:1}
.zoom-tools button[aria-pressed=true]{background:#303030;color:#fff;border-color:#777}

/* Direct nearest-neighbor sampling keeps the source pixel boundaries aligned
   with the grid even at fractional zoom levels. */
#stage img.whole{image-rendering:crisp-edges}
.locked-pixel-canvas{position:fixed;pointer-events:none;z-index:1;image-rendering:pixelated}

.gif-caption{position:absolute;top:calc(100% - 24px);left:0;right:0;text-align:center;font-size:11px;font-weight:400;letter-spacing:.04em;color:#999;opacity:0;transform:translateY(3px);transition:opacity .22s ease,transform .22s ease;pointer-events:none}
.grid:not(.gb-gallery) .work:hover .gif-caption,.grid:not(.gb-gallery) .work:focus-visible .gif-caption{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){.gif-caption{transition:none}}

/* Classic Macintosh-style bitmap arrow, scoped to this website. */
#viewer .stage.panning,.work.dragging{cursor:grabbing}
input,textarea{cursor:text}

/* A smaller starting view, with space around the artwork. */
#viewer .stage>img.whole{width:min(54vw,54dvh);height:min(54vw,54dvh);max-width:100%;object-fit:contain}

#viewer .stage>img.whole{width:min(43vw,43dvh);height:min(43vw,43dvh)}

.viewer-transition-image{position:fixed;z-index:5;pointer-events:none;object-fit:contain;image-rendering:crisp-edges;max-width:none;max-height:none}

/* Keep scrolling native while drawing its scrollbar above the content. */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none;width:0}
.overlay-scrollbar{position:fixed;right:2px;top:3px;bottom:3px;width:7px;z-index:20;pointer-events:none}
.overlay-scrollbar-thumb{position:absolute;left:1px;width:5px;min-height:28px;border-radius:4px;background:#6669;pointer-events:auto;cursor:default;touch-action:none}
.overlay-scrollbar-thumb:hover,.overlay-scrollbar-thumb.dragging{background:#999c}
body:has(#viewer[open]) .overlay-scrollbar{visibility:hidden}

body.gb-theme{background:#242820}
.gb-theme .category-tabs{background:#242820ed}
.gb-theme .gb-gallery .art-window{background:#242820}
@media(hover:hover){.gb-theme .work:hover .art-window{background:#242820}}

/* More breathing room for the GB collection previews. */
.grid.gb-gallery{gap:32px;width:84%;margin:0 auto}
@media(max-width:700px){.grid.gb-gallery{width:100%;gap:28px}}

body,.category-tabs{transition:background-color .25s ease}
@media(prefers-reduced-motion:reduce){body,.category-tabs{transition:none}}
.artwork-rename{position:absolute;right:10px;bottom:9px;color:#aaa;font-size:14px;padding:5px;opacity:0;transition:opacity .18s;cursor:pointer;z-index:3}
.work:hover .artwork-rename,.work:focus-within .artwork-rename{opacity:1}
.artwork-title-input{position:absolute;bottom:10px;left:8%;width:84%;padding:8px;background:#171b16;color:#eee;border:1px solid #666;border-radius:0;font:12px monospace;z-index:4;cursor:text}
@media(hover:none){.artwork-rename{opacity:1}}

@media(max-width:700px){
 .category-tabs{padding-top:max(12px,env(safe-area-inset-top));gap:16px}
 .category-tabs button{min-height:40px}
 main{width:auto}
 .collection{padding:24px 0}
 .grid:not(.gb-gallery){grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
 .grid.gb-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:100%}
 .zoom-tools{gap:6px;padding:12px 8px max(14px,env(safe-area-inset-bottom));flex-wrap:wrap}
 .zoom-tools button{min-width:44px;height:44px;padding:0 10px}
 .zoom-value{min-width:48px}
 #viewer .stage>img.whole{width:78vw;height:62dvh;object-fit:contain}
 .overlay-scrollbar{display:none}
 .artwork-rename{padding:10px}
 .gif-caption{font-size:10px}
}
.onebit-caption{color:#b3b8ae}

/* Minimal game-menu navigation. */
.category-tabs{gap:26px;padding:24px 5%;font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}
.category-tab-group{gap:3px}
.category-tab-group>button:first-child{position:relative;padding:8px 4px 8px 17px;border:0;letter-spacing:.08em;font-size:12px;color:#747870;transition:color .15s}
.category-tab-group>button:first-child.active{border:0;color:#e6e8d9}
.category-tab-group>button:first-child.active::before{content:"";position:absolute;left:3px;top:50%;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:5px solid currentColor;transform:translateY(-50%)}
.category-tab-group>button:first-child:hover{color:#e6e8d9}
.category-tabs .category-edit{opacity:0;font-size:11px;transition:opacity .15s}
.category-tab-group:hover .category-edit,.category-tab-group:focus-within .category-edit{opacity:.65}
.category-tabs>button{font-size:11px;color:#5f655c}
.category-tabs .upload-trigger{font-size:10px;margin-left:4px}
@media(max-width:700px){.category-tabs{gap:12px;padding:12px 3%;padding-top:max(12px,env(safe-area-inset-top))}.category-tab-group>button:first-child{font-size:11px;padding-left:14px}.category-tabs .category-edit{opacity:.4}.category-tab-group{gap:0}}

body.angle-theme{background:#d8d3c8}
.angle-theme .category-tabs{background:#d8d3c8ed}
.angle-theme .category-tab-group>button:first-child{color:#77756c}
.angle-theme .category-tab-group>button:first-child.active,.angle-theme .category-tab-group>button:first-child:hover{color:#34352f}
.angle-theme .category-tabs>button,.angle-theme .category-edit{color:#696b60}
.angle-theme .art-window,.angle-theme .work:hover .art-window{background:transparent}
.angle-theme .artwork-rename{color:#4e5147}

body.angle-theme{background:#242321}
.angle-theme .category-tabs{background:#242321ed}
.angle-theme .category-tab-group>button:first-child{color:#929087}
.angle-theme .category-tab-group>button:first-child.active,.angle-theme .category-tab-group>button:first-child:hover{color:#e6e3da}
.angle-theme .category-tabs>button,.angle-theme .category-edit{color:#969388}
.angle-theme .artwork-rename{color:#b4b0a5}

body.angle-theme{background:#34303d}
.angle-theme .category-tabs{background:#34303ded}

body.angle-theme{background:#c8cbc6}
.angle-theme .category-tabs{background:#c8cbc6ed}
.angle-theme .category-tab-group>button:first-child{color:#666c65}
.angle-theme .category-tab-group>button:first-child.active,.angle-theme .category-tab-group>button:first-child:hover{color:#2d342d}
.angle-theme .category-tabs>button,.angle-theme .category-edit{color:#626a60}
.angle-theme .artwork-rename{color:#465044}

body.angle-theme{background:#202530}
.angle-theme .category-tabs{background:#202530ed}
.angle-theme .category-tab-group>button:first-child{color:#949ba8}
.angle-theme .category-tab-group>button:first-child.active,.angle-theme .category-tab-group>button:first-child:hover{color:#e4e8ef}
.angle-theme .category-tabs>button,.angle-theme .category-edit{color:#929baa}
.angle-theme .artwork-rename{color:#adb7c7}

body.onebit-theme{background:#0b120d}
.onebit-theme .category-tabs{background:#0b120ded}
.onebit-theme .category-tab-group>button:first-child.active,.onebit-theme .category-tab-group>button:first-child:hover{color:#a6c995}

body.gif-theme{background:#000}
.gif-theme .category-tabs{background:#000000ed}
.gif-theme .art-window,.gif-theme .work:hover .art-window{background:#000}

.zoom-tools button[aria-label="关闭大图"]{display:none}

.zoom-tools{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace;gap:14px;padding:18px 20px 26px;background:transparent}
.zoom-tools button{border:0;border-radius:0;background:transparent;min-width:32px;height:32px;padding:0 8px;color:#858b80;font-size:11px;letter-spacing:.06em;transition:color .15s,background-color .15s}
.zoom-tools button:hover{background:transparent;color:#e6e8d9}
.zoom-tools button[aria-label="放大"],.zoom-tools button[aria-label="缩小"]{font-size:17px}
.zoom-value{font-family:inherit;font-size:12px;min-width:48px;color:#d9ddd1;letter-spacing:.04em}
.zoom-tools button[aria-pressed=true]{background:#d9ddd1;color:#10130f;border:0}
.zoom-tools button[aria-label="复位视图"]{margin-left:16px}
@media(max-width:700px){.zoom-tools{gap:8px;padding:12px 8px max(16px,env(safe-area-inset-bottom))}.zoom-tools button{min-width:44px;height:44px}.zoom-tools button[aria-label="复位视图"]{margin-left:6px}}


.frame-panel{flex:0 0 auto;width:min(340px,calc(100vw - 48px));align-self:center;margin:12px 0 0;color:#899080;font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.08em}
.frame-ruler-heading{display:flex;align-items:center;justify-content:space-between;height:28px}
.frame-ruler-heading button{font:inherit;color:#b2baa5;padding:5px 7px;min-width:30px;border:0}
.frame-ruler-heading button:hover{color:#edf1e6}
.frame-current{color:#e1e7d6}.frame-total{color:#626a59}.frame-step-buttons{display:flex;gap:4px}
.frame-ruler{height:30px;position:relative;margin:0 8px}
.frame-ticks{position:absolute;left:0;right:0;top:9px;height:11px;border-bottom:1px solid #4d5545;background:repeating-linear-gradient(to right,#69735d 0px,#69735d 1px,transparent 1px,transparent calc(100% / var(--frame-count)));pointer-events:none}
.frame-range{position:absolute;inset:0;width:100%;height:30px;margin:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:ew-resize;touch-action:none}
.frame-range::-webkit-slider-runnable-track{height:1px;background:transparent}
.frame-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:20px;margin-top:-10px;border:1px solid #dae4cc;background:#c7d4b4;border-radius:0;box-shadow:0 0 0 2px #050505}
.frame-range::-moz-range-track{height:1px;background:transparent}
.frame-range::-moz-range-thumb{width:5px;height:18px;border:1px solid #dae4cc;background:#c7d4b4;border-radius:0}
@media(max-width:700px){.frame-panel{width:calc(100vw - 64px);max-width:340px;margin-top:4px}.frame-ruler-heading button{min-width:44px;min-height:36px}.frame-ruler{height:38px}.frame-range{height:38px}.frame-ticks{top:13px}}

/* Discrete frame cells, like a quiet handheld-game meter. */
.frame-panel{width:min(340px,calc(100vw - 56px));letter-spacing:.1em}
.frame-ruler-heading{height:28px}
.frame-play{font-size:12px!important}
.frame-label{font-size:9px;color:#737d66}
.frame-current{color:#e4e9d9}
.frame-total{color:#68705e}
.frame-ticks{display:none}
.frame-ruler{height:28px;margin:0 10px}
.frame-segments{position:absolute;inset:9px 0;display:flex;align-items:center;justify-content:space-between;pointer-events:none;gap:3px}
.frame-segments i{display:block;flex:1;max-width:9px;height:6px;background:#30392b;border:1px solid #59644d}
.frame-segments i.current{background:#e1e9d4;border-color:#e1e9d4;height:9px}
.frame-segments.dense{gap:2px}
.frame-segments.dense i{border:0;max-width:4px;height:7px;background:#526045}
.frame-segments.dense i.current{height:12px;background:#e1e9d4}
.frame-range{opacity:0;z-index:2}
.frame-ruler:focus-within{outline:1px dotted #7b876d;outline-offset:3px}
@media(max-width:700px){.frame-ruler{height:38px}.frame-segments{inset:13px 0}.frame-ruler-heading{height:36px}}

/* A miniature film strip with square sprocket holes. */
.frame-ruler{height:34px;margin:4px 8px 2px;background:#11150f;border-top:1px solid #48503e;border-bottom:1px solid #48503e}
.frame-ruler::before,.frame-ruler::after{content:"";position:absolute;left:5px;right:5px;height:3px;pointer-events:none;background:repeating-linear-gradient(to right,#8a957b 0,#8a957b 4px,transparent 4px,transparent 12px);opacity:.6}
.frame-ruler::before{top:3px}.frame-ruler::after{bottom:3px}
.frame-segments{inset:10px 5px;gap:2px;align-items:stretch}
.frame-segments i,.frame-segments.dense i{position:relative;max-width:none;flex:1;height:auto;background:transparent;border:0;border-right:1px solid #38412f}
.frame-segments i:last-child{border-right:0}
.frame-segments i.current,.frame-segments.dense i.current{height:auto;background:#c5cfb0;border:0;box-shadow:inset 0 0 0 1px #e3e9d5}
.frame-range{height:34px}
@media(max-width:700px){.frame-ruler{height:42px}.frame-segments{inset:12px 5px}.frame-range{height:42px}.frame-ruler::before,.frame-ruler::after{height:4px}}

/* Minimal handheld selection track. */
.frame-ruler{height:30px;margin:4px 10px;background:transparent;border:0}
.frame-ruler::before,.frame-ruler::after{display:none}
.frame-segments{inset:8px 4px;gap:0;align-items:center;justify-content:space-between}
.frame-segments i,.frame-segments.dense i{position:relative;flex:0 0 3px;max-width:3px;width:3px;height:3px;border:0;background:#5c6950;box-shadow:none}
.frame-segments i.current,.frame-segments.dense i.current{height:3px;background:#dce6ce;border:0;box-shadow:none}
.frame-segments i.current::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:11px;box-sizing:border-box;border:1px solid #c4d0b4;transform:translate(-50%,-50%)}
.frame-segments.dense i{flex-basis:2px;width:2px;max-width:2px;height:2px}
.frame-segments.dense i.current::after{width:8px;height:10px}
.frame-range{height:30px}
@media(max-width:700px){.frame-ruler{height:38px}.frame-segments{inset:12px 4px}.frame-range{height:38px}}

/* Arcade progress slot. */
.frame-ruler{height:22px;margin:8px 9px 6px;background:#11160e;border:1px solid #526044}
.frame-segments{inset:3px;gap:2px;align-items:stretch;justify-content:initial}
.frame-segments i,.frame-segments.dense i{flex:1;max-width:none;width:auto;height:auto;border:0;background:#232e1d;box-shadow:none}
.frame-segments i.passed,.frame-segments.dense i.passed{background:#758864}
.frame-segments i.current,.frame-segments.dense i.current{height:auto;background:#d5e4bf;box-shadow:none}
.frame-segments i.current::after{display:none}
.frame-range{height:22px}
@media(max-width:700px){.frame-ruler{height:28px}.frame-range{top:-7px;height:42px}.frame-segments{inset:4px;gap:2px}}

.zoom-tools button,.frame-ruler-heading button{display:inline-flex;align-items:center;justify-content:center}
.frame-label{font-size:10px;font-variant-numeric:tabular-nums;letter-spacing:.08em}

.zoom-tools button[aria-label="复位视图"]{display:none}

/* Keep frame inspection secondary to the artwork. */
.frame-panel{width:min(240px,calc(100vw - 72px));opacity:.35;transition:opacity .2s ease;margin-top:6px}
.frame-panel:hover,.frame-panel:focus-within{opacity:1}
.frame-ruler{height:15px;margin:4px 8px;background:transparent;border:0}
.frame-segments{inset:5px 0;gap:3px;align-items:center}
.frame-segments i,.frame-segments.dense i,.frame-segments i.passed,.frame-segments.dense i.passed{height:2px;background:#46503e;border:0;box-shadow:none}
.frame-segments i.current,.frame-segments.dense i.current{height:5px;background:#a4b195;box-shadow:none}
.frame-ruler-heading{height:24px}
.frame-label{font-size:9px;color:#77816c}
.frame-ruler-heading button{color:#839076}
.frame-ruler-heading button svg{width:12px;height:12px}
.frame-range{height:24px;top:-4px}
@media(max-width:700px){.frame-panel{width:min(240px,calc(100vw - 72px));opacity:.5}.frame-ruler{height:22px}.frame-segments{inset:9px 0}.frame-range{height:38px;top:-8px}.frame-ruler-heading{height:32px}}
@media(prefers-reduced-motion:reduce){.frame-panel{transition:none}}

/* Star trail: quiet frame points and one tiny pixel star. */
.frame-segments{align-items:center;justify-content:space-between;gap:0}
.frame-segments i,.frame-segments.dense i,.frame-segments i.passed,.frame-segments.dense i.passed{position:relative;flex:0 0 3px;max-width:3px;width:3px;height:3px;background:#43483f;border:0;box-shadow:none}
.frame-segments i.current,.frame-segments.dense i.current{height:3px;background:transparent;box-shadow:none}
.frame-segments i.current::after{content:"";display:block;position:absolute;left:50%;top:50%;width:11px;height:11px;transform:translate(-50%,-50%);border:0;background:#e7e2c8;clip-path:polygon(45% 0,55% 0,55% 27%,73% 27%,73% 45%,100% 45%,100% 55%,73% 55%,73% 73%,55% 73%,55% 100%,45% 100%,45% 73%,27% 73%,27% 55%,0 55%,0 45%,27% 45%,27% 27%,45% 27%)}
.frame-segments.dense i{flex-basis:2px;max-width:2px;width:2px;height:2px}
.frame-segments.dense i.current::after{width:9px;height:9px}

/* A tiny ghost follows quiet paired footprints. */
.frame-segments i,.frame-segments.dense i,.frame-segments i.passed,.frame-segments.dense i.passed{background:transparent}
.frame-segments i::before{content:"";position:absolute;left:0;top:-2px;width:2px;height:3px;background:#505647;box-shadow:3px 3px 0 #505647;opacity:.7}
.frame-segments.dense i::before{width:1px;height:2px;box-shadow:2px 2px 0 #505647}
.frame-segments i.current::before{display:none}
.frame-segments i.current::after,.frame-segments.dense i.current::after{content:"";width:13px;height:14px;background-color:transparent;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14' shape-rendering='crispEdges'%3E%3Cpath fill='%23e7e4d2' d='M4 0h5v1h2v2h1v3h1v8h-2v-2H9v2H7v-2H5v2H3v-2H1v2H0V6h1V3h1V1h2z'/%3E%3Cpath fill='%2320251c' d='M3 4h2v3H3zm5 0h2v3H8zM5 8h3v2H5z'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;clip-path:none;border:0;image-rendering:pixelated}

/* Quiet, practical frame scrubbing. */
.frame-panel{width:min(240px,calc(100vw - 64px));opacity:.45}
.frame-panel:hover,.frame-panel:focus-within{opacity:1}
.frame-step-buttons,.frame-segments,.frame-ticks{display:none}
.frame-ruler-heading{justify-content:space-between;height:28px}
.frame-ruler{height:26px;margin:0 8px;background:none;border:0}
.frame-ruler::before,.frame-ruler::after{display:none}
.frame-range{opacity:1;inset:0;width:100%;height:26px;background:transparent;cursor:ew-resize}
.frame-range::-webkit-slider-runnable-track{height:1px;background:#52594b}
.frame-range::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:11px;margin-top:-5px;border:0;border-radius:0;background:#c3cbb7;box-shadow:none}
.frame-range::-moz-range-track{height:1px;background:#52594b}
.frame-range::-moz-range-thumb{width:7px;height:11px;border:0;border-radius:0;background:#c3cbb7;box-shadow:none}
@media(max-width:700px){.frame-ruler-heading{height:36px}.frame-ruler,.frame-range{height:36px}.frame-range::-webkit-slider-thumb{width:9px;height:15px;margin-top:-7px}.frame-range::-moz-range-thumb{width:9px;height:15px}}

/* Restore the original per-frame ruler. */
.frame-panel{width:min(340px,calc(100vw - 56px));opacity:.55}
.frame-panel:hover,.frame-panel:focus-within{opacity:1}
.frame-step-buttons{display:flex;gap:4px}
.frame-ruler{height:30px;margin:0 8px;background:transparent;border:0}
.frame-ticks{display:block;position:absolute;left:0;right:0;top:9px;height:11px;border-bottom:1px solid #4d5545;background:repeating-linear-gradient(to right,#69735d 0px,#69735d 1px,transparent 1px,transparent calc(100% / var(--frame-count)));pointer-events:none}
.frame-range{top:0;height:30px}
.frame-range::-webkit-slider-runnable-track{height:1px;background:transparent}
.frame-range::-webkit-slider-thumb{width:7px;height:20px;margin-top:-10px;border:1px solid #dae4cc;border-radius:0;background:#c7d4b4;box-shadow:0 0 0 2px #050505}
.frame-range::-moz-range-track{height:1px;background:transparent}
.frame-range::-moz-range-thumb{width:5px;height:18px;border:1px solid #dae4cc;border-radius:0;background:#c7d4b4}
@media(max-width:700px){.frame-ruler,.frame-range{height:38px}.frame-ticks{top:13px}}

/* No visible focus boxes in the image viewer. */
#viewer :focus,#viewer :focus-visible,.frame-ruler:focus-within{outline:none;outline-offset:0}

/* Draw the terminal frame tick at the ruler's right boundary. */
.frame-ticks{border-right:1px solid #69735d;box-sizing:border-box}

.frame-play,.frame-step-buttons{display:none!important}
.frame-ruler-heading{justify-content:center}

.frame-panel.frame-folded{display:none}
.zoom-tools .frame-toggle[aria-expanded=true]{color:#e0e6d5;background:#20251b}

/* Frame controls float over the viewing area without changing its layout. */
.frame-panel{position:absolute;left:50%;bottom:82px;transform:translateX(-50%);margin:0;z-index:3;background:#050505e8;padding:6px 10px 3px;box-sizing:content-box}
@media(max-width:700px){.frame-panel{bottom:calc(78px + env(safe-area-inset-bottom));margin:0}}

.zoom-cluster{display:flex;align-items:center;gap:4px;margin-right:14px}
.zoom-cluster .zoom-value{min-width:42px}
.zoom-cluster button{min-width:28px;padding:0 5px}
.zoom-cluster svg{width:15px;height:15px;stroke-width:1;stroke-linejoin:miter;shape-rendering:crispEdges}
@media(max-width:700px){.zoom-cluster{gap:2px;margin-right:16px}.zoom-cluster button{min-width:40px;min-height:44px}.zoom-cluster .zoom-value{min-width:40px}}
.frame-panel.frame-loading .frame-ruler-heading,.frame-panel.frame-loading .frame-ruler{visibility:hidden}
.frame-panel.frame-loading::after{content:attr(data-status);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#929b87;font:10px "SFMono-Regular",Consolas,monospace;letter-spacing:.04em}

.category-edit,.upload-trigger,.category-empty,.category-tabs>button,.artwork-rename,.artwork-title-input{display:none!important}

/* Mobile press-and-hold labels, without native image callouts. */
.work,.work img,#viewer img{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.touch-work-name{position:fixed;z-index:50;max-width:calc(100vw - 24px);padding:7px 10px;background:#171917ed;color:#dbded4;font:11px/1.5 monospace;text-align:center;pointer-events:none;box-shadow:0 0 0 1px #ffffff18;overflow-wrap:anywhere}
.touch-work-name[hidden]{display:none}
@media(hover:none){.grid .work:hover .gif-caption{opacity:0}.work{touch-action:pan-y}}

/* Two artworks per row in the 45-degree collection. */
body.angle-theme #grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Spacious 45-degree previews with larger artwork. */
body.angle-theme #grid{gap:16px}
.angle-theme .uploaded-image{max-width:90%;max-height:90%}
@media(max-width:700px){body.angle-theme #grid{gap:12px}}