@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

:root{color-scheme:dark;--bg:#0b1115;--panel:#111a1e;--panel-hi:#172226;--ink:#edf3ef;--muted:#8a9894;--dim:#56645f;--line:#293733;--lime:#d6f17a;--orange:#ff9e63;--mono:'DM Mono',monospace;--sans:'Manrope','Noto Sans Thai',sans-serif}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg);scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--sans);background:radial-gradient(ellipse at 80% -8%,#24342c 0,transparent 34rem),radial-gradient(ellipse at 8% 32%,#132329 0,transparent 40rem),var(--bg);min-height:100vh}
button,input{font:inherit}
.fx-app{max-width:1460px;margin:auto;padding:0 clamp(20px,5.4vw,82px)}
.topbar{height:74px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12}
.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:12px;font:500 11px var(--mono);letter-spacing:.13em}
.brand b{color:var(--dim);font-weight:400}.brand-mark{color:var(--lime);font-size:24px;line-height:1}
.engine-tag,.eyebrow,.section-kicker,.stats span,.result-line,.sort-label,.card-index,.card-kind,.card-open,.footer-index{font-family:var(--mono);letter-spacing:.11em}
.engine-tag{color:#b4c0ba;font-size:9px;display:flex;align-items:center;gap:8px}.engine-tag i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 13px #d6f17a88}
.intro{padding:clamp(57px,8vw,116px) 0 53px;position:relative}
.eyebrow{display:flex;gap:14px;align-items:center;font-size:9px;color:var(--lime);letter-spacing:.18em}.eyebrow-rule{height:1px;width:42px;background:#d6f17a65}
h1{font-size:clamp(43px,8.2vw,104px);letter-spacing:-.075em;line-height:.98;margin:24px 0 20px;font-weight:800}
h1 em{font-style:normal;color:var(--lime)}
.intro-copy{color:#abb7b1;line-height:1.8;font-size:14px;margin:0}
.intro-copy strong{color:#e9f0eb;font-weight:600}
.stats{position:absolute;right:0;bottom:58px;display:flex;gap:34px}
.stats div{display:flex;flex-direction:column;gap:5px;min-width:105px;padding-left:14px;border-left:1px solid #d6f17a55}
.stats strong{font-size:21px;letter-spacing:-.04em;font-weight:600}.stats span{font-size:8px;color:var(--muted);white-space:nowrap}
.library{border-top:1px solid var(--line);padding-top:30px}
.library-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}
.section-kicker{font-size:9px;color:var(--lime);letter-spacing:.17em}
.library-head h2{margin:8px 0 0;font-size:24px;letter-spacing:-.045em;font-weight:600}
.search-box{height:42px;width:min(290px,40vw);border:1px solid var(--line);background:#111a1e;border-radius:5px;display:flex;align-items:center;gap:9px;padding:0 11px;color:var(--muted)}
.search-box>span{font-size:21px;line-height:1;color:var(--lime)}.search-box input{min-width:0;width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:11px}.search-box input::placeholder{color:#84928d}.search-box kbd{font:10px var(--mono);border:1px solid #52605b;padding:1px 5px;border-radius:3px;color:#92a09a}
.filters{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.filter{border:1px solid #31413c;background:#10191c;color:#a5b1ac;padding:8px 13px;border-radius:3px;font:10px var(--mono);letter-spacing:.045em;cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.filter:hover{border-color:#93a77e;color:var(--ink)}.filter[aria-pressed=true]{background:var(--lime);border-color:var(--lime);color:#162017;font-weight:500}
.result-line{height:44px;display:flex;align-items:center;justify-content:space-between;color:#b3beb8;font-size:9px}.result-line span:first-child{color:#d7e0da}.sort-label{color:var(--dim);font-size:8px}
.fx-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.fx-card{position:relative;border:1px solid #293833;background:linear-gradient(145deg,#151f22,#0f171a);border-radius:5px;overflow:hidden;min-width:0;transition:transform .2s,border-color .2s,box-shadow .2s}
.fx-card:hover{transform:translateY(-3px);border-color:#74856b;box-shadow:0 18px 45px #0005}
.card-image{display:block;position:relative;width:100%;aspect-ratio:16/9;background:radial-gradient(ellipse,#243640,#10171b 75%);overflow:hidden;cursor:zoom-in;border:0;padding:0}
.card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s,filter .25s}.fx-card:hover .card-image img{transform:scale(1.035);filter:saturate(1.08)}
.preview-unavailable{position:absolute;inset:0;display:grid;place-items:center;color:#a7b6ae;font:10px var(--mono);letter-spacing:.08em}
.image-overlay{position:absolute;inset:0;background:linear-gradient(180deg,#0002,transparent 35%,#06100b99);pointer-events:none}
.card-index{position:absolute;left:12px;top:11px;font-size:8px;color:#f3f4e5;background:#101917a8;padding:5px 7px;border:1px solid #ffffff2c;border-radius:2px}
.card-scan{position:absolute;right:11px;top:12px;border:1px solid #d6f17a72;color:var(--lime);background:#0b1115b0;padding:4px 6px;border-radius:2px;font:8px var(--mono);letter-spacing:.08em}
.card-body{padding:14px 15px 13px}.card-meta{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-kind{font-size:8px;color:var(--lime);letter-spacing:.16em}.card-open{color:#82908a;font-size:8px;white-space:nowrap}
.card-body h3{font-size:19px;line-height:1.2;letter-spacing:-.045em;margin:8px 0 8px;font-weight:600}.card-subtitle{font-size:10px;color:#8d9b95;margin:0;min-height:1.5em}
.card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:13px;padding-top:10px;border-top:1px solid #ffffff0e;color:#7e8d87;font:8px var(--mono);letter-spacing:.06em}.card-asset{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:75%}.card-dot{color:var(--orange);font-size:13px}
.empty-state{color:var(--muted);text-align:center;padding:75px 16px;border:1px dashed var(--line);border-radius:5px}
.page-footer{display:flex;align-items:center;gap:15px;margin:72px 0 28px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.footer-star{color:var(--lime);font-size:18px}.page-footer p{font-size:10px;color:#bdc7c1;line-height:1.8;margin:0}.page-footer p span{color:#73817b}.footer-index{margin-left:auto;color:#596762;font-size:8px;white-space:nowrap}
.preview-dialog{position:fixed;inset:auto;margin:auto;padding:18px;width:min(1040px,92vw);max-height:91vh;overflow:auto;border:1px solid #71856a;background:#0b1115;color:var(--ink);box-shadow:0 25px 100px #000b;border-radius:6px}
.preview-dialog::backdrop{background:#03090bd9;backdrop-filter:blur(8px)}.dialog-close{position:sticky;top:0;float:right;z-index:2;width:34px;height:34px;margin-bottom:-34px;border:1px solid #cad3cb55;background:#111a1e;color:#e8eee9;font-size:24px;line-height:1;cursor:pointer;border-radius:3px}
.dialog-image-wrap{position:relative;background:#10191c}.dialog-image-wrap img{width:100%;max-height:68vh;object-fit:contain;display:block}.frame-corner{position:absolute;width:13px;height:13px;border-color:var(--lime)}.top-left{top:7px;left:7px;border-top:1px solid;border-left:1px solid}.top-right{top:7px;right:7px;border-top:1px solid;border-right:1px solid}.bottom-left{bottom:7px;left:7px;border-bottom:1px solid;border-left:1px solid}.bottom-right{bottom:7px;right:7px;border-bottom:1px solid;border-right:1px solid}
.dialog-copy{padding:17px 2px 0}.dialog-copy h2{margin:7px 0 4px;font-size:28px}.dialog-copy p{font:10px var(--mono);color:#82918a;margin:0}
@media(max-width:980px){.stats{position:static;margin-top:36px;gap:24px}.intro{padding-bottom:35px}.fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fx-app{padding:0 18px}.topbar{height:62px}.engine-tag{font-size:8px}.intro{padding:55px 0 31px}h1{font-size:clamp(41px,12vw,66px)}.intro-copy{font-size:12px}.stats{gap:0;justify-content:space-between}.stats div{min-width:0;padding-left:10px}.stats strong{font-size:17px}.stats span{font-size:7px;letter-spacing:.06em}.library-head{align-items:stretch;flex-direction:column}.library-head h2{font-size:21px}.search-box{width:100%}.filter{padding:8px 10px;font-size:9px}.fx-grid{grid-template-columns:1fr;gap:11px}.card-body h3{font-size:18px}.page-footer{align-items:flex-start;gap:11px;margin-top:50px}.page-footer p{font-size:9px}.footer-index{font-size:7px;margin-top:3px}.preview-dialog{width:96vw;padding:10px}.dialog-copy h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}

/* 2026-10-18 W225: all 337 effects as moving pictures (square, black stage) */
.fx-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.card-image{aspect-ratio:1/1;background:#000;cursor:zoom-in}
.card-image img{object-fit:contain}
.fx-card:hover .card-image img{transform:none;filter:none}
.filters-types{padding-top:10px}
.filters-types .filter[aria-pressed=true]{background:var(--orange);border-color:var(--orange);color:#1d120a}
.chip-count{margin-left:7px;opacity:.65;font-size:9px}
.filter[aria-pressed=true] .chip-count{opacity:.8}
.filter .chip-count:empty{display:none}
.card-body h3{font-family:'Noto Sans Thai',var(--sans);letter-spacing:0}
.card-subtitle{font-family:var(--mono);font-size:9px;letter-spacing:.04em}
.dialog-image-wrap{background:#000}
.dialog-image-wrap img{aspect-ratio:1/1;max-height:70vh;margin:auto}
.dialog-nav{display:flex;justify-content:space-between;gap:10px;padding-top:12px}
.dialog-nav button{border:1px solid #31413c;background:#10191c;color:#d7e0da;padding:8px 14px;border-radius:3px;font:11px var(--mono);cursor:pointer}
.dialog-nav button:hover{border-color:var(--lime);color:var(--ink)}
.dialog-copy h2{font-family:'Noto Sans Thai',var(--sans)}
.dialog-copy p{line-height:1.7;word-break:break-all}
@media(max-width:1200px){.fx-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:980px){.fx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.fx-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.card-body{padding:10px}.card-body h3{font-size:15px}.card-footer{display:none}}
/* dialog centred (inset:auto left it in the top-left corner) and never blown up past 512 px (pictures are 384 px) */
.preview-dialog{inset:0;width:min(640px,94vw)}
.dialog-image-wrap img{width:min(512px,100%);max-height:62vh;height:auto}