*{box-sizing:border-box}body{margin:0;background:#101717;color:#ecf0eb;font:14px/1.5 system-ui,sans-serif}header{height:78px;padding:0 36px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #31403c}header div{display:flex;align-items:center;gap:18px}header strong{font-size:22px;letter-spacing:-1px}.mark{border:1px solid #759888;padding:7px;color:#b2dbc1}.tag,.eyebrow,header>span{font-size:10px;letter-spacing:2px;color:#9fb6a8}.tag{background:#263a30;padding:5px 8px}main{display:grid;grid-template-columns:minmax(0,1fr) 350px;min-height:calc(100vh - 78px)}.studio{position:relative;min-height:720px;background:radial-gradient(ellipse at 50% 55%,#344541 0%,#1a2725 55%,#14201d 100%)}.heading{position:absolute;top:28px;left:36px;z-index:1;pointer-events:none}.heading p{font-size:10px;color:#b3ccb9;letter-spacing:2px}h1{font-size:43px;font-weight:450;letter-spacing:-2px;margin:6px 0}.heading span,.muted{color:#9cafa6;font-size:12px}#viewport{width:100%;height:calc(100vh - 78px);min-height:720px}canvas{display:block;touch-action:none}.viewbar{position:absolute;bottom:55px;left:32px;display:flex;gap:16px;align-items:center}.viewbar label{font-size:12px}#status{position:absolute;bottom:12px;left:36px;font-size:12px;color:#c0d3c4}aside{padding:30px 25px;border-left:1px solid #31403c;background:#14201b}.eyebrow{margin:16px 0}h2{font-size:24px;line-height:1.2;font-weight:450;letter-spacing:-.6px;margin:0 0 24px}label{display:block;color:#b9cbbd;font-size:12px;margin-bottom:8px}select,input,button{font:inherit}select{width:100%;background:#1e3027;color:#e9f1ea;border:1px solid #43564b;padding:11px;border-radius:5px}button{cursor:pointer;background:#21342a;color:#dde9df;border:1px solid #3d5646;padding:11px 14px;border-radius:5px}button:hover{background:#304a39}button:disabled{opacity:.4;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #c7e4a8;outline-offset:3px}.primary{background:#c5e3a6;color:#17251a;border:0;font-weight:600}.primary:hover{background:#d5efbc}aside>button{width:100%;margin:5px 0}.pair{display:flex;gap:8px;margin:8px 0}.pair button{flex:1;padding:10px 8px;font-size:12px}.colorrow{display:flex;gap:12px}#paint{width:50px;height:44px;border:0;background:none;padding:0;cursor:pointer}#hex{width:100%;min-width:0;background:#1e3027;border:1px solid #43564b;border-radius:5px;color:#ecf0eb;padding:10px}#swatches{display:flex;gap:10px;margin:15px 0}#swatches button{width:27px;height:27px;padding:0;border-radius:50%;border:2px solid #9aafa3}.note{font-size:12px;color:#a8bcb0;line-height:1.6;padding-bottom:12px;border-bottom:1px solid #314638}footer{margin-top:25px;font-size:10px;color:#8da496}a{color:#b7cdbb}@media(max-width:760px){header{padding:0 18px}header>span{display:none}main{display:block}.studio,#viewport{min-height:520px;height:65vh}.heading{top:15px;left:20px}h1{font-size:32px}.viewbar{left:15px;gap:10px;bottom:50px}.viewbar button{padding:7px}#status{left:20px}aside{border-left:0;border-top:1px solid #31403c}footer{margin-top:20px}}

#mode{margin-bottom:14px}#source{width:50px;height:44px;padding:0;border:0;background:none}#sample{flex:1;font-size:12px}#regionControls{padding:12px;background:#1a2b22;border-radius:5px;margin-bottom:14px}#tolerance{width:100%;accent-color:#c5e3a6}#regionControls label:not(:first-child){margin-top:12px}#sample[aria-pressed="true"]{background:#c5e3a6;color:#17251a}

[hidden]{display:none!important}#model{margin-bottom:8px}#maskControls{padding:12px;background:#1a2b22;border-radius:5px;margin-bottom:14px}.heading{position:relative;top:auto;left:auto;padding:22px 36px 0}#viewport{height:calc(100vh - 230px);min-height:560px}.studio{padding-bottom:75px}.viewbar{bottom:48px}#status{right:20px}@media(max-width:760px){.studio{height:auto;min-height:0}.heading{padding:15px 20px 0}.heading h1{font-size:28px;margin:0}.heading span{font-size:11px}#viewport{height:58vh;min-height:420px}.studio{padding-bottom:95px}.viewbar{bottom:65px}#status{bottom:8px}}

.highlight-toggle{display:flex;align-items:center;gap:8px;margin:14px 0 6px}.highlight-toggle input{accent-color:#ffcb48}#highlightHint{color:#ffcf64;font-size:11px;letter-spacing:0;margin:8px 0 0}
/* Palette library and demo account flow */
.flow-screen{max-width:1160px;margin:0 auto;padding:70px 36px;min-height:calc(100vh - 78px)}#loginScreen{display:grid;grid-template-columns:1.15fr 1fr;align-items:center;gap:80px}.welcome h1{font-size:64px;line-height:1.06;margin:24px 0}.welcome>p{max-width:390px;color:#afc2b6}.welcome-swatches{display:flex;gap:12px;margin-top:36px}.welcome-swatches i{height:56px;width:56px;border-radius:12px;background:#1accb4}.welcome-swatches i:nth-child(2){background:#e8e6da}.welcome-swatches i:nth-child(3){background:#f15f4d}.welcome-swatches i:nth-child(4){background:#587fbb}.flow-panel{background:#192a22;border:1px solid #3b5143;padding:34px;border-radius:16px}.flow-panel h2{font-size:30px;margin:18px 0}.step-tag{font-size:11px;letter-spacing:2px;color:#c5e3a6}.text-input{background:#1e3027;border:1px solid #587360;color:#ecf0eb;border-radius:6px;padding:12px;width:100%;font:inherit}.flow-panel .primary{width:100%;margin:20px 0 8px}.account-bar{display:flex;align-items:center;gap:14px;color:#b9cbbd;font-size:12px}.account-bar button{padding:8px 14px}.library-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:42px}.library-heading h1,.model-page h1{font-size:42px}.empty-library{text-align:center;padding:65px 20px;border:1px dashed #526c59;border-radius:12px;background:#16251d}.empty-library .mark{display:inline-block;margin-bottom:24px}.empty-library p{color:#a8bcb0}.empty-library button{margin-top:16px}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left}th{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:#9fb6a8}td,th{padding:20px 16px;border-bottom:1px solid #314638}td:nth-child(2){font-weight:600}td:last-child{text-align:right}td:nth-child(3){color:#afc2b6;font-size:12px}.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:38px}.model-card{text-align:left;padding:32px;background:#192b22;border-radius:12px}.model-card h2{margin:25px 0 12px}.model-card p{color:#afc2b6;font-size:13px}.model-card>span:last-child{display:block;margin-top:28px;color:#c5e3a6}.model-glyph{display:flex;align-items:center;justify-content:center;height:150px;background:radial-gradient(ellipse,#365b48,#1c3025);border:1px solid #496852;font-size:64px;letter-spacing:-5px;color:#c5e3a6}.text-button{margin-bottom:25px}.project-bar{display:flex;align-items:center;gap:16px;padding:18px 30px;border-bottom:1px solid #314638;background:#14201b;flex-wrap:wrap}.project-name{flex:1;min-width:200px;max-width:380px}.project-name label{margin-bottom:4px}.project-name input{padding:9px}#saveState{font-size:12px;color:#c5e3a6}#painterScreen aside>label[for=model],#painterScreen #model{display:none}#painterScreen .studio{min-width:0}.flow-status{color:#f2ca83;max-width:1100px;margin:0 auto;padding:0 30px}.flow-status:empty{display:none}#scopeControls>label{margin-top:12px}@media(max-width:760px){#loginScreen{grid-template-columns:1fr;gap:28px}.flow-screen{padding:35px 20px}.welcome h1{font-size:44px}.welcome-swatches{display:none}.flow-panel{padding:25px}.library-heading{align-items:flex-start;flex-direction:column}.library-heading h1,.model-page h1{font-size:34px}.model-grid{grid-template-columns:1fr}.project-bar{padding:15px;gap:10px}.project-name{order:-1;max-width:none;flex-basis:100%}.account-bar{gap:8px}header{height:auto;min-height:78px;flex-wrap:wrap;gap:10px;padding-top:12px;padding-bottom:12px}header div{gap:10px}td,th{padding:14px 10px}td{min-width:140px}}

.palette-thumbnail{display:block;width:160px;height:120px;object-fit:contain;border-radius:8px;border:1px solid #3b5143;background:#1a2725}.thumbnail-placeholder{display:flex;align-items:center;justify-content:center;width:160px;height:120px;border-radius:8px;border:1px dashed #3b5143;color:#9fb6a8;font-size:11px;padding:12px;text-align:center}.thumbnail-cell{width:185px}#paletteTable td:nth-child(2){font-weight:400}#paletteTable td:nth-child(3){font-size:14px;font-weight:600;color:#ecf0eb}#paletteTable td:nth-child(4){font-size:12px;color:#afc2b6}@media(max-width:760px){.palette-thumbnail,.thumbnail-placeholder{width:112px;height:84px}.thumbnail-cell{min-width:132px}}