*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol{margin:0;padding:0}html,body{height:100%;touch-action:pan-x pan-y}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:1rem;line-height:1.5;color:#18181b;background:#f4f4f5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}:focus-visible{outline:2px solid #6366f1;outline-offset:2px}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}button{font-family:inherit;font-size:inherit;cursor:pointer;border:none;background:none;padding:0;color:inherit}input{font-family:inherit;font-size:inherit}img{max-width:100%;display:block}.app{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden;background:#f4f4f5}.app-body{display:flex;flex:1;min-height:0;min-width:0}.canvas-stage{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden;background:#f4f4f5}.canvas-container{position:absolute;inset:0;overflow:hidden}.canvas-container__surface{display:block;width:100%;height:100%}.panel-heading{font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:#18181b;margin:0}.panel-section{display:flex;flex-direction:column;gap:8px;width:100%}.panel-section[hidden]{display:none}.panel-section__header,.panel-section__body{display:contents}.panel-section__toggle,.panel-section__settings{display:none}.title-bar,.tool-rail,.inspector,.status-bar,.zoom-control,.direction-popup,.flip-all,.touch-modifier,.toast{zoom:var(--ui-scale, 1)}.title-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;height:56px;flex-shrink:0;padding:0 20px;background:#fff;border-bottom:1px solid #e4e4e7}.title-bar__home{display:flex;align-items:center;gap:16px;min-width:0}.title-bar__hub{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#71717a;font-size:.8125rem;font-weight:500;text-decoration:none;white-space:nowrap;transition:color .15s ease}.title-bar__hub:hover{color:#18181b;text-decoration:underline;text-underline-offset:3px}.title-bar__hub:active{color:#3f3f46}.title-bar__hub:focus-visible{outline:2px solid #6366f1;outline-offset:2px;border-radius:6px}.title-bar__brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:10px;min-width:0}.title-bar__mark{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;flex-shrink:0;border-radius:8px;background:#f4f4f5;color:#18181b}.title-bar__name{font-size:16px;font-weight:600;letter-spacing:-.2px;color:#18181b;white-space:nowrap}.title-bar__mode{justify-self:center}.title-bar__actions{justify-self:end;display:flex;align-items:center;gap:8px}.title-bar__divider{width:1px;height:24px;flex-shrink:0;background:#e4e4e7}@media (max-width: 899px){.title-bar__name{display:none}}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;flex-shrink:0;border-radius:8px;background:#fff;border:1px solid #e4e4e7;color:#71717a;transition:background .15s ease,color .15s ease,border-color .15s ease}.icon-button:hover:not(:disabled){background:#fafafa;color:#18181b}.icon-button:disabled{opacity:.4;cursor:default}.icon-button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.pill-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:36px;padding:0 14px;border-radius:8px;font-size:.8125rem;font-weight:500;white-space:nowrap;transition:background .15s ease,color .15s ease,border-color .15s ease}.pill-button--outline{background:#fff;border:1px solid #e4e4e7;color:#18181b}.pill-button--outline:hover{background:#fafafa}.pill-button--primary{background:#18181b;color:#fff;font-weight:600}.pill-button--primary:hover{background:#3f3f46}.pill-button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.icon-wrap{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.tool-rail{display:flex;flex-direction:column;align-items:center;gap:4px;width:68px;min-width:68px;flex-shrink:0;padding:10px 0;background:#fff;border-right:1px solid #e4e4e7;overflow:visible}@media (max-width: 767px){.tool-rail{width:56px;min-width:56px}}.rail-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;width:56px;height:50px;flex-shrink:0;border-radius:8px;color:#71717a;transition:background .15s ease,color .15s ease}.rail-button>.icon-wrap{box-sizing:border-box;width:34px;height:34px;border:1px solid transparent;border-radius:50%;transition:border-color .15s ease}.rail-button:hover{background:#fafafa;color:#18181b}.rail-button:hover:not(.rail-button--active)>.icon-wrap{border-color:#e4e4e7}.rail-button--active{color:#18181b}.rail-button--active>.icon-wrap{border-color:#d4d4d8}.rail-button--active .rail-button__label{font-weight:600}.rail-button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.rail-button__label{font-size:.5625rem;font-weight:500;line-height:1;white-space:nowrap}.rail-shapes{display:contents}.inspector{display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:340px;min-width:340px;flex-shrink:0;--inspector-pad: 20px;padding:var(--inspector-pad);background:#fff;border-left:1px solid #e4e4e7;overflow-y:auto;overflow-x:hidden}@media (max-width: 1279px){.inspector{width:300px;min-width:300px;--inspector-pad: 16px;gap:16px}}@media (max-width: 767px){.inspector{width:244px;min-width:244px;--inspector-pad: 8px}}.panel-heading-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;flex-wrap:wrap;min-width:0}.panel-hint{font-size:10px;color:#a1a1aa;white-space:nowrap}p.panel-hint{margin:4px 0 0;white-space:normal;overflow-wrap:anywhere;line-height:1.4}.inspector-tabs{display:none}.inspector--tabbed{padding-top:0}.inspector--tabbed>.inspector-tabs{display:flex;position:sticky;top:0;z-index:2;flex-shrink:0;align-self:stretch;margin:0 calc(-1 * var(--inspector-pad)) 4px;background:#fff;border-bottom:1px solid #e4e4e7}.inspector--tabbed[data-tab=color]>.panel-section:not([data-tab=color]){display:none}.inspector--tabbed[data-tab=trace]>.panel-section:not([data-tab=trace]){display:none}.inspector--tabbed[data-tab=controls]>.panel-section:not([data-tab=controls]){display:none}.inspector-tabs__tab{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:0;height:40px;padding:0 8px;margin-bottom:-1px;border-bottom:2px solid transparent;color:#71717a;font-size:12px;font-weight:500;white-space:nowrap;transition:color .15s ease,border-color .15s ease}.inspector-tabs__tab:hover{color:#18181b}.inspector-tabs__tab:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}.inspector-tabs__tab--active{color:#18181b;font-weight:600;border-bottom-color:#18181b}.status-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:32px;flex-shrink:0;padding:0 20px;background:#fff;border-top:1px solid #e4e4e7}.status-bar__info{display:flex;align-items:center;gap:8px;font-size:.6875rem;color:#71717a;white-space:nowrap}.status-bar__outcome{color:#18181b;font-weight:600}.status-bar__muted{color:#a1a1aa}.status-bar__hotkeys{display:flex;align-items:center;gap:16px;margin-left:auto;min-width:0;height:20px;flex-wrap:wrap;row-gap:20px;justify-content:flex-end;overflow:hidden}.status-bar__credit{order:1;flex-shrink:0;align-self:stretch;display:inline-flex;align-items:center;font-size:.6875rem;color:#71717a;text-decoration:underline;text-underline-offset:2px;white-space:nowrap;transition:color .15s ease}.status-bar__credit:hover{color:#18181b}.status-bar__credit:active{color:#3f3f46}.status-bar__credit:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}.hotkey{display:flex;align-items:center;gap:6px;white-space:nowrap}.hotkey__key{display:inline-flex;align-items:center;justify-content:center;height:20px;padding:0 6px;border-radius:5px;background:#f4f4f5;border:1px solid #e4e4e7;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:10px;color:#71717a}.hotkey__label{font-size:.6875rem;color:#71717a}.zoom-control{position:absolute;left:20px;bottom:20px;z-index:2;display:flex;align-items:center;gap:2px;height:36px;padding:0 6px;border-radius:9px;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 12px -2px #1018281a}.zoom-control__button{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;color:#71717a;transition:background .15s ease,color .15s ease}.zoom-control__button:hover{background:#fafafa;color:#18181b}.zoom-control__button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.zoom-control__level{min-width:44px;padding:0 4px;text-align:center;font-size:12px;font-weight:500;color:#18181b;font-variant-numeric:tabular-nums}.play-flips{position:absolute;left:178px;bottom:20px;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 12px -2px #1018281a;color:#18181b;transition:background .15s ease,color .15s ease}.play-flips:hover:not(:disabled){background:#fafafa}.play-flips:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.play-flips:disabled{color:#d4d4d8;cursor:default}.flip-all{position:absolute;left:50%;transform:translate(-50%);bottom:20px;z-index:3;display:none;align-items:stretch;gap:2px;height:40px;padding:2px;border-radius:11px;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 12px -2px #1018281a}.flip-all--on{display:flex}.flip-all__action{display:flex;align-items:center;padding:0 16px;border-radius:9px;font-size:.8125rem;font-weight:600;color:#18181b;transition:background .15s ease}.flip-all__action:hover{background:#fafafa}.flip-all__action:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.flip-all__discard{display:flex;align-items:center;justify-content:center;width:32px;border-radius:9px;color:#71717a;transition:background .15s ease,color .15s ease}.flip-all__discard:hover{background:#fafafa;color:#18181b}.flip-all__discard:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.selection-bar__label{display:flex;align-items:center;padding:0 12px;font-size:.8125rem;font-weight:500;color:#71717a;white-space:nowrap}.selection-bar__button{gap:8px;padding:0 14px}@media (pointer: coarse){.selection-bar__button{min-width:44px}}.selection-bar__button--danger:hover{color:#bd1010}@media (pointer: coarse){.selection-bar{height:48px}}.selection-bar__button[hidden]{display:none}.flip-all.photo-bar{top:16px;bottom:auto;max-width:calc(100% - 32px)}.photo-bar__done{background:#18181b;color:#fff}.photo-bar__done:hover{background:#3f3f46}.photo-bar .selection-bar__label{min-width:0;font-weight:400;white-space:normal;line-height:1.2}.photo-bar .selection-bar__label:after{content:"";flex:none;align-self:center;width:1px;height:20px;margin-left:12px;background:#e4e4e7}.photo-bar .selection-bar__button{white-space:nowrap}.photo-bar__short{display:none}.selection-put-back{position:absolute;z-index:3;transform:translate(-50%,-50%);min-height:28px;padding:4px 12px;font-size:.6875rem;font-weight:600;line-height:1.2;white-space:nowrap;color:#18181b;background:#fff;border:1px solid #e4e4e7;border-radius:8px;box-shadow:0 4px 12px -2px #1018281a;cursor:pointer;transition:background .15s ease,border-color .15s ease}.selection-put-back:before{content:"";position:absolute;inset:-8px -6px}.selection-put-back:hover{background:#fafafa;border-color:#d4d4d8}.selection-put-back:active{background:#f4f4f5}.selection-put-back:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.selection-put-back[hidden]{display:none}.touch-modifier{position:absolute;left:16px;bottom:84px;z-index:3;display:none;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 12px -2px #1018281a;color:#71717a;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.touch-modifier--on{display:flex}.touch-modifier__label{font-size:22px;line-height:1;pointer-events:none}.touch-modifier[data-zone=shift],.touch-modifier[data-zone=alt]{background:#18181b;color:#fff}.touch-modifier[data-zone=alt]{box-shadow:0 0 0 14px #00000014,0 4px 12px -2px #1018281a}.feedback{width:min(480px,100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:1px solid #e4e4e7;border-radius:14px;background:#fff;color:#18181b;box-shadow:0 18px 44px -10px #10182833;overflow:auto}.feedback::backdrop{background:#10182859}.feedback__form{display:flex;flex-direction:column;gap:16px;padding:24px}.feedback__title{margin:0;font-size:1.125rem;font-weight:600}.feedback__kinds{align-self:flex-start;flex-wrap:wrap}.feedback__kinds .segmented__button{min-height:32px;padding:0 12px;font-size:12px;letter-spacing:normal}@media (pointer: coarse){.feedback__kinds .segmented__button{min-height:44px}}.feedback__text,.feedback__email{width:100%;padding:0 12px;border:1px solid #e4e4e7;border-radius:8px;background:#fff;color:#18181b;font:inherit;font-size:14px}@media (pointer: coarse){.feedback__text,.feedback__email{font-size:16px}}.feedback__text:focus-visible,.feedback__email:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.feedback__text{min-height:110px;padding:12px;resize:vertical}.feedback__email{height:40px}@media (pointer: coarse){.feedback__email{height:44px}}.feedback__check{display:flex;align-items:flex-start;gap:8px;font-size:.8125rem;cursor:pointer}.feedback__check input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:#18181b}.feedback__note{margin:0;font-size:.6875rem;line-height:1.5;color:#71717a}.feedback__buttons{display:flex;justify-content:flex-end;gap:8px}.feedback .pill-button{height:38px;padding:0 16px}@media (pointer: coarse){.feedback .pill-button{height:44px}}.title-bar__feedback{grid-column:3;justify-self:end;display:flex;align-items:center;gap:2px}.feedback-button{color:#71717a}.feedback-button:hover{color:#18181b}.feedback__kind{display:inline-flex;align-items:center;gap:4px}.share-dialog{width:min(480px,100vw - 32px);max-height:calc(100vh - 32px);padding:0;border:1px solid #e4e4e7;border-radius:14px;background:#fff;color:#18181b;box-shadow:0 18px 44px -10px #10182833;overflow:auto}.share-dialog::backdrop{background:#10182859}.share-dialog__form{display:flex;flex-direction:column;gap:16px;padding:24px}.share-dialog__title{margin:0;font-size:1.125rem;font-weight:600}.share-dialog__mode{display:flex;flex-direction:column;gap:6px}.share-dialog__mode-label{margin:0;font-size:.8125rem;color:#71717a}.share-dialog__mode .segmented{align-self:flex-start}.share-dialog__mode .segmented__button{min-height:32px;padding:0 12px;font-size:12px;letter-spacing:normal}@media (pointer: coarse){.share-dialog__mode .segmented__button{min-height:44px}}.share-dialog__preview{display:block;width:100%;max-height:240px;object-fit:contain;border-radius:8px;background:#fafafa}.share-dialog__preview[hidden]{display:none}.share-dialog__status{margin:0;font-size:.8125rem;color:#71717a}.share-dialog__link-row{display:flex;align-items:center;gap:8px}.share-dialog__link{flex:1;min-width:0;height:40px;padding:0 12px;border:1px solid #e4e4e7;border-radius:8px;background:#fff;color:#18181b;font:inherit;font-size:14px}@media (pointer: coarse){.share-dialog__link{height:44px;font-size:16px}}.share-dialog__link:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.share-dialog__link:disabled{color:#71717a}.share-dialog__networks{display:flex;flex-wrap:wrap;gap:8px}.share-dialog__networks:empty{display:none}.share-dialog__network{text-decoration:none}.share-dialog__note{margin:0;font-size:.6875rem;color:#71717a}.share-dialog__buttons{display:flex;justify-content:flex-end;gap:8px}.share-dialog .pill-button{height:38px;padding:0 16px}@media (pointer: coarse){.share-dialog .pill-button{height:44px}}.share-dialog .pill-button[hidden]{display:none}.share-dialog .pill-button:disabled{opacity:.4;cursor:default}.trace-panel{display:flex;flex-direction:column;gap:8px}.trace-panel[hidden]{display:none}.trace-panel__empty,.trace-panel__controls{display:flex;flex-direction:column;gap:12px;width:100%}.trace-panel__empty[hidden],.trace-panel__controls[hidden]{display:none}.trace-panel__empty{gap:16px}.trace-panel__actions{display:flex;gap:6px}.trace-panel__actions[hidden]{display:none}.trace-panel__actions .icon-button{width:32px;height:32px;border:1px solid #e4e4e7;border-radius:8px}.trace-panel__actions .icon-button:hover{border-color:#d4d4d8;background:#fafafa}.trace-panel__remove{color:#ef4444}.trace-panel__info,.trace-panel__note{margin:0}.trace-panel__info{color:#71717a;font-size:.6875rem}.trace-panel__label{margin:0;font-size:12px;font-weight:500;color:#71717a}.trace-panel__rule{width:100%;height:1px;margin:4px 0;border:0;background:#e4e4e7}.trace-panel__card{margin:0;padding:10px;border-radius:8px;background:#f4f4f5;color:#71717a;font-size:.6875rem;line-height:15px}.trace-panel__privacy{display:flex;align-items:flex-start;gap:8px;margin:0;color:#71717a;font-size:.6875rem;line-height:15px}.trace-panel__privacy .icon-wrap{flex:none;margin-top:1px}.trace-panel__buttons,.trace-panel__footer{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.trace-panel__buttons[hidden],.trace-panel__footer[hidden]{display:none}.trace-panel__footer{justify-content:flex-end;margin-top:4px}.trace-panel__button[hidden]{display:none}.trace-panel__button{min-height:38px;padding:0 16px;font-size:.8125rem}.trace-panel__button.segmented__button--active{background:#18181b;color:#fff}.trace-panel__group{display:flex;flex-direction:column;gap:8px}.trace-panel__group[hidden]{display:none}.trace-panel__segment-row{display:flex;flex-direction:column;align-items:flex-start;gap:6px}.trace-panel__segment-row .segmented{flex-wrap:wrap}.trace-panel__segment-row--inline{flex-direction:row;align-items:center;justify-content:space-between}.trace-panel__check{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;cursor:pointer}.trace-panel__check input{width:16px;height:16px;margin:0}.trace-panel__levels{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.trace-panel__level{display:flex;flex-direction:column;gap:4px;min-width:0;font-size:10px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;color:#71717a}.trace-panel__level .hsv-slider__value{width:100%;height:34px;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;text-align:center}.trace-panel__hsv-label{margin:0}.trace-row{display:grid;grid-template-columns:100px 1fr 56px;align-items:center;gap:8px;min-height:28px}.trace-row__label{font-size:.6875rem;font-weight:600;color:#71717a}.trace-row .hsv-slider__value{font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;text-align:center}.trace-row__select{grid-column:2/span 2;height:34px;padding:0 4px;border:1px solid #e4e4e7;border-radius:8px;background:#fff;color:#18181b;font:inherit;font-size:.8125rem}.trace-histogram{--histogram-ink: #18181b;--histogram-faint: #e4e4e7;--histogram-bg: #fafafa;--histogram-accent: #e5006a;width:100%}.trace-histogram__canvas{display:block;width:100%;border:1px solid #e4e4e7;border-radius:8px;cursor:ew-resize;touch-action:none}.trace-swatches{display:flex;flex-wrap:wrap;align-items:center;gap:4px}.trace-swatches>.trace-row__label,.trace-swatches>.help-label{width:100px}.trace-swatch{width:28px;height:28px;padding:0;border-radius:50%;border:1px solid rgba(0,0,0,.25);background:var(--swatch);cursor:pointer}.trace-swatch--selected{outline:2px solid #18181b;outline-offset:2px}.trace-swatch:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.trace-swatch__pick,.trace-swatch__drop,.trace-swatch__add{min-width:28px;min-height:28px}.trace-upload{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;padding:24px;border:1px solid #e4e4e7;border-radius:12px;background:#fff;box-shadow:0 1px 2px #10182814;text-align:center;cursor:pointer;transition:border-color .15s ease}.trace-upload:hover,.trace-upload--over{border-color:#a1a1aa}.trace-upload--over{border-style:dashed;border-color:#18181b}.trace-upload__badge{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;background:#f4f4f5;color:#71717a}.trace-upload__title{margin:0;font-size:14px;font-weight:600;color:#18181b}.trace-upload__help{margin:0;font-size:.6875rem;line-height:15px;color:#71717a}.trace-upload__button{gap:8px;min-height:38px;padding:0 18px;font-size:.8125rem}.trace-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.trace-tile{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;height:78px;padding:8px;border:1px solid #e4e4e7;border-radius:10px;background:#fff;color:#71717a;text-align:center;transition:border-color .15s ease,box-shadow .15s ease}.trace-tile[hidden]{display:none}.trace-tile:hover:not(:disabled){border-color:#a1a1aa}.trace-tile:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.trace-tile--active{border-color:#18181b;box-shadow:inset 0 0 0 1px #18181b}.trace-tile:disabled{opacity:.4;cursor:not-allowed}.trace-tile__art{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none}.trace-tile__label{font-size:.6875rem;font-weight:600;color:#18181b;white-space:nowrap}.trace-tile__hint{width:100%;overflow:hidden;font-size:.5625rem;color:#71717a;text-overflow:ellipsis;white-space:nowrap}.trace-tile__diagram{display:block;overflow:visible}.trace-tile__sheet{fill:none;stroke:#d4d4d8;stroke-width:1}.trace-tile__photo{fill:#e4e4e7}.trace-tile__edge{stroke:#18181b;stroke-width:1.5;stroke-linejoin:round}.trace-tile__outline{fill:none;stroke:#71717a;stroke-width:1.3}.color-cards{display:flex;flex-direction:column;gap:8px;width:100%}.color-card{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:10px;background:#fff;border:1px solid #e4e4e7;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}.color-card--active{border-color:#18181b;box-shadow:0 0 0 1px #18181b}.color-card--drop{border-color:#18181b;background:#fafafa}.color-card--anchor{border-color:#d4d4d8}.color-card__top{display:flex;align-items:center;gap:8px;width:100%}.color-card__header{display:flex;align-items:center;gap:8px;flex:none;min-width:0;min-height:70px;background:none;text-align:left;cursor:pointer}.color-card__header:focus-visible{outline:2px solid #6366f1;outline-offset:2px;border-radius:8px}.color-card__lock{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px;border-radius:6px;color:#a1a1aa;transition:color .15s ease,background .15s ease}.color-card__lock:hover{background:#fafafa;color:#18181b}.color-card__lock--locked{color:#18181b}.color-card__lock:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.color-card__labels{display:flex;flex:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;min-width:0}.color-card__name{padding:0;background:none;font-size:.8125rem;font-weight:600;color:#18181b;text-align:left;cursor:pointer}.color-card__name:focus-visible{outline:2px solid #6366f1;outline-offset:2px;border-radius:6px}.color-card__hex{width:70px;flex-shrink:0;margin-left:-5px;padding:3px 5px;border-radius:6px;border:1px solid transparent;background:none;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:.6875rem;color:#a1a1aa;text-align:left;text-transform:uppercase;transition:border-color .15s ease,background .15s ease,color .15s ease}.color-card__hex:hover{border-color:#e4e4e7}.color-card__hex:focus{outline:none;border-color:#18181b;background:#fff;color:#18181b}.color-card__sliders{display:flex;flex-direction:column;gap:6px;width:100%}.color-card__recipe{align-self:flex-start;padding:2px 6px;border-radius:6px;background:#fafafa;color:#71717a;font-size:.6875rem;line-height:1.5;text-align:left;cursor:pointer;transition:background .15s ease,color .15s ease}.color-card__recipe:hover{background:#f4f4f5;color:#18181b}.color-card__recipe:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.color-card__recipe[hidden]{display:none}.color-card--stale .hsv-slider__label,.color-card--stale .hsv-slider__value{opacity:.55}body.is-swapping{cursor:grabbing;user-select:none}.swatch{position:relative;display:flex;align-items:center;width:88px;height:62px;flex-shrink:0;margin:4px 4px 4px 0;border-radius:10px;background:#fff;border:1px solid #d4d4d8;box-shadow:0 2px 5px -1px #10182833;cursor:grab;touch-action:none;transition:background .15s ease,border-color .15s ease,box-shadow .15s ease}.swatch:active{cursor:grabbing}.swatch__grip{position:absolute;left:0;top:4px;display:flex;align-items:center;justify-content:center;width:28px;height:54px;opacity:.5;color:#71717a;pointer-events:none;transition:opacity .15s ease}.swatch__color{position:absolute;left:30px;top:4px;width:54px;height:54px;border-radius:6px;border:1px solid rgba(0,0,0,.12);transition:opacity .15s ease}.swatch.swatch--ghost{background:transparent;border-style:dashed;box-shadow:none}.swatch.swatch--ghost .swatch__grip,.swatch.swatch--ghost .swatch__color{opacity:0}.swatch.swatch--drag{position:fixed;z-index:70;margin:0;pointer-events:none;box-shadow:0 14px 26px -8px #10182866;will-change:transform}.swatch.swatch--return{z-index:69}.harmony-row{display:flex;gap:6px;width:100%}.harmony-button{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:44px;min-width:0;border-radius:8px;background:#fafafa;color:#71717a;transition:background .15s ease,color .15s ease,outline-color .15s ease;outline:1px solid transparent}.harmony-button:hover{background:#f4f4f5;color:#18181b}.harmony-button--active{background:#fff;color:#18181b;outline:2px solid #18181b}.harmony-button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.harmony-button__diagram{display:block;width:28px;height:28px;flex-shrink:0}.harmony-button__label{max-width:100%;font-size:8px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.color-wheel-section{display:flex;flex-direction:column;align-items:stretch;gap:10px;width:100%}.color-wheel{position:relative;width:100%;aspect-ratio:1/1}.color-wheel__canvas{display:block;width:100%;height:100%;border-radius:50%;cursor:crosshair;touch-action:none}.color-wheel .wheel-brightness{position:absolute;z-index:2;display:grid;grid-template-columns:10px 1fr 24px;align-items:center;gap:6px;width:136px;padding:5px 8px;transform:translate(-50%);border-radius:8px;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 12px -2px #1018281a}.color-wheel .wheel-brightness__label{font-size:10px;font-weight:600;color:#a1a1aa}.color-wheel .wheel-brightness__value{font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:11px;text-align:right;color:#18181b}.color-wheel .wheel-brightness__input{-webkit-appearance:none;appearance:none;width:100%;height:20px;margin:0;border-radius:10px;outline:none;cursor:pointer}.color-wheel .wheel-brightness__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.16);box-shadow:0 1px 3px #00000040;background:radial-gradient(circle,var(--knob-color, #ffffff) 0 5px,#ffffff 5px 100%);cursor:pointer}.color-wheel .wheel-brightness__input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.16);box-shadow:0 1px 3px #00000040;background:radial-gradient(circle,var(--knob-color, #ffffff) 0 5px,#ffffff 5px 100%);cursor:pointer}.color-wheel .wheel-brightness__input:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.color-wheel__controls{display:flex;justify-content:center;gap:8px;margin-top:12px}.color-wheel__arrow{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;background:#fff;border:1px solid #e4e4e7;color:#71717a;font-size:10px;transition:background .15s ease,color .15s ease,border-color .15s ease}.color-wheel__arrow:hover{background:#fafafa;border-color:#d4d4d8;color:#18181b}.color-wheel__arrow:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.hsv-slider{display:grid;grid-template-columns:20px 1fr 46px;align-items:center;gap:8px;height:28px;width:100%}.hsv-slider__label{font-size:10px;font-weight:600;color:#a1a1aa;text-align:center}.hsv-slider__label--swatch{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--swatch);color:var(--swatch-ink);box-shadow:inset 0 0 0 1px #0003}.hsv-slider__input{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;border-radius:14px;background:#f4f4f5;outline:none;cursor:pointer}.hsv-slider__input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.16);box-shadow:0 1px 3px #00000040;background:radial-gradient(circle,var(--knob-color, #ffffff) 0 8px,#ffffff 8px 100%);cursor:pointer}.hsv-slider__input::-moz-range-thumb{width:26px;height:26px;border-radius:50%;border:1px solid rgba(0,0,0,.16);box-shadow:0 1px 3px #00000040;background:radial-gradient(circle,var(--knob-color, #ffffff) 0 8px,#ffffff 8px 100%);cursor:pointer}.hsv-slider__input:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.hsv-slider__value{width:46px;height:28px;padding:0 4px;border-radius:9px;background:#fff;border:1px solid #e4e4e7;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:12px;color:#18181b;text-align:center;-moz-appearance:textfield;appearance:textfield;transition:border-color .15s ease}.hsv-slider__value::-webkit-outer-spin-button,.hsv-slider__value::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.hsv-slider__value:hover{border-color:#d4d4d8}.hsv-slider__value:focus{outline:none;border-color:#18181b}.segmented{display:flex;gap:2px;padding:2px;border-radius:8px;background:#f4f4f5}.segmented__button{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:600;letter-spacing:.02em;color:#71717a;transition:background .15s ease,color .15s ease,box-shadow .15s ease}.segmented__button:hover{color:#18181b}.segmented__button--active{background:#fff;color:#18181b;font-weight:700;box-shadow:0 1px 2px #10182814}.segmented__button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.hsv-slider--unused{display:none}.paper-fields{display:flex;align-items:flex-end;gap:12px;width:100%;padding:4px 0 16px}.paper-fields__rotate{width:34px;height:34px;flex:none;border:1px solid #e4e4e7;border-radius:8px;color:#18181b}.paper-fields__rotate:hover{border-color:#d4d4d8;background:#fafafa}.paper-field{display:flex;flex:1;flex-direction:column;gap:6px;min-width:0}.paper-field__label{font-size:10px;font-weight:600;letter-spacing:.4px;color:#71717a}.paper-field__box{position:relative;display:flex;align-items:center}.paper-field__unit{position:absolute;right:10px;color:#71717a;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:.6875rem;pointer-events:none}.paper-field__input{width:100%;height:34px;padding:0 30px 0 12px;border-radius:8px;border:1px solid #e4e4e7;background:#fff;color:#18181b;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:.8125rem}.paper-field__input:hover{border-color:#d4d4d8}.paper-field__input:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.switch-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:40px;padding:4px 0}.switch-row+.switch-row{border-top:1px solid #f4f4f5}.switch-row__label{font-size:.8125rem;color:#18181b}.switch{position:relative;width:40px;height:22px;flex-shrink:0;border-radius:11px;background:#d4d4d8;transition:background .15s ease}.switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px #10182840;transition:transform .15s ease}.switch--on{background:#18181b}.switch--on:after{transform:translate(18px)}.switch:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.fidelity{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:8px}.fidelity__input{width:100%;height:28px;margin:0;accent-color:#18181b;cursor:pointer}.fidelity__input:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.fidelity__ends{display:flex;justify-content:space-between;font-size:.8125rem;color:#71717a}.tool-notes{display:flex;flex-direction:column;gap:4px;margin:0;padding:0;list-style:none}.tool-notes__line{font-size:.6875rem;line-height:1.45;color:#a1a1aa}.arrange__subheading{display:flex;align-items:center;justify-content:space-between;width:100%;margin:4px 0 0;font-size:10px;font-weight:600;letter-spacing:.04em;color:#71717a}.arrange__row{display:flex;flex-wrap:wrap;gap:4px 8px}.arrange__group{display:flex;gap:2px}.arrange__button,.arrange__link,.arrange__step{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:8px;color:#18181b;transition:background .15s ease,color .15s ease}.arrange__button:hover:not(:disabled),.arrange__link:hover:not(:disabled),.arrange__step:hover:not(:disabled){background:#fafafa}.arrange__button:active:not(:disabled),.arrange__link:active:not(:disabled),.arrange__step:active:not(:disabled){background:#f4f4f5}.arrange__button:focus-visible,.arrange__link:focus-visible,.arrange__step:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.arrange__button:disabled,.arrange__link:disabled,.arrange__step:disabled{color:#d4d4d8;cursor:not-allowed}.arrange__link{color:#71717a}.arrange__link[aria-pressed=true]{background:#f4f4f5;color:#18181b}.arrange__origin-row{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:4px 0;border-top:1px solid #f4f4f5}.arrange__copies{display:flex;flex-direction:column;align-items:flex-end;gap:4px}.arrange__stepper{display:flex;align-items:center;gap:2px}.arrange__step{border:1px solid #e4e4e7;font-size:1rem;font-weight:600}.arrange .hsv-slider__value.arrange__copies-input{width:52px;height:44px;font-size:.8125rem}.arrange__actions{display:flex;justify-content:flex-end;gap:8px;width:100%;margin-top:4px}.arrange__action{min-height:44px;min-width:88px}.arrange__action:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.arrange__action:disabled{opacity:.4;cursor:not-allowed}.arrange-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;gap:8px;width:100%;min-height:44px}.arrange-row__label{font-size:.6875rem;font-weight:600;color:#71717a}.arrange-row__field{display:flex;align-items:center;gap:2px}.arrange-row .hsv-slider__value.arrange-row__value{width:52px;height:36px}.arrange-row__unit{width:14px;font-size:.6875rem;color:#71717a}.arrange-row--angle .angle-dial{justify-self:start}.angle-dial{width:44px;height:44px;border-radius:50%;cursor:grab;touch-action:none}.angle-dial svg{display:block;width:100%;height:100%}.angle-dial circle{fill:#fff;stroke:#a1a1aa;stroke-width:2}.angle-dial line{stroke:#18181b;stroke-width:2;stroke-linecap:round}.angle-dial:hover circle{stroke:#18181b}.angle-dial:active{cursor:grabbing}.angle-dial:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.locator{display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(3,44px);flex-shrink:0}.locator__cell{position:relative;border-radius:6px}.locator__cell:before{content:"";position:absolute;inset:50% auto auto 50%;width:12px;height:12px;transform:translate(-50%,-50%);border:2px solid #a1a1aa;background:#fff}.locator__cell:hover:before{border-color:#18181b}.locator__cell[aria-checked=true]:before{border-color:#18181b;background:#18181b}.locator__cell:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}.direction-popup{--direction-cell: 72px;--direction-glyph: 28px;position:fixed;transform:translate(-50%,-50%);display:none;flex-direction:column;gap:8px;background:#fff;padding:16px 24px 24px;box-shadow:0 18px 44px -10px #10182852;z-index:100;border:1px solid #e4e4e7;border-radius:14px}.direction-popup--visible{display:flex}.direction-popup__title{margin:0;text-align:center;font-size:1.125rem;font-weight:600;color:#18181b}.direction-popup__takes{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin-top:16px;width:min-content;min-width:100%}.direction-popup__takes[hidden]{display:none}.direction-popup__takes .segmented{flex-direction:column}.direction-popup__takes-label{margin:0;font-size:.6875rem;color:#71717a;text-align:center}.direction-popup__takes-button{display:flex;align-items:center;gap:8px;min-height:36px;padding:4px 16px;font-size:.6875rem;line-height:1.3;text-align:left;white-space:normal}.direction-popup__takes-button .icon-wrap{display:inline-flex;flex:none}@media (pointer: coarse){.direction-popup__takes-button{min-height:44px}}.direction-popup__hint{margin:0;align-self:center;width:min-content;min-width:100%;font-size:.6875rem;color:#71717a;text-align:center}.direction-popup__hint[hidden]{display:none}.direction-popup__grid{display:grid}.direction-popup__grid[hidden]{display:none}.direction-popup__grid{grid-template-columns:repeat(3,var(--direction-cell));grid-template-rows:repeat(3,var(--direction-cell));gap:8px}.direction-popup__button{display:flex}.direction-popup__button[hidden]{display:none}.direction-popup__button{align-items:center;justify-content:center;font-size:var(--direction-glyph);line-height:1;background:#fafafa;color:#18181b;min-width:var(--direction-cell);min-height:var(--direction-cell);border:1px solid #e4e4e7;border-radius:8px;transition:background .15s ease,border-color .15s ease}.direction-popup__button:hover{background:#fafafa;border-color:#d4d4d8;color:#18181b}.direction-popup__button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.direction-popup__put-back{display:flex;align-items:center;justify-content:center;padding:0 4px;font-size:.8125rem;font-weight:600;line-height:1.15;text-align:center;background:#fafafa;color:#18181b;min-width:var(--direction-cell);min-height:var(--direction-cell);border:1px solid #e4e4e7;border-radius:8px;transition:background .15s ease,border-color .15s ease,color .15s ease}.direction-popup__put-back[hidden]{display:none}.direction-popup__put-back:hover{background:#fafafa;border-color:#d4d4d8}.direction-popup__put-back:active{background:#f4f4f5;border-color:#a1a1aa}.direction-popup__put-back:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.direction-popup__button--up{grid-column:2;grid-row:1}.direction-popup__button--left{grid-column:1;grid-row:2}.direction-popup__put-back{grid-column:2;grid-row:2}.direction-popup__button--right{grid-column:3;grid-row:2}.direction-popup__button--down{grid-column:2;grid-row:3}.export-menu{position:fixed;z-index:150;width:300px;max-width:calc(100vw - 16px);padding:4px;background:#fff;border:1px solid #e4e4e7;border-radius:10px;box-shadow:0 1px 2px #1018280d,0 8px 24px #10182814}.export-menu[hidden]{display:none}.export-menu__option{display:flex}.export-menu__option[hidden]{display:none}.export-menu__option{align-items:center;gap:8px;width:100%;padding:8px;text-align:left;background:none;border:1px solid transparent;border-radius:6px;transition:background .15s ease,border-color .15s ease}.export-menu__option:hover{background:#fafafa}.export-menu__option:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.export-menu__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.export-menu__title{font-size:.8125rem;font-weight:600;color:#18181b}.export-menu__note{font-size:.6875rem;color:#71717a;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace}.export-menu__rule{height:1px;margin:0;background:#e4e4e7}.export-menu__badge{flex:none;padding:2px 6px;font-size:.6875rem;font-weight:600;letter-spacing:.4px;color:#71717a;border:1px solid #e4e4e7;border-radius:6px}.reset-menu{position:fixed;z-index:150;width:300px;max-width:calc(100vw - 16px);padding:4px;background:#fff;border:1px solid #e4e4e7;border-radius:10px;box-shadow:0 1px 2px #1018280d,0 8px 24px #10182814}.reset-menu[hidden]{display:none}.reset-menu__option{display:flex}.reset-menu__option[hidden]{display:none}.reset-menu__option{align-items:center;gap:8px;width:100%;padding:8px;text-align:left;background:none;border:1px solid transparent;border-radius:6px;transition:background .15s ease,border-color .15s ease}.reset-menu__option:hover{background:#fafafa}.reset-menu__option:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.reset-menu__text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.reset-menu__title{font-size:.8125rem;font-weight:600;color:#18181b}.reset-menu__note{font-size:.6875rem;color:#71717a;font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace}.help-content{display:flex;flex-direction:column;gap:14px;color:#3f3f46;font-size:15px;line-height:1.65}.help-content .help-lede{color:#18181b;font-size:17px;line-height:1.55}.help-content h3{margin:16px 0 0;padding-top:16px;border-top:1px solid #f4f4f5;color:#18181b;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.help-content h4{margin:4px 0 0;color:#18181b;font-size:16px;font-weight:600}.help-content em{font-style:italic}.help-content ol{display:flex;flex-direction:column;gap:6px;margin:0;padding-left:22px}.help-content p,.help-content ul{margin:0}.help-content ul{display:flex;flex-direction:column;gap:6px;padding-left:18px}.help-content strong{color:#18181b;font-weight:600}.help-content code{font-family:JetBrains Mono,ui-monospace,SF Mono,Fira Code,Consolas,monospace;font-size:.86em}.help-link{padding:0;color:#18181b;font-size:.8125rem;font-weight:500;text-decoration:underline;text-underline-offset:2px}.help-link:hover{text-decoration-thickness:2px}.help-link:focus-visible{outline:2px solid #6366f1;outline-offset:2px;border-radius:2px}.help-content .help-related{padding-left:0;list-style:none}.help-tip{padding:14px 16px;border-radius:10px;background:#f4f4f5;color:#3f3f46;font-size:14px;line-height:1.55}.help-rows{display:flex;flex-direction:column}.help-row{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:4px 6px;border-bottom:1px solid #f4f4f5;border-radius:6px;text-align:left}.help-row:last-child{border-bottom:none}.help-row:hover{background:#fafafa}.help-row:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}.help-row__diagram{display:inline-flex;flex:none;width:26px;height:26px;color:#71717a}.help-row__diagram svg{width:26px;height:26px}.help-row__text{display:flex;flex-direction:column;flex:1;min-width:0;font-size:11px;line-height:1.35;color:#71717a}.help-row__text strong{font-size:12px}.help-row__angle{flex:none;color:#71717a;font-size:10px}.help-hero{display:flex;align-items:center;gap:24px;padding-bottom:16px;border-bottom:1px solid #e4e4e7}.help-hero__wheel{position:relative;flex:none;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,#ffffff 0%,transparent 70%),conic-gradient(#e03e3e,#ef8a2e,#f2c230,#4fa34f,#2f5fd0,#7b4fb8,#e03e3e)}.help-hero__dot{position:absolute;width:18px;height:18px;margin:-9px 0 0 -9px;border:3px solid #ffffff;border-radius:50%;box-shadow:0 1px 2px #10182814}.help-hero__dot--a{left:65px;top:17px;background:#e03e3e}.help-hero__dot--b{left:106.6px;top:89px;background:#f2c230}.help-hero__dot--c{left:23.4px;top:89px;background:#2f5fd0}.help-hero__text{display:flex;flex-direction:column;gap:8px;min-width:0}.help-hero__text h3{margin:0;padding-top:0;border-top:none;font-size:17px;letter-spacing:0;text-transform:none}.help-content .help-swatches{flex-direction:row;gap:8px;padding:0;list-style:none}.help-swatch{width:28px;height:28px;border:1px solid #e4e4e7;border-radius:8px}.help-swatch--a{background:#e03e3e}.help-swatch--b{background:#f2c230}.help-swatch--c{background:#2f5fd0}.help-content .help-contents{gap:10px;padding-left:0;list-style:none}.help-content .help-contents li{display:flex;flex-direction:column;gap:2px}.help-contents__summary{color:#71717a;font-size:13px;line-height:1.4}.help-label{display:inline-flex;align-items:center;gap:12px;min-width:0;-webkit-touch-callout:none;user-select:none}.help-button{--help-y: 0px;position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border:1px solid #e4e4e7;border-radius:50%;background:#f4f4f5;color:#71717a;font-size:13px;font-weight:700;line-height:1;opacity:0;transform:translate(-8px,var(--help-y));transition:opacity .12s ease-out,transform .16s ease-out,background .15s ease,border-color .15s ease,color .15s ease}.help-button:before{content:"";position:absolute;inset:-4px}.help-button:hover,.help-button:focus-visible{background:#fff;border-color:#71717a;color:#18181b}.help-button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.help-button:active,.help-button[aria-expanded=true]{background:#18181b;border-color:#18181b;color:#fff}:has(>.help-label):is(:hover,:focus-within)>.help-label>.help-button,.help-label:is(:hover,:focus-within)>.help-button,.panel-section:hover>.panel-heading-row .help-button,.panel-section:hover>.panel-section__header .help-button,:is(.help-corner,.help-host):is(:hover,:focus-within)>.help-button,.help-button:focus-visible,.help-button[aria-expanded=true],.learn-mode .help-button{opacity:1;transform:translateY(var(--help-y));transition-delay:0ms}@media (pointer: coarse){.help-button:before{inset:-10px}}.help-corner{position:relative;display:flex}.help-button--corner{position:absolute;top:-8px;right:-8px;z-index:1;box-shadow:0 1px 2px #10182814}.tool-rail .help-corner>.rail-button{flex:1 1 auto}.tool-rail .help-button--corner{--help-y: -50%;top:50%;right:auto;left:calc(100% + 6px);transition:opacity .12s ease-out 1s,transform .16s ease-out 1s,background .15s ease,border-color .15s ease,color .15s ease}.trace-tiles>.help-corner>.trace-tile{flex:1 1 auto;min-width:0}.learn-toggle{display:inline-flex;align-items:center;gap:6px;height:32px;margin-left:8px;padding:0 10px 0 7px;border:1px solid #e4e4e7;border-radius:16px;background:#f4f4f5;color:#71717a;font-size:12px;font-weight:600;white-space:nowrap;transition:background .15s ease,border-color .15s ease,color .15s ease}.learn-toggle:hover{border-color:#a1a1aa;color:#18181b}.learn-toggle:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.learn-toggle__badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:#a1a1aa;color:#fff;font-size:11px;font-weight:700;line-height:1}.learn-toggle--on{background:#fff;border-color:#18181b;color:#18181b}.learn-toggle--on .learn-toggle__badge{background:#18181b}html.help-open{overflow:hidden}.help-dialog{width:720px;max-width:calc(100vw - 48px);max-height:min(88dvh,100dvh - 48px);margin:auto;padding:0;border:1px solid #e4e4e7;border-radius:16px;background:#fff;color:#18181b;box-shadow:0 18px 44px -10px #10182833;overflow:hidden}.help-dialog[open]{animation:help-dialog-in .16s ease-out}.help-dialog::backdrop{background:#18181bc2;animation:help-scrim-in .15s ease-out}.help-dialog__panel{display:flex;flex-direction:column;max-height:inherit}.help-dialog__grabber{display:none}.help-dialog__head,.help-dialog__foot{display:flex;align-items:center;gap:12px;flex:none;min-height:62px;padding:0 20px}.help-dialog__head{border-bottom:1px solid #e4e4e7}.help-dialog__foot{justify-content:space-between;border-top:1px solid #e4e4e7}.help-dialog__badge{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;border-radius:50%;background:#f4f4f5;color:#18181b;font-size:13px;font-weight:700}.help-dialog__title{flex:1;min-width:0;margin:0;font-size:17px;font-weight:600;color:#18181b}.help-dialog__title:focus{outline:none}.help-dialog__close{display:inline-flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:8px;background:#f4f4f5;color:#71717a}.help-dialog__close:hover{background:#e4e4e7;color:#18181b}.help-dialog__close:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.help-dialog__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:24px 32px 32px}.help-dialog__foot-link{display:inline-flex;align-items:center;gap:6px}.help-dialog__foot-link[hidden]{display:none}.help-dialog__done{margin-left:auto;min-height:34px;padding:0 16px;font-size:.8125rem}@keyframes help-dialog-in{0%{opacity:0;transform:scale(.98)}}@keyframes help-sheet-in{0%{transform:translateY(100%)}}@keyframes help-scrim-in{0%{opacity:0}}@media (prefers-reduced-motion: reduce){.help-dialog[open],.help-dialog::backdrop{animation:none}}.rail-toggle,.rail-controls,.panel-takeover__head{display:none}@media (max-width: 767px),((max-height: 520px) and (pointer: coarse)){:root{--phone-bar: 68px;--phone-top: 52px;--phone-safe-bottom: env(safe-area-inset-bottom, 0px);--phone-safe-top: env(safe-area-inset-top, 0px)}html,body{overscroll-behavior:none;-webkit-text-size-adjust:100%}body{-webkit-tap-highlight-color:transparent}.title-bar{height:calc(var(--phone-top) + var(--phone-safe-top));padding:var(--phone-safe-top) 8px 0;gap:4px}.title-bar__name{display:none}.title-bar{display:flex}.title-bar__brand{flex-shrink:0;min-height:44px}.title-bar__home{gap:4px}.title-bar__home{flex-shrink:0}.title-bar__hub{justify-content:center;min-width:40px;padding:0 4px}.title-bar__hub-label{display:none}.title-bar__feedback{margin-left:auto}.title-bar__actions,.title-bar__feedback{gap:2px}.title-bar .pill-button,.title-bar .icon-button{min-width:40px;padding:0 4px}}@media (max-width: 767px) and (max-width: 340px),((max-height: 520px) and (pointer: coarse)) and (max-width: 340px){.title-bar .pill-button,.title-bar .icon-button{width:34px;min-width:34px;padding:0}.title-bar__hub{display:none}}@media (max-width: 767px),((max-height: 520px) and (pointer: coarse)){.touch-modifier{bottom:84px}.pill-button__label{display:none}.pill-button,.icon-button{min-width:44px;min-height:44px;padding:0 8px;justify-content:center}.title-bar__divider{display:none}.app-body{display:block}.canvas-stage{position:absolute;inset:calc(var(--phone-top) + var(--phone-safe-top)) 0 calc(var(--phone-bar) + var(--phone-safe-bottom)) 0}.tool-rail{position:fixed;left:0;right:0;bottom:0;z-index:60;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:0;width:auto;min-width:0;height:auto;min-height:var(--phone-bar);padding:4px 4px calc(4px + var(--phone-safe-bottom));border-right:none;border-top:1px solid #e4e4e7;overflow:visible}.rail-button{width:52px;height:56px}.tool-rail>.rail-button,.tool-rail>.help-corner{flex:1 1 0;width:auto;min-width:0;max-width:64px}.tool-rail .rail-button{gap:2px;padding:0}.tool-rail .rail-button>.icon-wrap{width:30px;height:30px}.tool-rail .rail-button .rail-button__label{max-width:100%;overflow:hidden;font-size:9px;letter-spacing:-.01em;white-space:nowrap}.rail-controls{display:flex}.rail-shapes{position:absolute;right:4px;bottom:calc(100% + 8px);z-index:5;display:none;gap:2px;padding:4px;border-radius:14px;background:#fff;border:1px solid #e4e4e7;box-shadow:0 4px 12px -2px #1018281a}.tool-rail--expanded .rail-shapes,.rail-toggle{display:flex}.switch{width:62px;height:44px;padding:11px;background-clip:content-box;border-radius:22px}.switch:after{top:50%;margin-top:-8px}.segmented__button{min-width:44px;min-height:44px}.harmony-button{min-width:44px;min-height:48px}.color-card__header,.color-wheel__arrow{min-width:44px;min-height:44px}.color-card__lock{width:44px;height:44px}.direction-popup{--direction-cell: 84px;--direction-glyph: 34px;padding:16px 16px 24px}.direction-popup__title{font-size:1.375rem}.hsv-slider{height:44px}.hsv-slider__input{height:44px;border-radius:22px}.hsv-slider__input::-webkit-slider-thumb{width:34px;height:34px}.trace-row{grid-template-columns:100px 1fr 56px;min-height:44px}.trace-panel__segment-row,.trace-panel__button{min-height:44px}.trace-swatch,.trace-swatch__pick,.trace-swatch__drop,.trace-swatch__add{width:44px;height:44px}.zoom-control{display:none}.play-flips{left:16px;bottom:16px;width:44px;height:44px}.flip-all{bottom:16px;height:44px}.flip-all__discard{width:44px}.photo-bar__long{display:none}.photo-bar__short{display:inline}#status-host{display:none}.inspector{position:fixed;inset:0;z-index:80;width:auto;min-width:0;max-height:none;height:100dvh;padding:0;gap:0;border:none;border-radius:0;background:#fff;overflow-y:auto;overscroll-behavior:contain;transform:translateY(100%);transition:transform .25s ease;will-change:transform;padding-bottom:calc(24px + var(--phone-safe-bottom))}.inspector--open{transform:none}.panel-takeover__head{position:sticky;top:0;z-index:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px;width:100%;box-sizing:border-box;align-self:stretch;padding:calc(8px + var(--phone-safe-top)) 16px 8px;background:#fff;border-bottom:1px solid #e4e4e7}.panel-takeover__close{display:flex;align-items:center;justify-content:center;width:44px;height:44px;flex:none;color:#18181b;background:none;border:none;border-radius:50%}.panel-takeover__close:hover{background:#fafafa}.panel-takeover__close:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.panel-takeover__thumb{display:flex;align-items:center;justify-content:center;flex:1 1 100%;min-width:0;height:112px;padding:0;overflow:hidden;background:#fafafa;border-radius:8px}.panel-takeover__image{width:100%;height:100%;object-fit:contain}.inspector>.panel-section{padding:0 16px;gap:0}.panel-section__header{display:flex;align-items:center;gap:4px;width:100%;min-height:52px;border-bottom:1px solid #e4e4e7}.panel-section__header>.panel-heading,.panel-section__header>.panel-heading-row{flex:1;min-width:0}.panel-section__toggle{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;margin-right:-13px;color:#71717a}.panel-section__toggle .icon{transition:transform .15s ease}.panel-section__toggle[aria-expanded=true] .icon{transform:rotate(180deg)}.panel-section__toggle:focus-visible{outline:2px solid #6366f1;outline-offset:-2px;border-radius:8px}.panel-section__body{display:flex;flex-direction:column;gap:16px;width:100%;padding:16px 0 24px}.panel-section__settings{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.panel-section__settings[hidden]{display:none}.panel-section--collapsed>.panel-section__body{display:none}}@media (max-height: 520px) and (pointer: coarse){:root{--phone-bar: 56px;--phone-top: 44px}.rail-button,.rail-toggle{height:48px}.inspector{max-height:88dvh}.direction-popup{--direction-cell: 56px;--direction-glyph: 24px;padding:8px 16px 16px}.direction-popup__title{font-size:1rem}}@media (max-width: 767px),((max-height: 520px) and (pointer: coarse)){.help-dialog{width:100%;max-width:none;max-height:85dvh;margin:auto 0 0;border:none;border-radius:24px 24px 0 0;padding-bottom:var(--phone-safe-bottom)}.help-dialog[open]{animation:help-sheet-in .18s ease-out}.help-dialog__grabber{display:flex;align-items:center;justify-content:center;flex:none;height:22px}.help-dialog__grabber:before{content:"";width:40px;height:4px;border-radius:2px;background:#e4e4e7}.help-dialog__head{min-height:48px;border-bottom:none}.help-dialog__title{font-size:16px}.help-dialog__body{padding:8px 20px 20px}.help-dialog__foot{flex-wrap:wrap;padding:12px 20px}.help-dialog__done{flex:1 1 100%;min-height:44px;border-radius:10px;font-size:14px}.learn-toggle{justify-content:center;width:40px;height:44px;margin-left:0;padding:0;border:none;background:none}.learn-toggle__label,.tool-rail .help-button--corner,.title-bar .help-button--corner{display:none}.tool-rail>.help-corner>.rail-button{width:100%}.help-content{font-size:15px}}.canvas-container__surface{display:block;width:100%;height:100%;touch-action:none}.canvas-container__surface:focus-visible{outline:2px solid #6366f1;outline-offset:-2px}.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%);padding:8px 24px;background:#18181b;color:#fff;font-size:.8125rem;font-weight:500;border-radius:10px;box-shadow:0 1px 2px #1018280d,0 8px 24px #10182814;opacity:0;transition:opacity .25s ease;pointer-events:none;z-index:200}.toast--visible{opacity:1}.import-panel{position:absolute;display:none;background:#fff;padding:16px;box-shadow:0 1px 2px #1018280d,0 8px 24px #10182814;border:1px solid #e4e4e7;border-radius:10px;z-index:100}.import-panel--visible{display:flex;flex-direction:column;gap:8px}.import-panel__heading{font-size:.8125rem;font-weight:600;color:#18181b;text-transform:uppercase;letter-spacing:.05em}.import-panel__button{display:flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;background:#fafafa;color:#18181b;font-size:.8125rem;border:1px solid #e4e4e7;border-radius:6px;transition:background .15s ease,border-color .15s ease}.import-panel__button:hover{background:#fafafa;border-color:#d4d4d8;color:#18181b}.import-panel__button:focus-visible{outline:2px solid #6366f1;outline-offset:2px}.import-panel__actions{display:flex;gap:8px;margin-top:8px}