/* 靈感庫（2026-10-19）。照 DESIGN.md：暗房燈箱，片段是背光幻燈片。
   背光象牙＝唯一的主要動作（隨機 5 則、設定）；紅筆＝選取中的篩選與 focus；黃膠帶＝招牌鏡（已被指定、等著用）。 */
@font-face{font-family:'Geist Mono';src:url('/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-display:swap}
:root{
 --room:#141312;--table:#191816;--table-2:#1f1e1b;--mount:#24221f;--mount-2:#2b2925;--rim:rgba(255,244,226,.10);
 --line:rgba(255,244,226,.09);--line-strong:rgba(255,244,226,.16);
 --ink:#ede9e2;--soft:#b3ada3;--faint:#99938a;--lamp:#ffe9c4;
 --backlight:#e9e4da;--backlight-ink:#17140f;--primary-hover:#fffaf1;
 --marker:#e5573f;--marker-light:#ffb4a4;--tape:#e8b54c;--tape-ink:#2b1f05;
 --sans:-apple-system,'SF Pro Text','Segoe UI Variable Text','Segoe UI','PingFang TC','Microsoft JhengHei UI','Noto Sans TC',sans-serif;
 --mono:'Geist Mono','SF Mono','Cascadia Mono',ui-monospace,'PingFang TC','Microsoft JhengHei UI',monospace;
 --ease:cubic-bezier(.16,1,.3,1);
 --safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);
 color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--room);color:var(--ink);font-family:var(--sans);font-size:14px;-webkit-text-size-adjust:100%}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--marker);outline-offset:2px}
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}

.top{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:12px;padding:calc(10px + var(--safe-top)) 16px 10px;background:rgba(20,19,18,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.back{display:inline-flex;align-items:center;gap:2px;min-height:44px;color:var(--soft);text-decoration:none;white-space:nowrap}
.back:hover{color:var(--ink)}
.title{flex:1;min-width:0}
.title h1{margin:0;font-size:20px;font-weight:700;letter-spacing:-.025em}
.count{margin:2px 0 0;color:var(--faint);font:600 12px/1.2 var(--mono);letter-spacing:.02em}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:0 14px;border:0;border-radius:9px;background:var(--backlight);color:var(--backlight-ink);font-weight:650;white-space:nowrap;transition:background .18s var(--ease),transform .18s var(--ease)}
.primary:hover{background:var(--primary-hover)}
.primary:active{transform:scale(.97)}

.tabs{display:flex;gap:4px;padding:10px 16px 0;max-width:1440px;margin:0 auto}
.tabs button{flex:1;max-width:160px;min-height:40px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--soft);font-weight:600}
.tabs button[aria-selected=true]{background:var(--mount);color:var(--ink);border-color:var(--line-strong)}
#pick-count{color:var(--tape);font-family:var(--mono);font-size:12px}

.filters{display:grid;gap:10px;padding:12px 16px 4px;max-width:1440px;margin:0 auto}
.filters[hidden]{display:none}
#q{width:100%;min-height:44px;padding:0 14px;border:1px solid var(--line-strong);border-radius:11px;background:var(--table);outline:0}
#q:focus{border-color:var(--marker)}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip-group{display:flex;flex-wrap:wrap;gap:6px}
.chip{min-height:34px;padding:0 11px;border:1px solid var(--line);border-radius:999px;background:var(--table);color:var(--soft);font-size:13px;font-weight:600;transition:border-color .15s,color .15s,background .15s}
.chip:hover{color:var(--ink);border-color:var(--line-strong)}
.chip[aria-pressed=true]{background:rgba(229,87,63,.14);border-color:var(--marker);color:var(--marker-light)}
.chip b{font-family:var(--mono);font-weight:700;margin-right:3px}
#f-work{min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--table);color:var(--soft)}
.active{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--faint);font-size:12.5px}
.active button{min-height:30px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--soft)}

main{max-width:1440px;margin:0 auto;padding:12px 16px calc(32px + var(--safe-bottom))}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.grid[hidden],.principles[hidden],.picks[hidden]{display:none}
@media(max-width:640px){.grid{grid-template-columns:1fr;gap:14px}}

