.wp-page{--wp-stage:linear-gradient(160deg, #1a222d 0%, #0d1218 100%);--wp-step-bg:var(--ccu-fill-strong);color:var(--ccu-ink);padding:8px 0 48px}html[data-theme=light] .wp-page{--wp-stage:linear-gradient(160deg, #e8edf3 0%, #d9e0e8 100%)}.wp-head{max-width:680px;margin:8px 0 24px}.wp-eyebrow{font:600 var(--ccu-fs-meta)/1.3 var(--font-sans);color:var(--ccu-muted);margin:0 0 6px}.wp-title{font:600 var(--ccu-fs-hero,40px)/1.1 var(--font-sans);letter-spacing:-.02em;text-wrap:balance;margin:0}.wp-sub{font-size:var(--ccu-fs-item,17px);color:var(--ccu-muted-strong);text-wrap:pretty;margin:10px 0 0;line-height:1.5}.wp-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"preview""pick""make""install""mine";align-items:start;gap:12px;display:grid}.wp-area-preview{grid-area:preview}.wp-area-pick{grid-area:pick}.wp-area-make{grid-area:make}.wp-area-install{grid-area:install}.wp-area-mine{grid-area:mine}@media (min-width:1024px){.wp-grid{grid-template:"pick preview""make preview""install preview""mine preview"1fr/minmax(0,1fr) minmax(400px,460px);gap:16px 20px}.wp-area-preview{top:calc(var(--ccu-chrome-top,0px) + 16px);position:sticky}}.wp-card{border:1px solid var(--ccu-line);border-radius:var(--ccu-radius-card,16px);background:var(--ccu-surface);min-width:0;box-shadow:var(--ccu-shadow-card);padding:20px}.wp-card-head{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:14px;display:flex}.wp-h2{font:600 var(--ccu-fs-title,20px)/1.3 var(--font-sans);letter-spacing:-.01em;margin:0}.wp-h3{font:600 var(--ccu-fs-body,15px)/1.35 var(--font-sans);color:var(--ccu-ink);margin:0 0 8px}.wp-h3-gap{margin-top:20px}.wp-body{font-size:var(--ccu-fs-body,15px);color:var(--ccu-muted-strong);margin:0;line-height:1.5}.wp-label{font:500 var(--ccu-fs-meta)/1.3 var(--font-sans);color:var(--ccu-muted);margin-bottom:6px;display:block}.wp-note{font-size:var(--ccu-fs-meta);color:var(--ccu-muted);margin:10px 0 0;line-height:1.45}.wp-note-flush{margin-top:0}.wp-error{font-size:var(--ccu-fs-meta);color:var(--ccu-down);margin:10px 0 0}.wp-count{font-size:var(--ccu-fs-meta);color:var(--ccu-muted);font-variant-numeric:tabular-nums}.wp-step-head{align-items:center;gap:10px;margin-bottom:16px;display:flex}.wp-step-n{background:var(--wp-step-bg);width:26px;height:26px;color:var(--ccu-ink);font:600 var(--ccu-fs-meta)/1 var(--font-sans);font-variant-numeric:tabular-nums;border-radius:999px;flex-shrink:0;place-items:center;display:inline-grid}.wp-input{border:1px solid var(--ccu-line-strong);border-radius:var(--ccu-radius-ctl,10px);background:var(--ccu-panel,var(--ccu-bg));width:100%;min-width:0;height:44px;color:var(--ccu-ink);font:inherit;padding:0 14px;font-size:16px}.wp-input::placeholder{color:var(--ccu-muted-faint)}.wp-input:focus-visible{outline:2px solid var(--ccu-focus);outline-offset:1px}.wp-search-wrap{position:relative}.wp-search-icon{color:var(--ccu-muted);pointer-events:none;position:absolute;top:14px;left:14px}.wp-input-search{border-radius:999px;padding-left:40px}.wp-results{z-index:20;border:1px solid var(--ccu-line-strong);background:var(--ccu-panel,var(--ccu-surface));box-shadow:var(--ccu-shadow-pop);border-radius:14px;margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 6px);left:0;right:0}.wp-result{width:100%;min-height:44px;color:var(--ccu-ink);font:inherit;font-size:var(--ccu-fs-body);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:10px;align-items:center;gap:10px;padding:6px 8px;display:flex}.wp-result:hover,.wp-result[data-active=true]{background:var(--ccu-fill-strong)}.wp-result img,.wp-result-noicon{background:var(--ccu-fill);object-fit:cover;border-radius:7px;flex-shrink:0;width:28px;height:28px}.wp-result-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.wp-result-players{color:var(--ccu-muted);font-variant-numeric:tabular-nums;font-size:var(--ccu-fs-meta)}.wp-quick{flex-wrap:wrap;gap:8px;margin-top:12px;display:flex}.wp-chip{border:1px solid var(--ccu-line);min-height:36px;color:var(--ccu-muted-strong);font:500 var(--ccu-fs-meta)/1 var(--font-sans);cursor:pointer;transition:background-color .14s var(--ccu-ease-standard), color .14s var(--ccu-ease-standard);background:0 0;border-radius:999px;padding:0 14px}.wp-chip:hover{background:var(--ccu-fill);color:var(--ccu-ink)}.wp-chip:focus-visible,.wp-seg button:focus-visible{outline:2px solid var(--ccu-focus);outline-offset:2px}.wp-picked{border-top:1px solid var(--ccu-line);align-items:center;gap:12px;margin-top:16px;padding-top:16px;display:flex}.wp-picked img,.wp-picked-noicon{background:var(--ccu-fill);object-fit:cover;border-radius:10px;flex-shrink:0;width:40px;height:40px}.wp-picked-text{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.wp-picked-name{font:600 var(--ccu-fs-item,17px)/1.3 var(--font-sans);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wp-picked-meta{font-size:var(--ccu-fs-meta);color:var(--ccu-muted);font-variant-numeric:tabular-nums}.wp-signin-actions{flex-wrap:wrap;gap:10px;margin-top:16px;display:flex}.wp-create-row{gap:10px;display:flex}.wp-create-row .ccu-btn{min-height:44px}.wp-script{border-top:1px solid var(--ccu-line);margin-top:18px;padding-top:18px}.wp-script-head{justify-content:space-between;align-items:center;gap:8px;display:flex}.wp-script-title{text-overflow:ellipsis;white-space:nowrap;min-width:0;margin:0;overflow:hidden}.wp-script-actions{flex-wrap:wrap;gap:10px;margin-top:12px;display:flex}.wp-copy{min-width:160px}.wp-code{border:1px solid var(--ccu-line);border-radius:var(--ccu-radius-ctl,10px);background:var(--ccu-fill);width:100%;color:var(--ccu-muted-strong);font-family:var(--font-mono);resize:vertical;white-space:pre;margin-top:12px;padding:12px 14px;font-size:12px;line-height:1.5;display:block;overflow:auto}.wp-steps{grid-template-columns:minmax(0,1fr);gap:18px;display:grid}@media (min-width:700px){.wp-steps{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 28px}}.wp-steps ol{font-size:var(--ccu-fs-body);color:var(--ccu-muted-strong);margin:0;padding-left:20px;line-height:1.5;list-style:decimal}.wp-steps li{display:list-item}.wp-steps li+li{margin-top:6px}.wp-steps li::marker{color:var(--ccu-muted);font-variant-numeric:tabular-nums}.wp-seg{background:var(--ccu-fill);border-radius:999px;padding:3px;display:inline-flex}.wp-seg button{min-height:30px;color:var(--ccu-muted);font:500 var(--ccu-fs-meta)/1 var(--font-sans);cursor:pointer;white-space:nowrap;background:0 0;border:0;border-radius:999px;padding:0 12px}.wp-seg button[data-on=true]{background:var(--ccu-surface);color:var(--ccu-ink);box-shadow:0 1px 2px #0000002e}.wp-stage{background:var(--wp-stage);border-radius:16px;justify-content:center;padding:28px 16px;display:flex;overflow:hidden}.wp-lock-wrap .wg-lock{max-width:none}.wp-placeholder{width:100%;max-width:338px;color:var(--ccu-muted);font-size:var(--ccu-fs-meta);text-align:center;background:#7f8b9924;border-radius:22px;place-items:center;padding:0 16px;display:grid}.wp-placeholder-lock{border-radius:28px;max-width:none;height:260px}.wp-tokens{margin:0;padding:0;list-style:none}.wp-token{border-top:1px solid var(--ccu-line);align-items:center;gap:12px;padding:12px 0;display:flex}.wp-token:first-child{border-top:0;padding-top:0}.wp-token[data-revoked=true]{opacity:.5}.wp-token-main{flex-direction:column;flex:1;gap:2px;min-width:0;display:flex}.wp-token-label{font:600 var(--ccu-fs-body)/1.35 var(--font-sans);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wp-token-meta{font-size:var(--ccu-fs-meta);color:var(--ccu-muted);font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.wp-token-actions{flex-shrink:0;gap:6px;display:flex}.wp-token-actions .ccu-btn{min-height:36px}.wp-remove:hover{color:var(--ccu-down);border-color:var(--ccu-down);background:0 0}.wp-rename{align-items:center;gap:8px;width:100%;display:flex}.wp-rename .wp-input{height:40px}@media (max-width:640px){.wp-page{padding-top:4px}.wp-head{margin-bottom:18px}.wp-title{font-size:32px}.wp-sub{font-size:var(--ccu-fs-body)}.wp-card{padding:16px}.wp-stage{padding:20px 10px}.wp-create-row{flex-direction:column}.wp-create-row .ccu-btn,.wp-signin-actions .ccu-btn,.wp-script-actions .ccu-btn{width:100%}.wp-seg button{padding:0 9px}.wp-token{flex-wrap:wrap}.wp-token-actions{justify-content:flex-end;width:100%}.wp-token-actions .ccu-btn{min-height:44px}.wp-rename{flex-wrap:wrap}.wp-rename .wp-input{flex:100%;height:44px}}@media (prefers-reduced-motion:reduce){.wp-chip{transition:none}}
