:root{--bg:#11130f;--panel:#171a15;--paper:#e8e4d6;--ink:#171914;--muted:#8e9488;--line:#343930;--acid:#c9f24a;--white:#f6f3e8;--red:#e75032;--blue:#45a8cb;--sand:#b98656;--ice:#a9d8d5;--green:#66a861;--black:#3f443e;font-family:Inter,"Helvetica Neue",Arial,sans-serif;color-scheme:dark}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);min-height:100vh;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:36px 36px}button,input,select{font:inherit}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,64px);position:relative}.brand{display:flex;align-items:center;gap:12px;color:var(--white);text-decoration:none;font:800 12px/1.05 "Arial Narrow",sans-serif;letter-spacing:.17em}.top-note{font:700 10px/1 monospace;letter-spacing:.17em;color:var(--muted)}.top-note span{color:var(--acid);margin:0 8px}
.hero{min-height:520px;padding:72px clamp(20px,6vw,96px);display:grid;grid-template-columns:1.25fr .75fr;gap:64px;align-items:end;border-bottom:1px solid var(--line);position:relative;overflow:hidden}.hero:before{content:"KANOKA";position:absolute;right:-2vw;top:-6vw;font:900 clamp(110px,23vw,340px)/1 "Arial Narrow",sans-serif;color:transparent;-webkit-text-stroke:1px rgba(201,242,74,.09);letter-spacing:-.07em;pointer-events:none}.eyebrow{font:700 10px/1 monospace;letter-spacing:.2em;color:var(--acid);margin:0 0 22px}.hero h1{font:900 clamp(64px,9vw,140px)/.78 "Arial Narrow",Impact,sans-serif;letter-spacing:-.055em;text-transform:uppercase;margin:0;max-width:900px}.hero h1 em{font-style:normal;color:var(--acid)}.lede{max-width:650px;color:#b7bcae;font-size:17px;line-height:1.55;margin:40px 0 0}.code-decoder{position:relative;z-index:1;border:1px solid #4c5445;background:rgba(24,28,22,.9);padding:22px;box-shadow:10px 10px 0 rgba(0,0,0,.25)}.decoder-title{font:700 10px monospace;letter-spacing:.18em;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:14px}.decoder-code{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:20px 0 8px}.decoder-code span{aspect-ratio:1;background:var(--paper);color:var(--ink);display:grid;place-items:center;font:900 clamp(45px,6vw,92px)/1 Impact,sans-serif;position:relative}.decoder-code span:after{content:attr(data-tip);position:absolute;top:7px;left:8px;font:700 7px monospace;letter-spacing:.06em;color:#72766c}.decoder-labels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;color:var(--acid);font:700 8px monospace;letter-spacing:.06em}.code-decoder p{font-size:12px;line-height:1.5;color:var(--muted);margin:18px 0 0}
.workspace{display:grid;grid-template-columns:310px 1fr;min-height:800px}.sidebar{padding:36px 28px;border-right:1px solid var(--line);background:#141712;position:sticky;top:0;height:100vh;overflow:auto}.progress-head{display:flex;justify-content:space-between;font:700 10px monospace;letter-spacing:.12em}.progress-head strong{color:var(--acid)}.progress-track{height:4px;background:#30352d;margin:13px 0 9px}.progress-track i{display:block;background:var(--acid);height:100%;width:0;transition:width .35s ease}.progress-block p{margin:0;color:var(--muted);font-size:11px}.filter-group{margin-top:34px}.filter-group label,.label,.sort{display:block;font:700 9px monospace;letter-spacing:.12em;color:var(--muted);margin-bottom:9px}.search-wrap{position:relative}.search-wrap input{width:100%;height:44px;border:1px solid var(--line);background:#10120e;padding:0 38px 0 12px;color:var(--white);outline:none}.search-wrap input:focus{border-color:var(--acid)}kbd{position:absolute;right:12px;top:12px;color:var(--muted);border:1px solid var(--line);padding:2px 6px;font-size:10px}.chip-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.chip,.segmented button{border:1px solid var(--line);background:transparent;color:#aeb4a6;min-height:34px;font:700 9px monospace;cursor:pointer}.chip:hover,.chip.active,.segmented button:hover,.segmented button.active{border-color:var(--acid);color:var(--acid);background:rgba(201,242,74,.06)}.filter-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.filter-group.compact select,.sort select{width:100%;height:38px;border:1px solid var(--line);background:#10120e;color:var(--white);padding:0 8px}.segmented{display:grid;grid-template-columns:repeat(3,1fr)}.segmented button+button{border-left:0}.sidebar-actions{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:38px;padding-top:24px;border-top:1px solid var(--line)}.text-button{border:0;background:none;color:#bbc0b4;padding:0;cursor:pointer;font:700 10px monospace;text-transform:uppercase;letter-spacing:.06em}.text-button:hover{color:var(--acid)}.text-button.danger:hover{color:#ff705d}
.catalog{padding:44px clamp(20px,4vw,64px) 80px;min-width:0}.catalog-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:32px}.catalog h2,.legend h2{font:900 clamp(32px,4vw,58px)/.95 "Arial Narrow",Impact,sans-serif;text-transform:uppercase;letter-spacing:-.035em;margin:0}.sort{margin:0;width:190px}.sort select{margin-top:9px}.disc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}.disc-card{min-width:0;background:#191c17;border:1px solid #2f342c;position:relative;transition:transform .18s,border-color .18s;overflow:hidden}.disc-card:hover{transform:translateY(-3px);border-color:#555e4c}.disc-card.owned{border-color:rgba(201,242,74,.6)}.disc-card.wanted:after{content:"ИЩУ";position:absolute;right:8px;top:8px;background:#e4ddd0;color:#171914;padding:4px 7px;font:900 8px monospace;letter-spacing:.08em}.card-visual{background:#c8c8ba;background-image:radial-gradient(circle at 50% 38%,#ecebdd 0,#c7c8ba 55%,#9b9e91 100%);padding:18px 16px 10px;cursor:pointer;border:0;width:100%;display:block;color:inherit}.disc-svg{display:block;width:100%;aspect-ratio:1;filter:drop-shadow(0 12px 9px rgba(15,18,13,.28));transition:transform .25s}.card-visual:hover .disc-svg{transform:rotate(-4deg) scale(1.035)}.card-info{padding:15px}.card-code-row{display:flex;align-items:start;justify-content:space-between;gap:8px}.card-code{font:900 30px/1 Impact,"Arial Narrow",sans-serif;letter-spacing:.04em}.card-metru{font:700 8px monospace;letter-spacing:.08em;color:var(--muted);text-align:right}.card-power{margin:8px 0 14px;color:#c8cdc0;font-size:11px;height:27px}.level-row{display:flex;justify-content:space-between;font:700 8px monospace;letter-spacing:.08em;color:var(--muted);padding-top:11px;border-top:1px solid var(--line)}.level-row strong{color:var(--white)}.card-actions{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}.card-actions button{height:38px;border:0;background:#12140f;color:#81877c;font:700 9px monospace;cursor:pointer}.card-actions button+button{border-left:1px solid var(--line)}.card-actions button:hover,.card-actions button.active{color:var(--acid);background:#1c2118}.card-actions button.wish.active{color:#f1ddc3}.empty{text-align:center;padding:90px 20px;color:var(--muted)}.empty span{font-size:70px;color:var(--line)}.empty h3{color:var(--white);text-transform:uppercase}
.legend{border-top:1px solid var(--line);padding:70px clamp(20px,6vw,96px) 100px;display:grid;grid-template-columns:300px 1fr;gap:80px}.power-legend{display:grid;grid-template-columns:repeat(2,1fr)}.power-item{display:grid;grid-template-columns:42px 1fr;gap:15px;padding:18px 0;border-top:1px solid var(--line)}.power-item:nth-child(odd){padding-right:30px}.power-item:nth-child(even){padding-left:30px;border-left:1px solid var(--line)}.power-number{font:900 30px Impact,sans-serif;color:var(--acid)}.power-item strong{display:block;text-transform:uppercase;font-size:12px;margin-bottom:4px}.power-item p{margin:0;color:var(--muted);font-size:11px;line-height:1.45}
dialog{width:min(760px,calc(100vw - 24px));border:1px solid #68705f;background:#191c17;color:var(--white);padding:0;box-shadow:0 40px 100px #000}dialog::backdrop{background:rgba(8,9,7,.8);backdrop-filter:blur(5px)}.dialog-close{position:absolute;right:12px;top:10px;z-index:2;border:0;background:transparent;color:var(--white);font-size:30px;cursor:pointer}.dialog-layout{display:grid;grid-template-columns:1fr 1fr}.dialog-art{background:var(--paper);padding:40px;display:grid;place-items:center}.dialog-body{padding:44px 34px}.dialog-body .big-code{font:900 86px/.9 Impact,sans-serif;letter-spacing:.04em}.dialog-body h3{font:900 27px/1 "Arial Narrow",sans-serif;text-transform:uppercase;margin:10px 0 20px}.detail-table{border-top:1px solid var(--line)}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}.detail-row strong{color:var(--white);text-align:right}.dialog-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:24px}.dialog-actions button{height:43px;border:1px solid var(--line);background:#11130f;color:var(--white);cursor:pointer;font:700 10px monospace}.dialog-actions button.active{border-color:var(--acid);color:var(--acid)}footer{min-height:100px;border-top:1px solid var(--line);padding:30px clamp(20px,4vw,64px);display:grid;grid-template-columns:1fr 2fr 1fr;align-items:center;color:var(--muted);font:700 9px monospace;letter-spacing:.08em}footer>span{color:var(--acid)}footer p{text-align:center}footer a{text-align:right;color:var(--muted);text-decoration:none}
.release-pill{display:inline-flex;align-items:center;min-height:21px;margin:-3px 0 11px;padding:0 7px;border:1px solid #596052;color:#cbd0c4;font:700 8px monospace;letter-spacing:.06em;text-transform:uppercase}.release-pack{border-color:#647e3d;color:var(--acid)}.release-promo{border-color:#9a6c42;color:#f0c28f}.release-detail{border-bottom:0}.set-list{display:grid;gap:6px;padding:0 0 13px;border-bottom:1px solid var(--line);font-size:10px;line-height:1.35;color:#cdd2c5}.set-list span{display:block}.set-list b{color:var(--acid);font-family:monospace}.sidebar>.filter-group.compact+.filter-group{margin-top:24px}
@media(max-width:900px){.hero{grid-template-columns:1fr;min-height:auto}.workspace{grid-template-columns:1fr}.sidebar{position:relative;height:auto;border-right:0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(2,1fr);gap:0 24px}.progress-block,.sidebar-actions{grid-column:1/-1}.legend{grid-template-columns:1fr}.dialog-layout{grid-template-columns:1fr 1.1fr}}
@media(max-width:600px){.topbar{height:72px}.top-note{display:none}.hero{padding-top:55px;gap:45px}.hero h1{font-size:18vw}.workspace{display:block}.sidebar{display:block;padding:28px 20px}.catalog{padding:35px 14px 60px}.catalog-head{align-items:start;gap:20px}.sort{width:145px}.disc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card-visual{padding:10px 6px 4px}.card-info{padding:11px}.card-code{font-size:24px}.card-power{font-size:10px}.card-metru{display:none}.legend{padding:55px 20px;gap:35px}.power-legend{grid-template-columns:1fr}.power-item:nth-child(n){padding:16px 0;border-left:0}.dialog-layout{grid-template-columns:1fr}.dialog-art{padding:30px}.dialog-art .disc-svg{max-width:260px}.dialog-body{padding:28px 22px}.dialog-body .big-code{font-size:62px}footer{grid-template-columns:1fr;gap:10px;text-align:center}footer p,footer a{text-align:center}}
.builder{display:grid;grid-template-columns:.72fr 1fr .78fr;gap:clamp(28px,5vw,80px);align-items:center;padding:70px clamp(20px,6vw,96px);border-bottom:1px solid var(--line);background:#e7e2d3;color:#171914;position:relative}.builder h2{font:900 clamp(44px,6vw,82px)/.86 "Arial Narrow",Impact,sans-serif;letter-spacing:-.045em;text-transform:uppercase;margin:0}.builder-copy>p:not(.eyebrow){font-size:13px;line-height:1.6;color:#65695f;max-width:350px}.builder .eyebrow{color:#58662e}.builder-code{margin-top:34px;border-top:1px solid #a8aa9d;padding-top:18px;display:flex;align-items:end;gap:14px}.builder-code span{font:900 44px/1 Impact,sans-serif;letter-spacing:.06em}.builder-code small{font:700 8px monospace;color:#74796e;letter-spacing:.08em;margin-bottom:5px}.builder-stage{display:grid;place-items:center;position:relative}.builder-disc{width:min(100%,440px)}.builder-stage .disc-svg{filter:drop-shadow(0 28px 18px rgba(28,31,25,.24))}.builder-readout{text-align:center;display:flex;flex-direction:column;gap:5px;font:700 9px monospace;letter-spacing:.12em;color:#70756b}.builder-readout strong{color:#171914;font-size:12px}.builder-controls{background:#171914;color:var(--white);padding:24px}.builder-controls fieldset{border:0;padding:0;margin:0 0 24px}.builder-controls legend,.builder-controls label{display:block;font:700 9px monospace;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}.builder-options{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.builder-options button{height:34px;border:1px solid var(--line);background:transparent;color:#abb0a5;cursor:pointer;font:700 9px monospace}.builder-options button.active{border-color:var(--disc-color);color:var(--disc-color);background:color-mix(in srgb,var(--disc-color) 10%,transparent)}.builder-controls select{width:100%;height:40px;background:#10120e;border:1px solid var(--line);color:var(--white);padding:0 10px;margin-bottom:24px}.builder-controls output{float:right;color:var(--acid);font-size:15px}.builder-controls input[type=range]{width:100%;accent-color:var(--acid);margin:8px 0 18px}.builder-note{border-top:1px solid var(--line);margin:5px 0 0;padding-top:16px;color:#a8aea1;font:700 9px/1.45 monospace}.builder-note.produced{color:var(--acid)}.card-visual{padding:13px 11px 7px;background-image:radial-gradient(circle at 50% 42%,#e9e7db 0,#c7c9bd 68%,#9da196 100%)}
@media(max-width:900px){.builder{grid-template-columns:1fr 1fr}.builder-controls{grid-column:1/-1}}
@media(max-width:600px){.builder{grid-template-columns:1fr;padding:50px 20px}.builder-stage{grid-row:1}.builder-copy{grid-row:2}.builder-controls{grid-column:auto;grid-row:3}.card-visual{padding:8px 4px 3px}}
/* Keep the card shadow circular; WebKit can rasterize drop-shadow on inline SVG as a rectangle. */
.card-visual{position:relative;isolation:isolate}
.card-visual::before{content:"";position:absolute;left:15%;right:15%;bottom:3%;height:18%;background:radial-gradient(ellipse at center,rgba(21,24,19,.28) 0,rgba(21,24,19,.13) 43%,transparent 72%);pointer-events:none}
.card-visual .disc-svg{position:relative;z-index:1;filter:none}