:root{font-family:Segoe UI,Arial,sans-serif;color:#e9edf4;background:#0c121d;color-scheme:dark;line-height:1.5}*{box-sizing:border-box}body{margin:0}header,nav,main,footer{max-width:1180px;margin:auto;padding:20px 28px}header{display:flex;justify-content:space-between;align-items:center;gap:16px}.brand{font-size:25px;font-weight:750;letter-spacing:-1px}.brand span{color:#67ded0}.tag{font-size:11px;letter-spacing:1px;color:#91e7d8;border:1px solid #345953;border-radius:20px;padding:6px 11px}nav{display:flex;gap:28px;border-top:1px solid #253141;border-bottom:1px solid #253141;padding-top:12px;padding-bottom:12px}a{color:#8ee6db;text-decoration:none}a:hover{text-decoration:underline}.intro{max-width:780px;margin:26px 0 32px}.eyebrow{color:#76d8cd;font-size:12px;letter-spacing:2px;text-transform:uppercase}h1{font-size:44px;line-height:1.1;margin:15px 0;letter-spacing:-1.4px}h2{font-size:21px;margin:0 0 16px}h3{font-size:15px;margin:22px 0 10px}p{color:#b7c4d4}.workspace{display:grid;grid-template-columns:1fr 1fr;gap:20px}.panel{background:#131e2d;border:1px solid #2a394d;border-radius:14px;padding:25px;margin-bottom:24px}label{display:block;font-size:13px;margin:12px 0 6px;color:#ccd5e0}textarea,select,input{width:100%;background:#0d1622;border:1px solid #496078;color:#fff;border-radius:7px;padding:10px;font:inherit}textarea{resize:vertical;font-family:Consolas,monospace}.hint{font-size:12px;color:#a8b8cb}.buttons{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}button{background:#77dfce;color:#062824;border:1px solid transparent;border-radius:7px;padding:10px 15px;font:600 13px Segoe UI,Arial;cursor:pointer}button.secondary{background:#203046;color:#e4edf7;border-color:#3b526c}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){filter:brightness(1.1)}button:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}.generator{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.generator label{grid-column:1/-1;margin:0}.result-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.result-heading h2{margin:0}.cube{display:grid;grid-template-columns:repeat(4,65px);grid-template-rows:repeat(3,65px);gap:5px;justify-content:center;min-height:205px;margin:20px 0}.face{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px;background:#07101a;border-radius:3px}.sticker{display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#0c1720;border-radius:2px}.face-U{grid-column:2;grid-row:1}.face-L{grid-column:1;grid-row:2}.face-F{grid-column:2;grid-row:2}.face-R{grid-column:3;grid-row:2}.face-B{grid-column:4;grid-row:2}.face-D{grid-column:2;grid-row:3}.color-U{background:#f1f4f8}.color-R{background:#f07075}.color-F{background:#69c994}.color-D{background:#efd474}.color-L{background:#edaa68}.color-B{background:#7caceb}dl{display:grid;grid-template-columns:1fr 1fr;gap:5px;font-size:13px}dt{color:#a8b8cb}dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}.route{background:#0d1622;padding:12px;border-radius:6px;word-break:break-word;font-family:Consolas,monospace;min-height:46px}details{margin-top:22px;font-size:13px}summary{cursor:pointer;color:#8ee6db}pre{overflow:auto;max-height:240px;white-space:pre-wrap;font-size:11px}.explain{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.explain h3{margin-top:0}footer{font-size:12px;color:#95a7bb;padding-bottom:36px}#download-link{display:block;margin-top:10px}#download-link[hidden]{display:none}@media(max-width:800px){.workspace,.explain{grid-template-columns:1fr}h1{font-size:34px}header{align-items:flex-start;flex-direction:column}nav{gap:18px;flex-wrap:wrap}main,header,nav,footer{padding-left:16px;padding-right:16px}.panel{padding:18px}}.cube{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));width:100%;max-width:275px;aspect-ratio:275/205;min-height:0;margin:20px auto}
.headtags{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.service{font-size:11px;letter-spacing:.8px;border-radius:20px;padding:6px 11px;border:1px solid #496078}.service.ready{border-color:#4b806e}.service.warming{border-color:#7b7045}.service.offline{border-color:#86505a}.sticker[type=button]{padding:0;border:0;min-width:0;width:auto;height:auto;cursor:pointer;font:800 10px Segoe UI,Arial}.sticker[type=button]:hover{filter:brightness(1.15);outline:2px solid #fff;outline-offset:-2px}.sticker[type=button]:disabled{opacity:1;cursor:default}