.card{display:flex;flex-direction:column;background:var(--mount);border:1px solid var(--rim);border-radius:10px;overflow:hidden;animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.card{animation:none}}
.slide{position:relative;aspect-ratio:16/9;background:#0e0e0e;cursor:pointer}
.slide img,.slide video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slide video{opacity:0;transition:opacity .2s}
.slide.playing video{opacity:1}
.slide.playing img{visibility:hidden}
.slide .dur{position:absolute;right:8px;bottom:8px;padding:2px 6px;border-radius:3px;background:rgba(0,0,0,.66);font:600 11.5px var(--mono);color:#eee}
.slide .sound{position:absolute;left:8px;bottom:8px;width:34px;height:34px;display:none;align-items:center;justify-content:center;border:0;border-radius:999px;background:rgba(0,0,0,.6);color:#eee}
.slide.playing .sound{display:inline-flex}
.slide .tape{position:absolute;left:10px;top:-2px;padding:4px 8px 3px;border-radius:0 0 2px 2px;background:var(--tape);color:var(--tape-ink);font-size:11.5px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.slide .missing{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--faint);font-size:12.5px;text-align:center;padding:12px}
.meta{display:grid;gap:7px;padding:12px 13px 13px}
.meta .work{display:flex;justify-content:space-between;gap:8px;color:var(--faint);font-size:12px}
.meta .work code{font:600 12px var(--mono);color:var(--soft)}
.meta h3{margin:0;font-size:15px;line-height:1.4;font-weight:650;letter-spacing:-.01em}
.meta .why{margin:0;color:var(--soft);font-size:13px;line-height:1.6;font-weight:420}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{min-height:30px;padding:0 9px;border:1px solid var(--line);border-radius:3px;background:var(--table-2);color:var(--soft);font-size:12.5px;font-weight:600}
.pchip b{font-family:var(--mono);color:var(--lamp);margin-right:4px}
.pchip:hover{border-color:var(--line-strong);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.actions button,.actions a{display:inline-flex;align-items:center;gap:5px;min-height:38px;padding:0 11px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--soft);font-size:13px;font-weight:600;text-decoration:none}
.actions button:hover,.actions a:hover{color:var(--ink);border-color:var(--line-strong)}
.actions .icon{width:17px;height:17px}

.principles{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
@media(max-width:640px){.principles{grid-template-columns:1fr}}
.pcard{padding:14px;background:var(--mount);border:1px solid var(--rim);border-radius:10px;display:grid;gap:8px}
.pcard header{display:flex;align-items:baseline;gap:8px}
.pcard header code{font:700 13px var(--mono);color:var(--lamp)}
.pcard h3{margin:0;flex:1;font-size:16px;font-weight:700;letter-spacing:-.015em}
.pcard p{margin:0;color:var(--soft);line-height:1.65;font-weight:420}
.pcard dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;font-size:12.5px}
.pcard dt{color:var(--faint)}.pcard dd{margin:0;color:var(--soft)}
.thumbs{display:flex;flex-wrap:wrap;gap:6px}
.thumbs button{padding:0;border:1px solid var(--line);border-radius:7px;overflow:hidden;width:96px;aspect-ratio:16/9;background:#0e0e0e}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

.picks{display:grid;gap:18px}
.picks h2{margin:0 0 8px;font-size:15px;color:var(--soft);font-weight:650}
.pickrow{display:grid;grid-template-columns:120px 1fr auto;gap:12px;align-items:center;padding:10px;background:var(--mount);border:1px solid var(--rim);border-left:3px solid var(--tape);border-radius:10px}
.pickrow img{width:120px;aspect-ratio:16/9;object-fit:cover;border-radius:6px;background:#0e0e0e}
.pickrow b{display:block;font-size:14px}
.pickrow span{color:var(--soft);font-size:12.5px;line-height:1.5}
.pickrow button{min-height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--soft)}
@media(max-width:520px){.pickrow{grid-template-columns:88px 1fr}.pickrow img{width:88px}.pickrow button{grid-column:1/-1}}

.empty{color:var(--faint);text-align:center;padding:48px 16px;line-height:1.7}
dialog{width:min(440px,calc(100vw - 32px));padding:0;border:1px solid var(--line-strong);border-radius:16px;background:var(--table);color:var(--ink)}
dialog::backdrop{background:rgba(0,0,0,.6)}
dialog form{display:grid;gap:12px;padding:18px}
dialog h2{margin:0;font-size:18px}
.pick-what{margin:0;color:var(--soft);font-size:13px;line-height:1.5}
dialog label{display:grid;gap:5px;color:var(--soft);font-size:12.5px}
dialog input,dialog select,dialog textarea{min-height:42px;padding:8px 10px;border:1px solid var(--line-strong);border-radius:8px;background:var(--room);color:var(--ink)}
dialog textarea{resize:vertical}
.hint{margin:0;color:var(--faint);font-size:12px;line-height:1.5}
.dialog-actions{display:flex;justify-content:flex-end;gap:8px}
.dialog-actions button:not(.primary){min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:9px;background:transparent;color:var(--soft)}
.toast{position:fixed;left:50%;bottom:calc(20px + var(--safe-bottom));transform:translateX(-50%);max-width:calc(100vw - 32px);padding:10px 14px;border-radius:10px;background:var(--backlight);color:var(--backlight-ink);font-weight:650;box-shadow:0 8px 24px rgba(0,0,0,.4);z-index:20}
@media(pointer:coarse){.chip{min-height:40px}.pchip{min-height:36px}}
.card.d0{animation-delay:0ms}.card.d1{animation-delay:30ms}.card.d2{animation-delay:60ms}.card.d3{animation-delay:90ms}.card.d4{animation-delay:120ms}.card.d5{animation-delay:150ms}.card.d6{animation-delay:180ms}.card.d7{animation-delay:210ms}.card.d8{animation-delay:240ms}.card.d9{animation-delay:270ms}.card.d10{animation-delay:300ms}.card.d11{animation-delay:330ms}
.sprite{position:absolute;width:0;height:0}
@media(max-width:640px){
 .top{gap:8px;padding-left:12px;padding-right:12px}.back span{display:none}
 .title h1{font-size:18px}.count{font-size:11px}
 #shuffle span{display:none}#shuffle{width:44px;padding:0}
 .filters{gap:8px;padding-top:10px}
 .chip-group{gap:5px}.chip{min-height:36px;padding:0 10px;font-size:12.5px}
 #f-work{min-height:36px;font-size:12.5px}
}