:root { color-scheme: dark; --bg:#0b0d0f; --panel:#14171a; --stage:#0e1013; --line:#24282d; --text:#e8eaed; --muted:#9aa0a6; --accent:#f2f3f5; }
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; }
button { font:inherit; }
.bar { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:12px; height:56px; padding:0 24px; background:rgba(11,13,15,.86); border-bottom:1px solid var(--line); backdrop-filter:blur(8px); }
.brand { font-size:14px; font-weight:600; text-decoration:none; letter-spacing:.01em; }
.copy { height:30px; padding:0 12px; border:0; border-radius:6px; background:var(--panel); color:#cfd2d6; font-size:12px; cursor:pointer; }
.copy:hover { background:#1b1f23; color:var(--text); }
.wrap { display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:32px; max-width:1240px; margin:0 auto; padding:24px 24px 56px; align-items:start; }
.stage { min-width:0; }
.stage-frame { display:grid; place-items:center; min-height:280px; max-height:calc(100vh - 160px); padding:16px; border-radius:12px; background:var(--stage); }
.stage-frame img { max-width:100%; max-height:calc(100vh - 200px); width:auto; height:auto; object-fit:contain; display:block; border-radius:4px; }
.thumbs { display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; }
.thumb { width:64px; height:64px; padding:0; overflow:hidden; border:1px solid transparent; border-radius:6px; background:var(--panel); cursor:pointer; opacity:.62; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.thumb:hover { opacity:1; }
.thumb[aria-current="true"] { border-color:var(--accent); opacity:1; }
.rail { min-width:0; }
.title { margin:0; font-size:22px; line-height:1.35; font-weight:650; letter-spacing:-.01em; overflow-wrap:anywhere; }
.author { display:flex; align-items:center; gap:10px; margin-top:16px; text-decoration:none; }
.avatar { width:40px; height:40px; flex:0 0 auto; display:grid; place-items:center; overflow:hidden; border-radius:50%; background:var(--panel); color:var(--muted); font-size:16px; font-weight:600; }
.avatar img { width:100%; height:100%; object-fit:cover; display:block; }
.author-name { font-size:14px; font-weight:500; }
.author-hint { color:var(--muted); font-size:12px; }
.author:hover .author-name { text-decoration:underline; text-underline-offset:2px; }
.meta { display:flex; flex-wrap:wrap; gap:4px 10px; margin:10px 0 0; color:var(--muted); font-size:12px; }
.stats { display:flex; flex-wrap:wrap; gap:16px; margin:12px 0 0; color:var(--muted); font-size:12px; }
.stats strong { color:var(--text); font-weight:600; font-variant-numeric:tabular-nums; }
.description { margin:16px 0 0; color:#cfd2d6; font-size:14px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.model { margin:12px 0 0; color:var(--muted); font-size:12px; }
.model a { color:#c7cbd1; text-decoration:none; }
.model a:hover { text-decoration:underline; text-underline-offset:2px; }
.tags { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.tags a { padding:2px 8px; border-radius:4px; background:var(--panel); color:#c7cbd1; font-size:12px; text-decoration:none; }
.tags a:hover { background:#1b1f23; color:var(--text); }
.remix-from { margin:8px 0 0; color:var(--muted); font-size:12px; }
.remix-from a { color:#c7cbd1; text-decoration:none; }
.remix-from a:hover { text-decoration:underline; text-underline-offset:2px; }
.prompt { margin-top:20px; }
.prompt-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.prompt-head h2 { margin:0; font-size:13px; font-weight:600; color:var(--muted); }
.prompt-copy { height:26px; padding:0 10px; border:0; border-radius:6px; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; }
.prompt-copy:hover { background:var(--panel); color:var(--text); }
.prompt-body { margin:8px 0 0; padding:12px; max-height:260px; overflow:auto; border-radius:8px; background:var(--panel); color:#d6d9dd; font-size:13px; line-height:1.65; white-space:pre-wrap; overflow-wrap:anywhere; }
.cta { display:flex; align-items:center; justify-content:center; height:40px; margin-top:24px; border-radius:8px; background:var(--accent); color:#101214; font-size:13px; font-weight:600; text-decoration:none; }
.cta:hover { background:#fff; }
.open-app { display:flex; align-items:center; justify-content:center; height:36px; margin-top:20px; border:1px solid var(--line); border-radius:8px; color:#cfd2d6; font-size:13px; text-decoration:none; }
.open-app:hover { background:var(--panel); color:var(--text); }
.footer { margin-top:16px; padding-top:16px; border-top:1px solid var(--line); color:#7f858c; font-size:12px; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.footer a { color:var(--muted); text-decoration:none; }
.footer a:hover { color:var(--text); }
.related { margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.related h2 { margin:0 0 8px; font-size:13px; font-weight:600; color:var(--muted); }
.related ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.related a { display:block; overflow:hidden; color:#c7cbd1; font-size:13px; text-decoration:none; text-overflow:ellipsis; white-space:nowrap; }
.related a:hover { color:var(--text); text-decoration:underline; text-underline-offset:2px; }
@media (max-width:1000px) { .wrap { grid-template-columns:minmax(0,1fr); gap:24px; } .stage-frame { max-height:none; } .stage-frame img { max-height:none; } }
@media (max-width:560px) { .bar { padding:0 16px; } .wrap { padding:16px 16px 40px; } .title { font-size:19px; } .stage-frame { padding:8px; } }