:root{color:#171717;background:#f4f1ea;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,input,select{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.appShell{min-height:100vh;padding-bottom:96px}.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px 22px;border-bottom:1px solid #ded9cc;background:#faf8f3f5;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.brand{display:flex;align-items:center;gap:12px;min-width:230px}.brandMark{display:grid;width:42px;height:42px;place-items:center;border-radius:8px;color:#fff;background:#171717}.brand strong,.brand span{display:block}.brand strong{font-size:18px}.brand span{margin-top:2px;color:#6f6a60;font-size:13px}.toolTabs{display:flex;align-items:center;gap:4px;overflow-x:auto}.toolTabs button,.segmented button,.exportGrid button,.panel>button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 12px;border:1px solid transparent;border-radius:7px;color:#3f3a33;background:transparent;white-space:nowrap}.toolTabs button.active,.segmented button.active,.exportGrid button:hover,.panel>button:hover{border-color:#25221d;color:#111;background:#fff}.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;max-width:1560px;margin:0 auto;padding:26px 22px}.panel{min-height:calc(100vh - 178px);padding:22px;border-right:1px solid #ded9cc}.panel h1{margin:0 0 10px;font-size:32px;line-height:1.05;letter-spacing:0}.panel p{margin:0 0 24px;color:#615d54;line-height:1.5}.panel label,.controlGroup label{display:block;margin:16px 0 8px;color:#504b43;font-size:13px;font-weight:700}.panel input,.panel select,.bottomBar input{width:100%;min-height:42px;border:1px solid #d6d0c2;border-radius:7px;padding:0 12px;color:#171717;background:#fffefa}.segmented{display:flex;flex-wrap:wrap;gap:8px}.segmented.vertical{display:grid}.controlGroup{margin-top:18px}.colorWheel{position:relative;display:block;width:min(100%,280px);aspect-ratio:1;margin:0 auto;border:1px solid #d6d0c2;border-radius:999px;background:radial-gradient(circle,#fff 0,#fff 8%,#ffffffc7 22%,#fff0 58%),radial-gradient(circle,#0000 0,#0000 55%,#0000002e),conic-gradient(#f4362d,#ffb000,#d8e600,#26d353,#00c5dd,#3567ff,#a442ff,#ef3a9d,#f4362d);box-shadow:inset 0 0 0 12px #fff3,0 14px 36px #312a1e24;touch-action:none}.colorWheel:after{position:absolute;top:18%;right:18%;bottom:18%;left:18%;border:1px solid rgba(255,255,255,.76);border-radius:inherit;content:"";pointer-events:none}.wheelCrosshair{position:absolute;inset:50% auto auto 50%;width:10px;height:10px;transform:translate(-50%,-50%);border:2px solid #171717;border-radius:99px;background:#fffefa;box-shadow:0 0 0 3px #ffffffa6}.wheelMarker{position:absolute;display:grid;width:30px;height:30px;place-items:center;transform:translate(-50%,-50%);border:3px solid #fffefa;border-radius:99px;font-size:12px;font-weight:900;box-shadow:0 4px 14px #00000042;pointer-events:none}.wheelMarker.selected{outline:3px solid #171717}.wheelMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.wheelMeta span{display:grid;min-height:34px;place-items:center;border:1px solid #ddd7cb;border-radius:7px;color:#504b43;background:#fffefa;font-size:13px;font-weight:800}.controlGroup input[type=color]{height:54px;padding:4px}.colorList{display:grid;gap:8px}.colorList button{display:flex;align-items:center;gap:10px;min-height:42px;border:1px solid #ddd7cb;border-radius:7px;padding:0 10px;color:#211f1b;background:#fffefa}.colorList button.selected{border-color:#171717;box-shadow:inset 0 0 0 1px #171717}.colorList span{width:24px;height:24px;border-radius:99px;border:1px solid rgba(0,0,0,.12)}.uploadBox{display:grid;min-height:120px;place-items:center;border:1px dashed #aaa294;border-radius:8px;background:#fffefa}.uploadBox input{display:none}.stage{min-width:0}.mainPreview{display:grid;gap:18px}.swatchGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:hidden;border-radius:8px;border:1px solid #dfd9cc}.swatchGrid.large{min-height:460px}.swatch{position:relative;display:flex;min-height:160px;align-items:flex-end;justify-content:space-between;padding:22px;text-align:left}.swatch span{font-size:18px;font-weight:800}.imagePreview{position:relative;overflow:hidden;max-height:460px;border-radius:8px;border:1px solid #dfd9cc;background:#222}.imagePreview img{display:block;width:100%;height:min(44vh,460px);object-fit:contain}.pickPoint{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);border:3px solid #fff;border-radius:99px;box-shadow:0 3px 14px #00000057}.pickPoint.selected{outline:3px solid #111}.gradientPreview{min-height:180px;border-radius:8px;border:1px solid #dfd9cc}.exportGrid{display:flex;flex-wrap:wrap;gap:10px}.exportGrid button,.panel>button{border-color:#d6d0c2;background:#fffefa}.blindnessGrid{display:grid;gap:16px}.blindnessRow{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:stretch;gap:12px}.blindnessRow strong{align-self:center;color:#534e45}.contrastPreview{display:grid;min-height:calc(100vh - 210px);align-content:center;gap:18px;padding:54px;border-radius:8px}.contrastPreview span{font-size:18px;font-weight:800}.contrastPreview strong{max-width:820px;font-size:clamp(38px,7vw,96px);line-height:.98;letter-spacing:0}.contrastPreview p{max-width:620px;font-size:20px;line-height:1.45}.contrastScore{margin-top:18px;font-size:48px;font-weight:900}.checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.checks span,.status{display:inline-flex;align-items:center;gap:6px;min-height:34px;border-radius:7px;padding:0 10px;font-weight:800}.pass,.status.ok{color:#0d6b3d;background:#dff6e9}.fail,.status.danger{color:#9f1d1d;background:#ffe1dd}.libraryGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.paletteCard{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid #ddd7cb;border-radius:8px;background:#fffefa}.cardPreview{grid-column:1 / -1;display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;height:82px;border-radius:6px}.cardPreview span{min-width:0}.paletteCard strong,.paletteCard span{display:block}.paletteCard span{margin-top:4px;color:#736d63;font-size:13px}.loginRow{display:grid;gap:8px}.bottomBar{position:fixed;right:18px;bottom:18px;left:18px;z-index:20;display:grid;grid-template-columns:260px minmax(180px,1fr) repeat(4,46px) auto;gap:10px;align-items:center;max-width:1220px;margin:0 auto;padding:12px;border:1px solid #dad3c5;border-radius:8px;background:#fffefaf5;box-shadow:0 18px 50px #2e26172e;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.miniPalette{display:grid;grid-template-columns:repeat(5,1fr);overflow:hidden;height:44px;border-radius:7px;border:1px solid #d6d0c2}.miniPalette button{min-width:0}.iconButton,.primaryButton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;border-radius:7px}.iconButton{color:#171717;border:1px solid #d6d0c2;background:#fffefa}.primaryButton{padding:0 16px;color:#fff;background:#285ee8;font-weight:800}.toast{position:fixed;right:22px;bottom:100px;max-width:min(420px,calc(100vw - 44px));border-radius:7px;padding:12px 14px;color:#fff;background:#171717;font-size:14px;box-shadow:0 12px 30px #0000002e}@media (max-width: 980px){.topbar,.workspace{display:grid}.workspace{grid-template-columns:1fr}.panel{min-height:auto;border-right:0;border-bottom:1px solid #ded9cc;padding:8px 0 24px}.swatchGrid,.swatchGrid.large{grid-template-columns:1fr}.swatchGrid.large{min-height:0}.swatch{min-height:110px}.colorWheel{max-width:260px}.blindnessRow{grid-template-columns:1fr}.bottomBar{grid-template-columns:1fr repeat(4,42px)}.bottomBar input,.bottomBar .primaryButton,.miniPalette{grid-column:1 / -1}}@media (max-width: 560px){.topbar,.workspace{padding-right:14px;padding-left:14px}.brand{min-width:0}.brand span,.toolTabs button span{display:none}.panel h1{font-size:28px}.contrastPreview{min-height:420px;padding:28px}.contrastPreview strong{font-size:38px}.bottomBar{right:10px;left:10px;bottom:10px}}