.pb-page{width:100%;min-width:0;max-width:1280px;margin:0 auto;padding:44px 40px 80px}.pb-intro{max-width:760px;padding-bottom:32px}.pb-intro h1{margin:8px 0 14px;font-size:40px;line-height:1.1}.pb-intro>p:last-child{color:#4f4f4f;max-width:680px;font-size:15px}.pb-tool{grid-template-columns:minmax(300px,380px) minmax(0,1fr);align-items:start;gap:24px;display:grid}.pb-controls{border:1px solid var(--line);background:var(--subtle);border-radius:10px;gap:20px;min-width:0;padding:22px;display:grid}.pb-row{grid-template-columns:1fr 1fr;gap:14px;min-width:0;display:grid}.pb-row--split{grid-template-columns:auto minmax(0,1fr)}.pb-field{gap:7px;min-width:0;display:grid}.pb-field label,.pb-fieldset legend{color:#333;padding:0;font-size:12px;font-weight:600}.pb-optional{color:#6b6b6b;margin-left:4px;font-weight:400}.pb-field select,.pb-field input,.pb-hex input[type=text]{border:1px solid var(--strong-line);background:#fff;border-radius:6px;width:100%;min-width:0;height:40px;padding:0 10px;font-size:13px}.pb-field select{padding-right:28px}.pb-field input::placeholder{color:#7a7a7a}.pb-fieldset{border:0;gap:8px;min-width:0;margin:0;padding:0;display:grid}.pb-styles{grid-template-columns:1fr 1fr;gap:8px;display:grid}.pb-style{cursor:pointer;min-width:0;display:block;position:relative}.pb-style input,.pb-segment input{z-index:1;opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute;inset:0}.pb-style span{border:1px solid var(--strong-line);background:#fff;border-radius:7px;gap:3px;min-height:58px;padding:9px 10px;transition:border-color .15s,box-shadow .15s;display:grid}.pb-style b{font-size:13px;font-weight:600}.pb-style small{color:#5f5f5f;font-size:11px;line-height:1.35}.pb-style:hover span{border-color:#9a9a9a}.pb-style input:checked+span{border-color:#111;box-shadow:inset 0 0 0 1px #111}.pb-style input:focus-visible+span,.pb-segment input:focus-visible+span{outline-offset:2px;outline:2px solid #111}.pb-segment{border:1px solid var(--strong-line);background:#fff;border-radius:7px;gap:3px;min-width:0;padding:3px;display:flex}.pb-segment label{flex:auto;min-width:0;position:relative}.pb-segment span{color:#555;cursor:pointer;white-space:nowrap;border-radius:5px;justify-content:center;align-items:center;min-height:34px;padding:0 9px;font-size:12px;font-weight:550;display:flex}.pb-segment label:hover span{color:#111;background:var(--soft)}.pb-segment input:checked+span{color:#fff;background:#171717}.pb-accent{flex-wrap:wrap;align-items:center;gap:10px 14px;display:flex}.pb-presets{gap:6px;display:flex}.pb-preset{width:30px;height:30px;box-shadow:0 0 0 1px var(--strong-line);border:2px solid #fff;border-radius:50%}.pb-preset[aria-pressed=true]{box-shadow:0 0 0 2px #111}.pb-preset--cobalt{background:#2f5bea}.pb-preset--ember{background:#e8590c}.pb-preset--forest{background:#2b8a3e}.pb-preset--violet{background:#7048e8}.pb-preset--rose{background:#d6336c}.pb-preset--ink{background:#1f2937}.pb-hex{flex:140px;align-items:center;gap:6px;min-width:0;display:flex}.pb-hex input[type=color]{border:1px solid var(--strong-line);cursor:pointer;background:#fff;border-radius:6px;flex:none;width:40px;height:40px;padding:3px}.pb-hex input[type=text]{text-transform:lowercase;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}.pb-hex input[aria-invalid=true]{border-color:#c92a2a}.pb-help{color:#5f5f5f;font-size:11px;line-height:1.4}.pb-help--error{color:#b02020}.pb-palette{--pb-background:#fff;--pb-surface:#f6f6f6;--pb-ink:#171717;--pb-muted:#5c5c5c;--pb-line:#e4e4e4;--pb-accent:#2f5bea;--pb-on-accent:#fff;border:1px solid var(--pb-line);background:var(--pb-background);border-radius:8px;gap:4px;padding:6px;display:flex}.pb-chip{text-align:center;text-overflow:ellipsis;white-space:nowrap;border-radius:5px;flex:1;min-width:0;padding:8px 4px;font-size:10px;font-weight:600;overflow:hidden}.pb-chip--background{background:var(--pb-background);color:var(--pb-ink);box-shadow:inset 0 0 0 1px var(--pb-line)}.pb-chip--surface{background:var(--pb-surface);color:var(--pb-ink)}.pb-chip--ink{background:var(--pb-ink);color:var(--pb-background)}.pb-chip--muted{background:var(--pb-surface);color:var(--pb-muted)}.pb-chip--accent{background:var(--pb-accent);color:var(--pb-on-accent)}.pb-output{min-width:0;top:calc(var(--alpha-banner-height) + 64px + 16px);gap:14px;display:grid;position:sticky}.pb-output-head{flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px;display:flex}.pb-output-head h2{font-size:18px}.pb-meta{color:#5f5f5f;margin-top:3px;font-size:12px}.pb-tools .pb-segment span{min-width:56px}.pb-prompt{color:#ececec;white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2;background:#141414;border:1px solid #262626;border-radius:10px;height:min(62vh,640px);margin:0;padding:20px 22px;font:12.5px/1.65 ui-monospace,SFMono-Regular,Menlo,monospace;overflow:auto}.pb-prompt:focus-visible{outline-offset:3px}.pb-actions{flex-wrap:wrap;align-items:center;gap:8px 14px;display:flex}.pb-copy{color:#fff;background:#171717;border-radius:7px;min-height:44px;padding:0 20px;font-size:13px;font-weight:600}.pb-copy:hover{background:#333}.pb-status{color:#2f6b3a;min-height:1.55em;font-size:12px}.pb-skip{border-top:1px solid var(--line);margin-top:64px;padding-top:40px}.pb-skip-head{max-width:680px;margin-bottom:24px}.pb-skip-head h2{margin:7px 0 8px;font-size:28px;line-height:1.15}.pb-skip-head>p:last-child{color:#555;font-size:14px}.pb-recs{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;display:grid}.pb-recs .card-body h3{letter-spacing:-.025em;margin:0;font-size:17px;font-weight:600;line-height:1.2}.pb-all{border-bottom:1px solid #0000;align-items:center;gap:6px;min-height:44px;margin-top:16px;font-size:13px;font-weight:600;display:inline-flex}.pb-all:hover{border-bottom-color:currentColor}.pb-explain{border-top:1px solid var(--line);margin-top:56px;padding-top:40px}.pb-explain h2{margin-bottom:22px;font-size:24px}.pb-explain-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;display:grid}.pb-explain h3{margin:0 0 8px;font-size:15px;font-weight:600}.pb-explain p{color:#4f4f4f;font-size:14px}@media (width<=1050px){.pb-page{padding:36px 28px 72px}.pb-tool{grid-template-columns:minmax(0,1fr)}.pb-output{position:static}.pb-prompt{height:520px}.pb-styles{grid-template-columns:repeat(3,minmax(0,1fr))}.pb-recs{gap:14px}.pb-explain-grid{grid-template-columns:minmax(0,1fr);gap:20px}}@media (width<=680px){.pb-page{padding:28px 16px 56px}.pb-intro h1{font-size:30px}.pb-controls{padding:16px}.pb-row,.pb-styles,.pb-recs{grid-template-columns:minmax(0,1fr)}.pb-style span{min-height:52px}.pb-segment span{min-height:40px}.pb-prompt{height:440px;padding:16px;font-size:12px}.pb-copy{width:100%}.pb-skip{margin-top:48px}}@media (prefers-reduced-motion:reduce){.pb-style span{transition:none}}