:root{--bg:#fff;--fg:#000;--mute:#5c5c5c;--line:#000;--rule:#d4d4d4;--fill:#f4f4f4;--serif:"IBM Plex Serif",Georgia,serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,monospace}
*{box-sizing:border-box;border-radius:0}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:13px/1.45 var(--mono)}
/* The X player is a fixed 480px frame that doesn't scroll: fill it exactly and scroll inside the panel. */
main{height:100vh;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;border:1px solid var(--line)}
header{display:flex;align-items:center;gap:8px;padding:8px 10px;border-bottom:1px solid var(--line)}
.title{flex:1;min-width:0;display:flex;align-items:baseline;gap:8px}
.title .logo{width:20px;height:20px;align-self:center;border:1px solid var(--line)}
.title b{font:600 15px var(--serif);letter-spacing:.02em}
#via{color:var(--mute);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}
nav button{border:0;border-right:1px solid var(--line);padding:7px 2px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;background:var(--bg)}
nav button:last-child{border-right:0}
nav button.on{background:var(--fg);color:var(--bg)}
#panels{flex:1;min-height:0;position:relative}
.panel{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:10px 12px 14px}
.panel[hidden]{display:none}
h2{font:600 12px var(--mono);text-transform:uppercase;letter-spacing:.08em;margin:12px 0 4px}
.panel>h2:first-child,.boardhead h2{margin-top:0}
p{margin:0 0 8px}
#p-xp p,#p-link>p{font:14px/1.5 var(--serif)}
button,.btn{font:inherit;border:1px solid var(--line);background:var(--bg);color:var(--fg);padding:8px 12px;cursor:pointer;text-decoration:none;display:inline-block;text-align:center}
button:not(:disabled):hover,.btn:hover{background:var(--fill)}
button:disabled{opacity:.4;cursor:default}
.primary{background:var(--fg);color:var(--bg);width:100%;font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.primary:not(:disabled):hover{background:#222}
.tabs{display:grid;grid-template-columns:1fr 1fr;margin-bottom:10px}
.tabs button+button{border-left:0}
.tabs .on,.tabs .on:hover{background:var(--fg);color:var(--bg)}
.field{display:block;margin-bottom:8px}
.fieldhead{display:flex!important;justify-content:space-between;align-items:baseline}
#bal{border:0;padding:0;font-size:11px;color:var(--fg);text-decoration:underline;text-transform:none;letter-spacing:0;background:none}
#bal:hover{background:none;text-decoration:none}
#link-verify .btn{width:100%;margin-bottom:2px}
.field span{display:block;color:var(--mute);font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
input{width:100%;font:500 18px var(--mono);background:var(--bg);color:var(--fg);border:1px solid var(--line);padding:8px 10px;outline:0}
input:focus{box-shadow:inset 0 0 0 1px var(--fg)}
#post-url{font-size:13px;margin:6px 0}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:4px 0;border-bottom:1px solid var(--rule);text-align:left;font-weight:400;vertical-align:top}
#quote{margin-bottom:10px;border-top:1px solid var(--line)}
#quote th{color:var(--mute)}#quote td{text-align:right}
.rebate td{font-weight:600}
.defs th{width:64px;white-space:nowrap;padding-right:10px;font-weight:600}
.defs td{font:13px/1.45 var(--serif)}
.eq{font:italic 15px var(--serif);text-align:center;padding:10px;border:1px solid var(--line);margin:6px 0 8px;background:var(--fill)}
.note{font-size:11px;border-left:2px solid var(--fg);padding-left:8px}
.fine{color:var(--mute);font-size:11px;margin-top:10px}
.fine a{color:var(--fg)}
#status{min-height:1.2em;margin:8px 0 0;font-size:12px;word-break:break-word}
#status.ok::before{content:"✓ "}#status.err::before{content:"✕ "}
#status.err{text-decoration:underline}
.mono{font:12px var(--mono);word-break:break-all}
#link-flow{margin-top:10px}
#link-out:not(:empty){border:1px dashed var(--line);padding:6px 8px;background:var(--fill);margin-top:8px}
.boardhead{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}
.boardhead .fine{margin:0}
#board thead th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--mute);border-bottom:1px solid var(--line)}
#board td{padding:5px 0;vertical-align:middle}
#board td:first-child{width:28px;color:var(--mute)}
#board .r{text-align:right}
#board .acct{display:flex;align-items:center;gap:6px;min-width:0}
#board .acct a{color:var(--fg);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .acct a:hover{text-decoration:underline}
#board img{width:20px;height:20px;filter:grayscale(1);border:1px solid var(--line);flex:none;background:var(--fill)}
#board tr.me td{background:var(--fill);font-weight:600}
#link-steps{list-style:none;counter-reset:st;margin:8px 0 10px;padding:0;border-top:1px solid var(--line)}
#link-steps li{counter-increment:st;padding:6px 0 6px 30px;border-bottom:1px solid var(--rule);position:relative;color:var(--mute)}
#link-steps li::before{content:counter(st);position:absolute;left:0;top:5px;width:20px;height:20px;border:1px solid var(--mute);text-align:center;line-height:18px;font-size:11px}
#link-steps li span{display:block;font-size:11px}
#link-steps li.now{color:var(--fg);font-weight:600}
#link-steps li.now::before{background:var(--fg);color:var(--bg);border-color:var(--fg)}
#link-steps li.done{color:var(--fg)}
#link-steps li.done::before{content:"✓";border-color:var(--fg)}
#link-steps li.hide{display:none}
#xlink{font-size:11px;color:var(--fg);text-decoration:none;border:1px solid var(--line);padding:3px 6px;white-space:nowrap}#xlink:hover{background:var(--fg);color:var(--bg)}
#ca{flex:none;border-top:1px solid var(--line);padding:6px 10px;text-align:center;font:11px var(--mono);user-select:all;word-break:break-all}