/* SAT-01 Portrait Studio — isolated styles for the illustrated artwork catalog. */
.pfpx-studio { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(22px,4vw,50px); align-items:start; color:#f0eee7; }
.pfpx-studio *, .pfpx-studio *::before, .pfpx-studio *::after { box-sizing:border-box; }
.pfpx-preview { min-width:0; overflow:hidden; border:1px solid #3b392e; border-radius:17px; background:#0c100d; box-shadow:0 20px 70px #0005; }
.pfpx-preview-top { min-height:57px; padding:14px 19px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#141813; border-bottom:1px solid #34382b; }
.pfpx-terminal-label, .pfpx-live-dot, .pfpx-eyebrow { font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:10px; font-weight:600; letter-spacing:.08em; }
.pfpx-terminal-label { color:#aeb8a6; }
.pfpx-live-dot { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; color:#b7e9bb; }
.pfpx-live-dot::before { content:""; width:5px; height:5px; background:#71f5a8; border-radius:50%; box-shadow:0 0 10px #71f5a84d; }
.pfpx-stage { position:relative; aspect-ratio:1; width:100%; background:radial-gradient(ellipse at 50% 40%,#242a1b,#080b08 70%); overflow:hidden; }
.pfpx-canvas { display:block; width:100%; height:100%; aspect-ratio:1; object-fit:contain; }
.pfpx-stage-message { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; text-align:center; padding:25px; color:#bdc5b7; font:12px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace; }
.pfpx-stage[data-state="ready"] .pfpx-stage-message { display:none; }
.pfpx-stage[data-state="error"] .pfpx-stage-message { color:#ffbb8a; }
.pfpx-caption { min-height:87px; display:flex; justify-content:space-between; align-items:center; gap:14px; padding:20px; border-top:1px solid #34382b; }
.pfpx-look-name { font-size:clamp(18px,2vw,25px); line-height:1.15; letter-spacing:-.04em; color:#f7f0df; }
.pfpx-look-subtitle { max-width:160px; text-align:right; color:#aaaF9f; font:11px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace; }
.pfpx-controls { min-width:0; padding:1px 0; }
.pfpx-intro { margin-bottom:23px; }
.pfpx-eyebrow { color:#f7931a; }
.pfpx-intro h3 { margin:10px 0 10px; max-width:360px; font-size:clamp(26px,2.8vw,39px); line-height:1.12; letter-spacing:-.045em; color:#f5f1e6; }
.pfpx-intro p { margin:0; max-width:440px; font-size:13px; line-height:1.75; color:#adb4a4; }
.pfpx-look-group, .pfpx-finish { min-width:0; margin:0; padding:0; border:0; }
.pfpx-look-group legend, .pfpx-finish legend { padding:0; margin:0 0 13px; width:100%; font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.09em; text-transform:uppercase; color:#c7cbbb; }
.pfpx-look-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
.pfpx-look { position:relative; min-width:0; padding:3px; display:flex; flex-direction:column; border:1px solid #30372c; border-radius:9px; background:#141914; color:#b8c0ad; text-align:left; cursor:pointer; transition:border-color .15s ease,background .15s ease; }
.pfpx-look:hover { border-color:#89816a; background:#1c2119; }
.pfpx-look[aria-pressed="true"] { background:#2d2111; border-color:#f7931a; box-shadow:0 0 0 1px #f7931a; color:#ffd48d; }
.pfpx-look[aria-pressed="true"]::after { content:"✓"; position:absolute; top:8px; right:8px; width:18px; height:18px; display:grid; place-items:center; border-radius:50%; background:#f7931a; color:#11170f; font:700 11px ui-monospace,monospace; box-shadow:0 2px 8px #0009; }
.pfpx-thumb { display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:5px; background:#0a0d0a; }
.pfpx-look-label { display:flex; align-items:center; min-height:35px; padding:7px 4px 5px; font:10px/1.25 ui-monospace,SFMono-Regular,Consolas,monospace; overflow-wrap:anywhere; }
.pfpx-finish { margin-top:24px; }
.pfpx-select-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pfpx-select-field { display:flex; flex-direction:column; min-width:0; gap:7px; font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; color:#aab5a0; }
.pfpx-select { width:100%; min-width:0; min-height:45px; padding:10px 30px 10px 12px; border:1px solid #3a4233; border-radius:6px; background:#151b14; color:#e7ecde; font:11px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace; color-scheme:dark; cursor:pointer; }
.pfpx-actions { display:grid; grid-template-columns:1.25fr 1fr; gap:11px; margin-top:21px; }
.pfpx-download, .pfpx-random { display:flex; justify-content:center; align-items:center; min-height:49px; padding:12px 10px; border-radius:6px; cursor:pointer; font:600 12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:-.02em; }
.pfpx-download { border:1px solid #f7931a; background:#f7931a; color:#15180f; }
.pfpx-download:hover:not(:disabled) { background:#ffad49; border-color:#ffad49; }
.pfpx-download:disabled { cursor:wait; opacity:.48; }
.pfpx-random { border:1px solid #454b39; background:#1a2017; color:#e2e8d8; }
.pfpx-random:hover { border-color:#89926e; background:#262d20; }
.pfpx-utility { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px 15px; margin-top:12px; }
.pfpx-text-button, .pfpx-original { display:inline-flex; align-items:center; min-height:36px; margin:0; padding:3px 0; border:0; border-radius:2px; background:none; font:10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; color:#c8cdbb; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }
.pfpx-original[hidden] { display:none; }
.pfpx-text-button:hover, .pfpx-original:hover { color:#ffb65a; }
.pfpx-status { min-height:20px; margin:10px 0 0; font:10px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; color:#b7dfb8; }
.pfpx-note { max-width:490px; margin:10px 0 0; padding-top:15px; border-top:1px solid #2d3528; color:#9ea994; font:10px/1.8 ui-monospace,SFMono-Regular,Consolas,monospace; }
.pfpx-studio button:focus-visible, .pfpx-studio select:focus-visible, .pfpx-studio a:focus-visible { outline:3px solid #b7f9ce; outline-offset:4px; }
@media (min-width:1000px) { .pfpx-preview { position:sticky; top:100px; } }
@media (max-width:760px) {
  .pfpx-studio { grid-template-columns:minmax(0,1fr); gap:27px; }
  .pfpx-preview { max-width:540px; width:100%; margin-inline:auto; }
  .pfpx-intro { margin-bottom:20px; }
  .pfpx-intro h3 { max-width:none; font-size:31px; }
  .pfpx-look-grid { gap:10px; }
  .pfpx-look-label { font-size:11px; }
  .pfpx-note { max-width:none; }
}
@media (max-width:380px) {
  .pfpx-preview-top { padding:12px; gap:7px; }
  .pfpx-terminal-label, .pfpx-live-dot { font-size:8px; letter-spacing:.04em; }
  .pfpx-caption { padding:15px 12px; gap:10px; }
  .pfpx-look-subtitle { max-width:130px; font-size:9px; }
  .pfpx-look-grid { gap:7px; }
  .pfpx-look-label { font-size:9px; min-height:34px; padding-inline:2px; }
  .pfpx-actions { grid-template-columns:1fr; gap:9px; }
  .pfpx-select-grid { gap:8px; }
  .pfpx-select { padding-left:8px; font-size:10px; }
  .pfpx-utility { align-items:flex-start; }
}
@media (prefers-reduced-motion:reduce) { .pfpx-studio * { transition:none !important; } }