@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');
:root{--accent:#a5f3cf;--bg:#0e1114;--text:#edf0f2;--muted:#828b94;--line:#272d32;font-family:Inter,Arial,sans-serif;color:var(--text);color-scheme:dark}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}a{color:inherit;text-decoration:none}.studio{background:var(--bg)}header,footer{display:flex;align-items:center;justify-content:space-between;padding:28px 5%;border-bottom:1px solid var(--line)}.brand{font-size:14px;letter-spacing:1.5px}.brand:first-letter{color:var(--accent)}.brand span{color:var(--muted);font-size:11px}.local{font-size:10px;letter-spacing:1.5px;color:var(--accent)}main{max-width:1180px;margin:auto;padding:52px 32px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;color:var(--accent)}.intro h1{font-size:clamp(34px,4vw,52px);letter-spacing:-2px;line-height:1.08;margin:18px 0}.intro h1 span{color:#89939b}.intro p{color:var(--muted);font-size:14px;line-height:1.6}.workspace{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;margin-top:36px}.preview-panel,.settings{border:1px solid var(--line);border-radius:12px;background:#14181c;overflow:hidden}.panel-top{min-height:57px;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1.7px;color:#a8b0b7;border-bottom:1px solid var(--line);padding:18px 22px}.toggle{display:flex;gap:8px;align-items:center!important;font-size:11px!important;letter-spacing:0!important;margin:0!important;color:#b9c0c6!important}.toggle input{accent-color:var(--accent);width:14px;height:14px}.preview-stage{min-height:324px;display:flex;align-items:center;justify-content:center;position:relative;background-color:#1a2024;background-image:linear-gradient(45deg,#20272c 25%,transparent 25%),linear-gradient(-45deg,#20272c 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#20272c 75%),linear-gradient(-45deg,transparent 75%,#20272c 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.preview-stage iframe{width:480px;height:160px;border:0;max-width:100%}.stage-note{position:absolute;bottom:22px;font-size:9px;letter-spacing:2px;color:#78858d}.connection{padding:22px;display:flex;gap:12px;border-top:1px solid var(--line)}.dot{width:7px;height:7px;border-radius:50%;background:#e6b96e;margin-top:5px;flex-shrink:0}.dot.connected{background:var(--accent)}.connection strong{font-size:12px}.connection p{font-size:11px;color:var(--muted);line-height:1.7;margin:7px 0 0}.settings{padding:0 24px 24px}.settings .panel-top{padding-left:0;padding-right:0;margin-bottom:22px}.settings label{display:block;color:#b8bfc4;font-size:11px;margin:18px 0 9px}.settings input:not([type=checkbox]),select{width:100%;background:#0f1316;border:1px solid #30373d;border-radius:5px;color:#e9eef1;padding:11px;font-size:12px;height:40px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}input[type=color]{padding:5px!important;cursor:pointer}.compact-control{margin-top:20px!important}.export{border-top:1px solid var(--line);margin-top:24px}.export input{font-family:monospace;font-size:10px!important;color:var(--muted)!important}button{width:100%;background:var(--accent);color:#14221b;border:0;border-radius:5px;padding:14px;font-weight:700;font-size:12px;margin-top:12px;cursor:pointer;display:flex;justify-content:space-between}button:hover{filter:brightness(1.08)}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.export p{font-size:10px;color:var(--muted);margin-bottom:0}.instructions{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}.instructions span{font-size:10px;color:var(--accent);font-family:monospace}.instructions h2{font-size:13px;margin-top:12px}.instructions p{color:var(--muted);font-size:12px;line-height:1.8}footer{border-top:1px solid var(--line);border-bottom:0;font-size:9px;letter-spacing:1.4px;color:var(--muted)}footer span{letter-spacing:0}.overlay-page{background:transparent!important;overflow:hidden;color:#edf0f2}.rank-card{--card:#10171eee;width:456px;height:132px;margin:12px;position:relative;display:flex;align-items:center;gap:16px;padding:20px 24px;background:var(--card);border:1px solid #ffffff17;border-left:3px solid var(--accent);border-radius:3px 16px 3px 16px;box-shadow:0 6px 16px #0003}.emblem{width:70px;flex-shrink:0;filter:drop-shadow(0 0 10px color-mix(in srgb,var(--accent) 20%,transparent))}.emblem svg{width:100%;height:80px;fill:color-mix(in srgb,var(--accent) 15%,transparent);stroke:var(--accent);stroke-width:1.5}.emblem svg path:last-child{fill:var(--accent);stroke:none}.rank-info{flex:1;min-width:0}.rank-info .eyebrow{font-size:8px;letter-spacing:1.8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rank-line{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px}.rank-line h1{font-family:'Barlow Condensed',Arial,sans-serif;font-size:30px;text-transform:uppercase;margin:0;white-space:nowrap;font-weight:600;letter-spacing:.4px}.rank-line>span{font-size:15px;font-weight:700;white-space:nowrap}.track{height:3px;background:#ffffff1c;margin:10px 0}.track>div{height:100%;background:var(--accent);transition:width 1s ease;width:0}.rank-bottom{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:1px;color:#9aa6af}.rank-bottom #delta{font-size:10px;letter-spacing:0;font-weight:700}.positive{color:var(--accent)}.negative{color:#ff818b}.corner{position:absolute;right:12px;top:12px;width:4px;height:4px;background:var(--accent)}.light .rank-card{--card:#f3f6f4f2;color:#17231f;border-color:#0002}.light .eyebrow,.light .positive{color:#237652}.light .rank-bottom{color:#52635c}.light .track{background:#0002}.compact .rank-card{height:104px}.compact .emblem{width:50px}.compact .rank-bottom{display:none}@media(max-width:850px){.workspace{grid-template-columns:1fr}.instructions{gap:20px}.preview-stage{min-height:270px}}@media(max-width:520px){main{padding:32px 16px}.local{display:none}.instructions{grid-template-columns:1fr;gap:12px}.preview-stage iframe{zoom:.75}.panel-top{padding:16px 12px}.brand span{display:none}footer{gap:20px}}