:root{color-scheme:light dark;--page:#ecebe7;--card:#faf9f6;--text:#191919;--muted:#66635d;--border:#c7c4bd;--button:#202020;--button-text:#fff;--focus:#356b9a}
*{box-sizing:border-box}
body{margin:0;min-height:100svh;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--page);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif}
.app-version,.copyright{position:fixed;bottom:max(5px,env(safe-area-inset-bottom));z-index:10;color:var(--muted);font-size:.55rem;line-height:1;letter-spacing:.03em;opacity:.55;pointer-events:none;-webkit-user-select:none;user-select:none}.app-version{left:max(7px,env(safe-area-inset-left))}.copyright{right:max(7px,env(safe-area-inset-right))}
main{width:min(720px,100%);min-height:calc(100svh - max(32px,env(safe-area-inset-top)) - max(32px,env(safe-area-inset-bottom)));margin:0 auto;display:grid;grid-template-rows:minmax(18px,1fr) auto minmax(18px,1fr) auto minmax(18px,1fr)}
.stage{grid-row:2;display:block;min-height:0;perspective:1400px}
.card{width:100%;min-height:min(432px,55svh);position:relative;display:grid;padding:clamp(28px,6vw,56px);background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 32px rgba(0,0,0,.08);transform-style:preserve-3d;transition:transform .42s cubic-bezier(.2,.7,.2,1)}
.card.is-flipped{transform:rotateY(180deg)}
.card-face{grid-area:1/1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:32px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.card-back{grid-area:auto;position:absolute;inset:0;padding:clamp(28px,6vw,56px);overflow:auto;justify-content:flex-start;transform:rotateY(180deg)}
.eyebrow{display:flex;flex-wrap:wrap;gap:8px}.tag{margin:0;padding:5px 8px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:.72rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}
.idea{min-height:4.48em;margin:0;display:flex;align-items:center;font-size:clamp(1.8rem,5vw,3.15rem);font-weight:650;line-height:1.12;letter-spacing:-.025em}
.provenance{margin:0;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;color:var(--muted);font-size:.86rem;line-height:1.45;overflow-wrap:anywhere}.lens-link{flex:0 0 auto;color:var(--muted);font-size:inherit;text-decoration-color:var(--border);text-underline-offset:3px}.separator{color:var(--border)}.source{min-width:0;color:inherit;text-decoration-color:var(--border);text-underline-offset:3px}.lens-link:hover,.source:hover{color:var(--text)}
.reference-heading{display:flex;flex-direction:column;align-items:flex-start;gap:12px}.card-back .tag{font-size:.62rem}.reference-title{margin:0;font-size:clamp(1.2rem,3vw,1.7rem);line-height:1.12;letter-spacing:-.015em}.reference-copy{display:grid;gap:16px}.reference-block{margin:0;color:var(--text);font-size:clamp(.84rem,1.8vw,.98rem);line-height:1.45}.reference-label{display:block;margin-bottom:4px;color:var(--muted);font-size:.61rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase}.reference-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto}.reference-actions button{min-height:42px;padding:0 12px;background:transparent;color:var(--text);border-color:var(--border);font-size:.76rem;text-transform:none;letter-spacing:0}.open-reference{color:var(--muted);font-size:.75rem;text-underline-offset:3px}.open-reference:hover{color:var(--text)}
.controls{grid-row:4;width:100%;display:grid;grid-template-columns:max-content max-content minmax(0,1fr) max-content max-content;align-items:center;column-gap:5px;row-gap:7px;padding:18px 20px;border:1px solid var(--border);border-radius:8px}
.filter-separator{color:var(--muted);font-size:1rem;font-weight:400;line-height:1;text-align:center}
.filter-menu{position:relative;width:max-content;min-width:0;display:grid;align-items:stretch}.filter-menu select,.selected-filter{grid-area:1/1}.filter-menu select{position:absolute;z-index:2;inset:0;width:100%;max-width:100%;height:100%;min-height:0;padding:0;opacity:0}.selected-filter{z-index:1;min-width:0;min-height:48px;display:flex;align-items:center;color:var(--text);font-size:.9rem;line-height:1.18;pointer-events:none}.hat-menu{width:max-content}.category-menu{width:fit-content;max-width:100%}.selected-category{white-space:normal;overflow-wrap:anywhere}.category-sizer{grid-area:1/1;min-width:0;overflow:hidden;display:grid;font-size:.9rem;line-height:1.18;visibility:hidden;pointer-events:none}.category-sizer span{grid-area:1/1;white-space:nowrap}.filter-menu:hover .selected-filter{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:4px}.filter-menu:focus-within .selected-filter{text-decoration:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
select{width:auto;min-height:48px;padding:0 26px 0 10px;border:1px solid transparent;border-radius:8px;appearance:none;-webkit-appearance:none;background:transparent;color:var(--text);font:inherit;font-size:.9rem;text-align:left;text-align-last:left;cursor:pointer}
select:hover{text-decoration:underline;text-decoration-color:var(--border);text-underline-offset:4px}
select:focus{border-color:var(--border);background:var(--card);text-decoration:none}
.card-index{min-width:0;color:var(--text);opacity:.65;font-size:.76rem;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
button{min-height:48px;padding:0 16px;border:1px solid var(--button);border-radius:8px;background:var(--button);color:var(--button-text);font:inherit;font-size:.86rem;font-weight:650;letter-spacing:.035em;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none}
.controls button{justify-self:end;margin-left:10px}
select:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px}button:hover{opacity:.88}button:disabled{cursor:not-allowed;opacity:.45}
@media(max-width:620px){main{grid-template-rows:minmax(12px,1fr) auto minmax(12px,1fr) auto minmax(12px,1fr)}.card{min-height:50svh;padding:24px}.card-back{padding:24px}.idea{font-size:clamp(1.8rem,8.5vw,2.75rem)}.controls{grid-template-columns:max-content max-content minmax(0,1fr);gap:5px}.card-index{grid-column:1/3;margin-left:0;text-align:right}.controls button{grid-column:3;margin-left:7px}.selected-filter,.category-sizer{font-size:.78rem}button{padding:0 10px;font-size:.72rem}}
@media(prefers-color-scheme:dark){:root{--page:#151515;--card:#202020;--text:#f1f0ec;--muted:#aaa7a0;--border:#3f3e3a;--button:#f1f0ec;--button-text:#171717;--focus:#79aee0}.card{box-shadow:0 12px 32px rgba(0,0,0,.28)}}
@media(prefers-reduced-motion:reduce){.card{transition:none}}