*{box-sizing:border-box}html{color-scheme:dark}body{margin:0;background:#111a18;color:#e7ecdf;font:15px/1.5 system-ui,sans-serif}main{max-width:1500px;margin:auto;padding:24px 36px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}header{display:flex;align-items:center;justify-content:space-between;padding-bottom:24px;border-bottom:1px solid #2d3c35}.brand{font-size:25px;font-weight:750;color:#d9edb4;display:flex;gap:16px;align-items:center}.brand span{font:11px ui-monospace,monospace;letter-spacing:.16em}.back{font-size:12px;color:#b4c1b2}.intro{display:flex;justify-content:space-between;gap:30px;align-items:end;margin:30px 0}.eyebrow,.section-label{font:10px ui-monospace,monospace;letter-spacing:.16em;color:#95b389}h1{font-size:clamp(24px,2.4vw,36px);line-height:1.15;letter-spacing:-.035em;font-weight:550;margin:9px 0 0}.intro p{max-width:300px;font-size:13px;color:#9aa99c;margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:20px}.view{min-width:0}#viewport{height:min(65vh,720px);min-height:430px;position:relative;border:1px solid #35453a;background:#26332c;border-radius:12px;overflow:hidden;touch-action:none}canvas{display:block;width:100%;height:100%;outline:none}.view-top,.view-bottom{position:absolute;left:22px;right:22px;display:flex;justify-content:space-between;align-items:center;z-index:2;pointer-events:none}.view-top{top:18px;font:10px ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:#d2dbcc}.view-bottom{bottom:16px;font-size:11px;color:#acb9a9}.view-bottom button{pointer-events:auto}#assetStatus{color:#acbd99}#loading{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#1e2b25;z-index:1;color:#d6e6bf;gap:10px;font-size:18px}#loading span{font-size:12px;color:#a3b29d}.camera-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:16px 0}.camera-bar label{display:flex;align-items:center;gap:10px;flex:1;font-size:11px;min-width:220px}.camera-bar input{width:100px;flex:1}.camera-bar output{min-width:28px}.camera-bar button,.view-bottom button,.playback button{border:1px solid #425540;background:#24372b;color:#dbe8d0;border-radius:5px;padding:8px 11px;font-size:11px}aside{background:#1b2821;border:1px solid #344433;border-radius:12px;padding:20px}.section-label{margin-bottom:10px}.segmented{display:flex;gap:4px;margin-bottom:24px;padding:4px;border-radius:7px;background:#101c16}.segmented button{flex:1}.segmented button,.categories button{border:1px solid transparent;border-radius:5px;background:transparent;color:#9eaf9c;padding:10px;font-size:12px}.segmented button[aria-pressed=true],.categories button[aria-pressed=true]{background:#d4e9ad;color:#1b291b}.categories{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}.categories button{border-color:#3e503b;padding:9px 6px}.outfit-info{padding:22px 0;margin:0 0 20px;border-bottom:1px solid #354533;min-height:150px}#outfitNumber{font:9px ui-monospace,monospace;color:#97b381;letter-spacing:.16em}h2{font-size:23px;font-weight:550;letter-spacing:-.025em;line-height:1.2;margin:8px 0}.outfit-info p{font-size:12px;color:#a6b4a0;margin:0 0 13px}#swatches{display:flex;gap:9px}#swatches button{width:22px;height:22px;border-radius:50%;border:2px solid #607153;outline:1px solid transparent}#swatches button[aria-pressed=true]{outline-color:#e5efda;outline-offset:3px}.select-label{display:block;font-size:11px;color:#9daf9a;margin-bottom:6px}select{width:100%;background:#112017;color:#dfe9d5;border:1px solid #4b6146;border-radius:5px;padding:11px;font-size:12px}.playback{display:flex;gap:8px;margin:10px 0}.playback button{flex:1}input[type=range]{accent-color:#cde5a3;cursor:pointer}#timeline{width:100%;margin:8px 0}.motion-note{font-size:11px;color:#9faf98;min-height:40px;margin-top:8px}footer{display:flex;justify-content:space-between;gap:18px;border-top:1px solid #2b3b30;margin-top:20px;padding:17px 0;color:#80947e;font-size:10px}button:hover{filter:brightness(1.15)}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid #ddedae;outline-offset:3px}@media(max-width:850px){main{padding:18px}.workspace{grid-template-columns:1fr}.intro{align-items:start}.intro p{max-width:220px}aside{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}.section-label,.segmented,.categories,.outfit-info{grid-column:1}.section-label{margin:8px 0}.segmented{margin:0}.outfit-info{margin:0}.select-label,select,.playback,#timeline,.motion-note{grid-column:2}aside>.section-label:nth-of-type(3){grid-column:2;grid-row:1}.select-label{grid-row:2;align-self:end}select{grid-row:3}.playback{grid-row:4}#timeline{grid-row:5}.motion-note{grid-row:6}#viewport{height:58vh}}@media(max-width:520px){main{padding:14px}.brand span{font-size:9px;letter-spacing:.08em}.back{font-size:10px}.intro{display:block;margin:22px 0}.intro p{max-width:100%;margin-top:12px}h1{max-width:290px}.eyebrow{font-size:9px}#viewport{min-height:360px;height:53vh}.view-top,.view-bottom{left:12px;right:12px}.view-top{font-size:8px}.view-bottom{font-size:9px}.camera-bar{gap:6px}.camera-bar label{flex-basis:100%}.camera-bar button{flex:1}aside{display:block;padding:18px}.section-label{margin:14px 0 10px}.segmented{margin-bottom:20px}.outfit-info{padding:18px 0;margin-bottom:16px;min-height:0}.categories{grid-template-columns:repeat(5,1fr)}.categories button{font-size:10px;padding:9px 2px}footer{display:block}footer span{display:block;margin-bottom:6px}}

.look-select{display:block;margin-top:22px}#look{margin-top:8px}.outfit-info{padding-top:22px}

@media(max-width:850px){aside{display:block}.section-label{margin-top:18px}.segmented{margin-bottom:22px}.outfit-info{margin-bottom:20px}}


@media(max-width:520px){.categories{grid-template-columns:repeat(3,1fr)}.categories button{min-height:44px;font-size:12px;padding:9px 5px}.view-top{gap:12px;align-items:start}#lookLabel{flex:1}#assetStatus{max-width:78px;text-align:right}.segmented button,.playback button{min-height:44px}}