:root{--navy:#141f38;--navy2:#1d2c4e;--gold:#c9a227;--gold2:#e8c95a;--ink:#22283a;--mut:#6b7280;--line:#e3e6ee;--bg:#f4f5f9;--card:#fff}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;background:var(--bg);color:var(--ink);line-height:1.7}header{background:linear-gradient(160deg,var(--navy),var(--navy2));color:white;text-align:center;padding:25px 16px;border-bottom:3px solid var(--gold)}h1{margin:0;font-size:26px}header span{color:var(--gold2)}header p{color:#c9d2e8}.wrap{max-width:760px;margin:auto;padding:0 16px 50px}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;margin-top:16px}.toolnav,.seg,.tabs,.keywords{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0}.toolnav a,.toolnav .on{flex:1 1 100px;text-align:center;border:1px solid var(--gold);border-radius:999px;padding:9px 8px;color:var(--navy);background:white;text-decoration:none;font-size:14px;font-weight:600}.toolnav .on,button[aria-pressed=true],button[aria-selected=true]{background:var(--navy);color:white}button{font:inherit;cursor:pointer;border:1px solid var(--gold);border-radius:10px;background:white;color:var(--navy);padding:10px 14px}.seg button{flex:1}button:focus-visible,a:focus-visible{outline:3px solid var(--gold);outline-offset:4px}.flip{display:block;width:180px;height:300px;padding:0;margin:16px auto;perspective:1000px;border:0;background:transparent}.flip-inner{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .65s}.flip.open .flip-inner{transform:rotateY(180deg)}.side{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;overflow:hidden;background:var(--navy);border:2px solid var(--gold);color:var(--gold2);display:flex;align-items:center;justify-content:center}.front{transform:rotateY(180deg)}.side img{width:100%;height:100%;object-fit:contain}.side img.reverse{transform:rotate(180deg)}.fallback{position:absolute;padding:16px;text-align:center}.side img{position:relative;background:var(--navy)}.side img.missing{visibility:hidden}.keywords span{border-radius:999px;background:#f5efd9;padding:3px 10px;font-size:14px}h2{font-size:19px;color:var(--navy)}h3{font-size:16px}footer{color:var(--mut);font-size:13px;text-align:center;margin-top:28px}footer a{color:var(--navy)}#preview canvas{width:100%;max-width:600px;height:auto;margin-top:12px}.position{color:var(--mut)}[hidden]{display:none!important}@media(prefers-reduced-motion:reduce){.flip-inner{transition:none}}