:root{--selected-ink:#008ee8;--crosshair-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25'%3E%3Cpath d='M12.5 0v8M12.5 17v8M0 12.5h8M17 12.5h8' stroke='%23000' stroke-width='2' stroke-linecap='square'/%3E%3Ccircle cx='12.5' cy='12.5' r='2.5' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 12 12, crosshair;--wheel-angle:202deg;--wheel-color:#008ee8;--wheel-x:50vw;--wheel-y:50vh;color:#18212b;font-synthesis:none;text-rendering:geometricprecision;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body{width:100%;height:100%;cursor:var(--crosshair-cursor);background:#fff;margin:0;overflow:hidden}body{min-width:320px}button,input{font:inherit}#app,#app canvas{width:100%;height:100%;cursor:var(--crosshair-cursor);display:block;position:fixed;inset:0}.color-wheel-cursor{left:var(--wheel-x);top:var(--wheel-y);z-index:4;pointer-events:none;background:conic-gradient(from 90deg,#ff1f1f 0deg,#ffd400 60deg,#15e000 120deg,#00d5ff 180deg,#1728ff 240deg,#f100ff 300deg,#ff1f1f 360deg);border-radius:50%;width:134px;height:134px;position:fixed;transform:translate(-50%,-50%);box-shadow:0 7px 20px #1f2d4024,inset 0 0 0 1px #00000014}.color-wheel-cursor:after{content:"";background:#fffffff5;border-radius:50%;position:absolute;inset:25px;box-shadow:inset 0 0 0 1px #18212b14,0 0 18px #ffffff6b}.color-wheel-selector{z-index:1;background:var(--wheel-color);width:17px;height:17px;transform:rotate(var(--wheel-angle)) translateX(55px) translate(-50%, -50%);transform-origin:0 0;border:3px solid #fff;border-radius:50%;position:absolute;top:50%;left:50%;box-shadow:0 0 0 1px #151c247a,0 3px 9px #141f2c47}.toolbar{z-index:5;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#ffffffd1;border:1px solid #1d4a6526;border-radius:8px;align-items:center;gap:10px;width:fit-content;max-width:calc(100vw - 24px);padding:8px;display:flex;position:fixed;top:12px;left:50%;transform:translate(-50%);box-shadow:0 14px 34px #1e374a1f}.toolbar-hint{z-index:5;color:#29475b;white-space:nowrap;pointer-events:none;font-size:11px;line-height:1;position:fixed;top:84px;left:50%;transform:translate(-50%)}.action-group{align-items:center;gap:6px;display:flex}.icon-button{color:#1c3f55;width:32px;height:32px;cursor:var(--crosshair-cursor);background:#ffffffdb;border:1px solid #1c3f552e;border-radius:8px;place-items:center;transition:border-color .12s,box-shadow .12s,transform .12s;display:grid}.icon-button:hover{border-color:#008ee873;transform:translateY(-1px);box-shadow:0 8px 18px #007ec81f}.icon-button svg{stroke-width:2px;width:17px;height:17px}.slider-grid{grid-template-columns:repeat(6,minmax(70px,86px));align-items:center;gap:7px;display:grid}.slider-grid label{color:#29475b;grid-template-columns:1fr;gap:3px;min-width:0;font-size:11px;line-height:1;display:grid}.slider-grid span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.slider-grid input{width:100%;accent-color:var(--selected-ink);cursor:var(--crosshair-cursor)}@media (width<=900px){.toolbar{scrollbar-width:thin;flex-wrap:nowrap;width:calc(100vw - 24px);overflow:auto hidden}.slider-grid{order:1;grid-template-columns:repeat(6,minmax(54px,1fr));min-width:516px}.action-group{flex:none;order:2}}@media (width<=460px){.slider-grid{grid-template-columns:repeat(6,minmax(54px,1fr))}}