:root{--bg:#0f141d;--bg-soft:#171f2b;--text:#e8edf5;--muted:#b9c2d1;--accent:#64d5a2;--accent-2:#8bb7ff;--card:#1a2231;--shadow:rgba(0,0,0,0.3);--ok:#62d08f;--warn:#ffd166;}html[data-theme="light"]{--bg:#f3f8ff;--bg-soft:#e8f0ff;--text:#122033;--muted:#43566f;--accent:#128457;--accent-2:#2a67c7;--card:#ffffff;--shadow:rgba(9,38,76,0.14);--ok:#0f8b53;--warn:#c08900;}*{box-sizing:border-box;}body{margin:0;font-family:"Trebuchet MS","Avenir Next",Verdana,sans-serif;color:var(--text);background:radial-gradient(circle at 15% 12%,rgba(100,213,162,0.15),transparent 38%),radial-gradient(circle at 82% 18%,rgba(139,183,255,0.16),transparent 36%),linear-gradient(160deg,var(--bg),var(--bg-soft));background-attachment:fixed;background-repeat:no-repeat;background-size:cover;min-height:100vh;line-height:1.5;overflow-y:scroll;}.wrap{width:min(960px,92vw);margin:0 auto;padding:22px 0 34px;}.top{display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:20px;}h1{margin:0;font-size:clamp(1.4rem,2vw + 1rem,2.2rem);letter-spacing:0.03em;}.subtitle{margin:4px 0 0;color:var(--muted);font-size:0.98rem;}.controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}button,select{border:1px solid color-mix(in srgb,var(--accent),transparent 35%);background:color-mix(in srgb,var(--card),white 3%);color:var(--text);font:inherit;padding:9px 14px;border-radius:12px;}button{cursor:pointer;}select{padding-right:38px;appearance:none;-webkit-appearance:none;-moz-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:right 16px center,right 11px center;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}button:hover,button:focus-visible{border-color:var(--accent);outline:none;}select:focus-visible{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--accent),transparent 75%);}.intro-panel{background:color-mix(in srgb,var(--card),white 2%);border:2px solid color-mix(in srgb,var(--accent),transparent 72%);border-radius:16px;padding:18px 16px;margin-bottom:32px;box-shadow:0 12px 24px var(--shadow);}.intro-panel__content{font-size:1.02rem;line-height:1.65;color:var(--text);}.intro-panel__content strong{color:var(--accent);}h2{margin-top:0;}.tips-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-bottom:12px;}.tips-actions button{padding-inline:16px;}.tips{display:grid;gap:12px;}details.tip{background:color-mix(in srgb,var(--card),white 1%);border:1px solid color-mix(in srgb,var(--accent-2),transparent 76%);border-radius:14px;overflow:clip;box-shadow:0 8px 20px var(--shadow);}.tip summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;}.tip summary::-webkit-details-marker{display:none;}.tip-title{margin:0;font-size:1rem;font-weight:700;}.metrics{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;}.metric{display:inline-flex;align-items:center;gap:4px;font-size:0.84rem;color:var(--muted);}.bars{display:inline-flex;gap:2px;}.bar{width:8px;height:12px;border-radius:2px;background:color-mix(in srgb,var(--text),transparent 76%);}.bar.on.diff{background:var(--warn);}.bar.on.gain{background:var(--ok);}.content{padding:0 14px 14px;border-top:1px dashed color-mix(in srgb,var(--text),transparent 84%);}.content h3{margin:12px 0 6px;font-size:0.95rem;color:var(--accent);letter-spacing:0.02em;}.content p{margin:0;color:var(--text);font-size:0.94rem;}.footer-note{margin-top:16px;color:var(--muted);font-size:0.86rem;}.footer-note--inline{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap;width:100%;text-align:center;}.footer-separator{color:color-mix(in srgb,var(--muted),transparent 20%);}.footer-note a{color:var(--text);text-decoration-color:color-mix(in srgb,var(--accent),transparent 45%);text-underline-offset:0.15em;}.footer-note a:hover,.footer-note a:focus-visible{color:var(--accent);outline:none;}.footer-note + .footer-note{margin-top:8px;}@media (max-width:640px){.footer-note--inline{gap:6px 8px;}.footer-separator{display:none;}}.error{margin-top:12px;color:#ff8f8f;}@media (max-width:640px){.tips-actions{justify-content:stretch;}.tips-actions button{flex:1 1 0;}.tip summary{flex-direction:column;align-items:flex-start;}.metrics{justify-content:flex-start;}}