:root{--paper: #ffffff;--page: #f3f0ea;--ink: #1f2933;--muted: #5c6670;--line: #d6d1c7;--accent: #3350d6;--accent-soft: #e5e9fb;--warning-bg: #fdf0d5;--warning-line: #c08a1e;--tap: 48px;--radius: 12px}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--page);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;font-size:16px;line-height:1.45}.shell{position:relative;height:100%;padding:12px}.shell:has(>.pad){padding:0;overflow:hidden}.shell--centered{display:grid;place-content:center;text-align:center;gap:12px}.lesson-picker{max-width:1100px;margin:0 auto;padding:clamp(20px,5vw,64px)}.lesson-picker h1{margin:0;font-size:clamp(2rem,4vw,3rem)}.lesson-picker>p{font-size:1.125rem}.lesson-picker__offline{margin:8px 0 0;color:var(--muted)}.update-prompt{display:grid;gap:12px;margin-top:16px}.update-prompt p{margin:0}.update-prompt__actions{display:flex;flex-wrap:wrap;gap:8px}.lesson-picker__choices{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:20px;margin-top:32px}.lesson-picker__choice{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:300px;padding:20px;border:2px solid var(--line);border-radius:20px;background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}.lesson-picker__choice:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.lesson-picker__picture{width:100%;max-height:190px;flex:1;color:var(--accent)}.lesson-picker__name{font-size:1.5rem;font-weight:700}.lesson-picker__subtitle{color:var(--muted)}.pad{position:relative;height:100%;min-height:0;overflow:hidden}.pad__title{font-size:1.05rem;margin:0;text-shadow:0 1px 0 rgba(255,255,255,.8)}.pad__subtitle,.pad__status{color:var(--muted);font-size:.875rem;margin:0}.pad__stage{position:absolute;inset:0;display:grid;place-items:center;min-height:0;min-width:0;background:#e4dfd6;overflow:hidden}.stage__frame{position:relative;background:var(--paper);box-shadow:0 0 0 1px #1f293314;overflow:hidden;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transform-origin:center center}.stage__canvas{display:block;touch-action:none}.guide-overlay{position:absolute;inset:0;pointer-events:none}.pad__chrome{position:absolute;inset:0;z-index:2;pointer-events:none}.pad__chrome :is(button,a,input,select,label,.step-card,.step-nav,.float-dock,.float-header,.float-notices,.float-help){pointer-events:auto}.float-header{position:absolute;top:max(8px,env(safe-area-inset-top,0px));left:max(8px,env(safe-area-inset-left,0px));right:max(8px,env(safe-area-inset-right,0px));display:flex;align-items:center;gap:8px;z-index:4}.float-header__back{flex:0 0 auto;background:#fffffff0;box-shadow:0 2px 8px #1f29331f}.float-header__titles{display:flex;align-items:baseline;gap:8px;min-width:0;flex:1 1 auto;padding:6px 10px;border-radius:999px;background:#ffffffd1}.pad__status{flex:0 1 auto;max-width:34%;padding:8px 12px;border-radius:999px;background:#ffffffe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.float-notices{position:absolute;left:50%;bottom:calc(104px + env(safe-area-inset-bottom,0px));transform:translate(-50%);width:min(560px,calc(100% - 32px));display:flex;flex-direction:column;gap:6px;z-index:5}.float-dock{position:absolute;right:max(10px,env(safe-area-inset-right,0px));top:168px;bottom:96px;z-index:3;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:8px;width:max-content;max-width:min(300px,46vw)}.float-dock .pad__control-panel{max-height:min(52vh,420px);overflow:auto;overscroll-behavior:contain;background:#fffffff0;box-shadow:0 8px 24px #1f293324}.float-help{position:absolute;right:calc(100% + 8px);bottom:0;width:min(320px,70vw);max-height:min(60vh,480px);overflow:auto;background:#fffffff7;box-shadow:0 8px 24px #1f293329}.float-dock__help{background:#fffffff0;box-shadow:0 2px 8px #1f29331f}.float-dock .toolbar{align-items:flex-end}.float-dock .toolbar__group--tools,.float-dock .toolbar__group--history{flex-direction:column;align-items:flex-end;width:max-content}.float-dock .toolbar__group--tools .chip:not(.chip--wide),.float-dock .toolbar__group--history .chip,.float-dock__help,.float-dock__fit{width:56px;min-width:56px;max-width:56px;height:56px;padding:0;overflow:hidden;font-size:1.45rem;line-height:1}.float-dock .chip__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.brush-slider{position:absolute;left:max(8px,env(safe-area-inset-left,0px));top:168px;bottom:96px;z-index:3;width:64px;height:auto;min-height:0;max-height:340px;margin-top:auto;margin-bottom:auto;display:flex;align-items:center;justify-content:center;padding:8px 0;border-radius:999px;background:#ffffffb8;box-shadow:0 6px 18px #1f29331f}.brush-slider__input{writing-mode:vertical-lr;direction:rtl;width:56px;height:100%;min-height:172px;margin:0;appearance:none;background:transparent;touch-action:none;cursor:pointer}.brush-slider__input::-webkit-slider-runnable-track{width:14px;border-radius:999px;background:#d9d3c7}.brush-slider__input::-webkit-slider-thumb{appearance:none;width:48px;height:48px;margin-left:-17px;border-radius:50%;border:3px solid #fff;background:var(--ink);box-shadow:0 2px 6px #1f293347}.brush-slider__input::-moz-range-track{width:14px;border-radius:999px;background:#d9d3c7}.brush-slider__input::-moz-range-thumb{width:48px;height:48px;border-radius:50%;border:3px solid #fff;background:var(--ink)}.color-well{position:relative;flex:0 0 auto;z-index:6}.color-well__orb{width:64px;height:64px;min-width:64px;min-height:64px;padding:0;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 10px #1f293338,inset 0 0 0 1px #1f293359;cursor:pointer}.color-well__orb[aria-pressed=true]{box-shadow:0 0 0 3px var(--accent),0 2px 10px #1f293338}.color-well__popover{position:absolute;top:calc(100% + 8px);right:0;width:min(292px,72vw);padding:10px;display:flex;flex-direction:column;gap:8px;background:#fffffffa;border-radius:16px;box-shadow:0 12px 32px #1f293333}.color-well__popover[data-open=false]{display:none}.color-well__popover .swatches{display:grid;grid-template-columns:repeat(5,var(--tap));justify-content:start;gap:6px}.color-well__recents{padding-top:4px;border-top:1px solid var(--line)}.step-card{position:absolute;left:50%;top:72px;transform:translate(-50%);z-index:4;width:min(920px,calc(100% - 24px));display:flex;align-items:center;gap:12px;padding:8px 10px 8px 12px;background:#fffffff5;border-radius:18px;box-shadow:0 8px 28px #1f293329}.step-nav{position:absolute;left:50%;bottom:max(8px,env(safe-area-inset-bottom,0px));transform:translate(-50%);z-index:4;width:min(420px,calc(100% - 24px))}.step-nav .step-panel__nav{flex-direction:row;align-items:stretch;width:100%}.step-nav .button--primary{min-height:72px;min-width:160px;font-size:1.4rem;border-radius:16px}.step-nav .button{min-height:72px}.pad__control-panel[data-active=false]{display:none}.pad__control-panel{flex:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:4px 6px;display:flex;flex-direction:column;gap:4px}.step-panel{display:flex;align-items:center;gap:8px;min-height:0;min-width:0;flex:1 1 auto}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.step-dots{display:flex;align-items:center;gap:5px;min-height:18px}.step-dots__dot{width:8px;height:8px;border-radius:50%;border:2px solid var(--muted);background:transparent}.step-dots__dot[data-state=done]{background:var(--accent);border-color:var(--accent)}.step-dots__dot[data-state=current]{width:14px;height:14px;background:var(--accent);border-color:var(--ink)}.step-card__toggle,.step-card__thumb{flex:0 0 auto;padding:0;border:1px solid var(--line);background:var(--paper);cursor:pointer}.step-card__toggle{width:var(--tap);height:var(--tap);border-radius:12px;font-size:1.25rem}.step-card__thumb{width:84px;height:64px;border-radius:12px;overflow:hidden}.step-card__thumb .target-preview{width:100%;height:100%;display:block}.example-lightbox{position:fixed;inset:0;z-index:30;display:grid;grid-template-rows:auto minmax(0,1fr);justify-items:center;align-content:center;gap:12px;padding:24px;background:#1f293373}.example-lightbox .target-preview{width:min(720px,92vw);height:auto;max-height:70vh;background:var(--paper);border-radius:16px}.example-lightbox__close{min-width:160px}.step-panel__header{flex:1 1 auto;min-width:0}.toolbar,.step-controls{display:flex;flex-direction:column;gap:4px}.step-panel__counter{margin:0;color:var(--muted);font-size:.8125rem;text-transform:uppercase;letter-spacing:.04em}.step-panel__instruction{margin:2px 0 0;font-size:1.25rem;line-height:1.25;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.step-panel__hint{margin:2px 0 0;color:var(--muted);font-size:.875rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;overflow:hidden}.step-panel__nav{display:flex;flex-direction:column;gap:8px;flex:0 0 auto}.step-card .button--primary{min-height:72px;min-width:148px;font-size:1.35rem;border-radius:16px}.step-panel__nav .button{flex:1}.step-panel__group,.toolbar__group{border:0;border-top:1px solid var(--line);padding:2px 0 0;margin:0;display:flex;flex-wrap:wrap;gap:4px}.step-panel__group{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.step-panel__group>.field{grid-column:1 / -1}.step-panel__group legend,.toolbar__group legend{font-size:.8125rem;font-weight:600;color:var(--muted);padding:0 4px}.step-controls .step-panel__group{border-top:0;padding-top:0}.step-controls legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.target-preview{width:100%;height:auto;background:var(--paper)}.radio{display:flex;align-items:flex-start;gap:8px;width:100%;min-height:var(--tap);cursor:pointer}.radio input{width:22px;height:22px;margin-top:4px;flex:none}.radio small{display:block;color:var(--muted);font-size:.75rem;line-height:1.2}.toolbar__group .chip{flex:1;padding-inline:4px}.toolbar__group .swatches{display:grid;grid-template-columns:repeat(5,var(--tap));justify-content:space-between;gap:4px}.toolbar__row{display:grid;grid-template-columns:3fr 2fr;gap:6px}.toolbar__row .toolbar__group{flex-wrap:nowrap;min-width:0}.toolbar__row .chip{min-width:0}.toolbar:not(.toolbar--settings) legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.toolbar:not(.toolbar--settings) .toolbar__group{border-top:0;padding-top:0}.chip__label{margin-inline-start:.3em}.chip--icon{position:relative;display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1}.chip--icon[aria-pressed=true]:after{position:absolute;top:1px;right:3px;font-size:.75rem;line-height:1}.width-icon{display:block;width:26px;border-radius:999px;background:currentColor}.field{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;font-size:.875rem;color:var(--muted)}.field select{min-height:var(--tap);font-size:1rem;border-radius:8px;border:1px solid var(--line);padding:0 8px;background:var(--paper);color:var(--ink)}.button,.chip,.swatch,.lesson-picker__choice{touch-action:manipulation}.button,.chip{min-height:var(--tap);padding:0 14px;border-radius:10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;cursor:pointer}.button--primary{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}.button:disabled,.chip:disabled{opacity:.45;cursor:not-allowed}.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);border-width:2px;font-weight:600}.chip[aria-pressed=true]:after{content:" ✓"}.swatches{display:flex;flex-wrap:wrap;gap:6px;width:100%}.swatch{width:var(--tap);height:var(--tap);border-radius:50%;border:2px solid var(--line);cursor:pointer}.swatch[aria-pressed=true]{border-color:var(--ink);border-width:4px;outline:2px solid var(--accent);outline-offset:2px}.toolbar__readout{width:100%;margin:0;font-size:.875rem}.toolbar__readout--muted{color:var(--muted);font-size:.75rem;line-height:1.25}.dot{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid var(--line);vertical-align:-2px}:is(.button,.chip,.swatch,input,select):focus-visible{outline:3px solid var(--accent);outline-offset:2px}.banner{margin:0;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--accent-soft);font-size:.9375rem}.banner--warning{background:var(--warning-bg);border-color:var(--warning-line)}.finish{display:flex;flex-direction:column;gap:12px;align-items:center;height:100%;overflow-y:auto;text-align:center}.celebration{display:flex;align-items:flex-end;justify-content:center;gap:10px;height:28px}.celebration span{width:12px;height:12px;border-radius:50%;background:var(--accent);transform-origin:center bottom;animation:sprout-pop .9s ease-out both}.celebration span:nth-child(2){background:#e0a23a;animation-delay:90ms}.celebration span:nth-child(3){background:#6aaa62;animation-delay:.18s}.celebration[data-motion=reduce] span{animation:none}@keyframes sprout-pop{0%{transform:translateY(6px) scale(.4);opacity:0}55%{transform:translateY(-4px) scale(1.08);opacity:1}to{transform:translateY(0) scale(1);opacity:1}}@media(prefers-reduced-motion:reduce){.celebration span{animation:none}}.finish__title{margin:0}.finish__lead{margin:0;color:var(--muted)}.finish__preview{width:100%;display:flex;align-items:center;justify-content:center;min-height:0;flex:1}.finish__canvas{max-width:100%;max-height:100%;width:auto;height:auto;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius)}.finish__actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}.finish__choice{display:grid;gap:12px}.finish__choice h2{margin:0}.finish__choice .button{min-height:64px;padding:12px 20px;font-weight:600}.finish__choice--compact{flex:1 0 100%;gap:4px;margin-top:2px;padding:4px 5px 5px;border:2px solid var(--accent);border-radius:var(--radius)}.finish__choice--compact h2{font-size:.875rem;line-height:1.2}.finish__choice--compact .finish__actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:5px}.finish__choice--compact .button{min-height:var(--tap);padding:2px 6px;font-size:.8125rem;line-height:1.15}.toolbar__group .chip--wide{flex:1 0 100%;margin-top:2px}@media(orientation:portrait){.pad__body{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto;row-gap:0}.step-panel{grid-column:1;grid-row:1;margin-bottom:8px}.pad__stage{grid-column:1;grid-row:2}.pad__side{grid-column:1;grid-row:3;max-height:50vh;margin-top:12px}}@media(orientation:landscape)and (max-height:619px){.pad__body{grid-template-columns:minmax(0,1fr) 548px}}@media(orientation:portrait),(max-height:619px){.pad__side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;align-items:start}.pad__control-panel{grid-column:1 / -1;flex-direction:row;align-items:start}.pad__control-panel>*{flex:1;min-width:0}.toolbar:not(.toolbar--settings){display:grid;grid-template-columns:minmax(0,1fr) calc(var(--tap) * 5 + 16px);grid-template-areas:"tool color" "row color";align-items:start}.toolbar:not(.toolbar--settings)>:nth-child(1){grid-area:tool}.toolbar__group--color{grid-area:color}.toolbar__row{grid-area:row}}.float-dock .toolbar:not(.toolbar--settings){display:flex;flex-direction:column}html:has(.shell[data-layout^=phone]>.pad),html:has(.shell[data-layout^=phone]>.pad) body,html:has(.shell[data-layout^=phone]>.finish),html:has(.shell[data-layout^=phone]>.finish) body{height:100%;overflow:hidden;overscroll-behavior:none}.shell[data-layout^=phone]{height:100dvh;max-height:100dvh;padding-top:max(8px,env(safe-area-inset-top,0px));padding-right:max(8px,env(safe-area-inset-right,0px));padding-bottom:max(8px,env(safe-area-inset-bottom,0px));padding-left:max(8px,env(safe-area-inset-left,0px))}.shell[data-layout^=phone]:has(>.pad){padding:0}.shell[data-layout^=phone]:not(:has(>.pad)):not(:has(>.finish)){overflow-y:auto;overscroll-behavior-y:contain}.shell[data-layout^=phone] .pad,.shell[data-layout^=phone] .finish{overflow:hidden;overscroll-behavior:none}.tablet-notice{position:absolute;z-index:40;top:max(10px,env(safe-area-inset-top,0px));left:50%;transform:translate(-50%);width:min(440px,calc(100% - 20px));display:flex;align-items:center;gap:12px;padding:12px 12px 12px 16px;background:#fffdf8;border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 24px #1f293329}.tablet-notice p{margin:0;font-size:1.05rem;line-height:1.3}.tablet-notice .button{min-height:var(--tap);min-width:104px;flex:0 0 auto}.shell:has(>.pad) .tablet-notice{top:max(72px,calc(env(safe-area-inset-top,0px) + 64px))}.shell[data-layout^=phone] .lesson-picker{padding:4px 2px 16px}.shell[data-layout^=phone][data-tablet-notice=open] .lesson-picker{padding-top:108px}.shell[data-layout=phone-portrait] .lesson-picker h1{font-size:1.75rem}.shell[data-layout=phone-portrait] .lesson-picker__choices{gap:12px;margin-top:16px}.shell[data-layout=phone-portrait] .lesson-picker__choice{min-height:0;padding:14px 14px 12px}.shell[data-layout=phone-portrait] .lesson-picker__picture{max-height:132px}.shell[data-layout=phone-portrait] .lesson-picker__name,.shell[data-layout=phone-landscape] .lesson-picker h1{font-size:1.35rem}.shell[data-layout=phone-landscape] .lesson-picker>p{margin:4px 0 0;font-size:.95rem}.shell[data-layout=phone-landscape] .lesson-picker__choices{grid-template-columns:repeat(auto-fill,minmax(min(100%,148px),1fr));gap:8px;margin-top:8px}.shell[data-layout=phone-landscape] .lesson-picker__choice{min-height:0;padding:8px;gap:2px}.shell[data-layout=phone-landscape] .lesson-picker__picture{max-height:68px}.shell[data-layout=phone-landscape] .lesson-picker__name{font-size:1.05rem}.shell[data-layout=phone-landscape] .lesson-picker__subtitle{font-size:.75rem;line-height:1.25}.shell[data-layout^=phone] .lesson-picker__offline{margin:4px 0 0;font-size:.875rem}.shell[data-layout=phone-portrait] .update-prompt{gap:8px;margin-top:10px}.shell[data-layout=phone-portrait] .update-prompt__actions{flex-direction:column}.shell[data-layout=phone-portrait] .update-prompt__actions .button{width:100%}.shell[data-layout=phone-landscape] .update-prompt{gap:6px;margin-top:8px;padding:6px 8px}.shell[data-layout=phone-landscape] .update-prompt p{overflow-wrap:anywhere}.shell[data-layout=phone-landscape] .update-prompt__actions{flex-wrap:nowrap}.shell[data-layout=phone-landscape] .update-prompt__actions .button{flex:1 1 0;min-width:0;padding-inline:8px}.shell[data-layout^=phone] .pad__header{flex-wrap:nowrap;align-items:center;gap:8px}.shell[data-layout^=phone] .pad__header .button{flex:0 0 auto;padding-inline:10px}.shell[data-layout^=phone] .pad__header>div{flex:1 1 auto}.shell[data-layout^=phone] .pad__title{font-size:1.0625rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shell[data-layout^=phone] .pad__subtitle{display:none}.shell[data-layout^=phone] .pad__status{flex:0 1 auto;max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.75rem}.shell[data-layout^=phone] .step-panel{gap:6px}.shell[data-layout^=phone] .step-card__thumb{width:64px;height:48px}.shell[data-layout^=phone] .step-nav .button--primary{min-height:56px;min-width:120px;font-size:1.2rem}.shell[data-layout^=phone] .step-nav .button{min-height:56px}.shell[data-layout^=phone] .step-nav .step-panel__nav{position:static;background:transparent}.shell[data-layout^=phone] .step-panel__counter{font-size:.75rem}.shell[data-layout^=phone] .step-panel__instruction{font-size:1.0625rem;overflow-wrap:break-word}.shell[data-layout^=phone] .step-panel__hint{font-size:.8125rem;overflow-wrap:break-word}.shell[data-layout=phone-portrait] .step-card,.shell[data-layout=phone-landscape] .step-card{width:min(calc(100% - 16px),720px)}.shell[data-layout=phone-landscape] .float-dock{top:max(64px,18%);transform:none;max-height:calc(100% - 150px)}.shell[data-layout=phone-portrait] .float-header__titles{display:none}.shell[data-layout^=phone] .brush-slider{height:min(30vh,200px);min-height:148px;top:38%}.shell[data-layout^=phone] .color-well__orb{width:52px;height:52px;min-width:52px;min-height:52px}.shell[data-layout^=phone] .float-dock .toolbar:not(.toolbar--settings){display:flex;flex-direction:column}.shell[data-layout=phone-portrait] .step-panel{margin-bottom:6px}.shell[data-layout=phone-portrait] .pad__side{max-height:min(42vh,300px);margin-top:8px}.shell[data-layout=phone-landscape] .pad__body{grid-template-columns:minmax(0,1fr) minmax(228px,min(46vw,320px));grid-template-rows:minmax(0,1fr);row-gap:0;column-gap:8px}.shell[data-layout=phone-landscape] .pad__stage{grid-column:1;grid-row:1}.shell[data-layout=phone-landscape] .pad__rail{display:flex;flex-direction:column;grid-column:2;grid-row:1;gap:6px;min-width:0;min-height:0}.shell[data-layout=phone-landscape] .step-panel{grid-column:auto;grid-row:auto;grid-template-columns:minmax(0,1fr) 64px;margin-bottom:0;padding:4px 6px;flex:none}.shell[data-layout=phone-landscape] .step-panel{position:relative}.shell[data-layout=phone-landscape] .step-panel__instruction{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.shell[data-layout=phone-landscape] .step-panel__hint{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell[data-layout=phone-landscape] .pad__side{grid-column:auto;grid-row:auto;max-height:none;margin-top:0;flex:1 1 auto}.shell[data-layout^=phone] .pad__side{display:flex;flex-direction:column;align-content:stretch;align-items:stretch;overscroll-behavior:contain}.shell[data-layout^=phone] .step-panel__nav,.shell[data-layout^=phone] .pad__tabs{position:sticky;z-index:2;background:var(--page)}.shell[data-layout^=phone] .step-panel__nav{top:0}.shell[data-layout^=phone] .pad__tabs{top:calc(var(--tap) + 6px)}.shell[data-layout^=phone] .step-panel__nav .button,.shell[data-layout^=phone] .pad__tabs .chip{min-width:0;padding-inline:8px;white-space:nowrap}.shell[data-layout^=phone] .pad__control-panel{flex-direction:column;align-items:stretch;grid-column:auto}.shell[data-layout^=phone] .pad__control-panel>*{flex:none;width:100%;min-width:0}.shell[data-layout^=phone] .step-panel__group{grid-template-columns:minmax(0,1fr)}.shell[data-layout^=phone] .toolbar fieldset,.shell[data-layout^=phone] .step-controls fieldset{min-inline-size:0;min-width:0;max-width:100%}.shell[data-layout^=phone] .toolbar:not(.toolbar--settings){display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"tools tools" "width history" "color color";align-items:center;gap:4px}.shell[data-layout=phone-landscape] .toolbar:not(.toolbar--settings){grid-template-areas:"tools history" "color color" "width width";gap:2px}.shell[data-layout^=phone] .toolbar:not(.toolbar--settings)>:nth-child(1),.shell[data-layout^=phone] .toolbar__group--tools{grid-area:tools}.shell[data-layout^=phone] .toolbar__group--color{grid-area:color;min-width:0}.shell[data-layout^=phone] .toolbar__row{display:contents;grid-area:auto;grid-template-columns:none}.shell[data-layout^=phone] .toolbar__group--width{grid-area:width;flex-wrap:nowrap}.shell[data-layout^=phone] .toolbar__group--history{grid-area:history;flex-wrap:nowrap}.shell[data-layout^=phone] .toolbar__group--tools{flex-wrap:wrap}.shell[data-layout^=phone] .toolbar__group--tools .chip:not(.chip--wide),.shell[data-layout^=phone] .toolbar__group--width .chip{flex:1 1 var(--tap);min-width:var(--tap);min-height:var(--tap);padding-inline:4px;white-space:nowrap}.shell[data-layout=phone-portrait] .toolbar__group--tools .chip:not(.chip--wide){flex:1 1 auto}.shell[data-layout^=phone] .toolbar__group--tools .chip--wide,.shell[data-layout^=phone] .toolbar__group--tools .finish__choice--compact{flex:1 0 100%;width:100%;max-width:none;min-height:var(--tap);white-space:normal;padding-inline:8px}.shell[data-layout^=phone] .toolbar__group--history .chip{flex:0 0 var(--tap);width:var(--tap);min-width:var(--tap);padding-inline:0}.shell[data-layout=phone-landscape] .toolbar__group--tools .chip:not(.chip--wide){position:relative;flex:0 0 var(--tap);width:var(--tap);min-width:var(--tap);max-width:var(--tap);padding-inline:0;font-size:1.25rem}.shell[data-layout=phone-landscape] .toolbar__group--tools .chip[aria-pressed=true]:after,.shell[data-layout=phone-landscape] .pad__tabs .chip[aria-pressed=true]:after{position:absolute;top:1px;right:2px;content:"✓";font-size:.65rem;line-height:1}.shell[data-layout=phone-landscape] .toolbar__group--tools .chip__label{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell[data-layout^=phone] .toolbar__group .swatches{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:6px;width:auto;max-width:100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;touch-action:pan-x;padding:4px 2px}.shell[data-layout=phone-landscape] .toolbar__group .swatches{padding-block:2px}.shell[data-layout^=phone] .swatch{flex:0 0 var(--tap)}.shell[data-layout^=phone] .toolbar__group--color{position:relative;flex-direction:row;flex-wrap:nowrap;align-items:center}.shell[data-layout^=phone] .toolbar__group--color>.chip{flex:0 0 auto;white-space:nowrap;height:var(--tap);max-height:var(--tap);padding-inline:10px}.shell[data-layout^=phone] .toolbar__group--color>.swatches{flex:1 1 auto;width:auto}.shell[data-layout^=phone] .toolbar__group--color>.toolbar__readout{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell[data-layout=phone-landscape] .pad__side{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-content:start;align-items:stretch;column-gap:4px;row-gap:4px}.shell[data-layout=phone-landscape] .step-panel__nav{display:flex;grid-column:1;grid-row:1;position:sticky;top:0}.shell[data-layout=phone-landscape] .pad__tabs{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);grid-column:2;grid-row:1;position:sticky;top:0}.shell[data-layout=phone-landscape] .pad__control-panel{grid-column:1 / -1;grid-row:2;padding:2px 4px}.shell[data-layout=phone-landscape] .step-panel__nav .button,.shell[data-layout=phone-landscape] .pad__tabs .chip{position:relative;min-width:0;padding-inline:3px;font-size:.75rem;background:var(--page)}.shell[data-layout=phone-landscape] .step-panel__nav .button:first-child{position:relative;flex:0 0 var(--tap);padding-inline:0}.shell[data-layout=phone-landscape] .step-panel__nav .button:first-child .button__text{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.shell[data-layout=phone-landscape] .pad__tabs{top:0}.shell[data-layout=phone-portrait] .finish__actions{width:100%}.shell[data-layout=phone-portrait] .finish__actions .button{flex:1 1 100%}.shell[data-layout=phone-landscape] .finish__title{font-size:1.35rem}.shell[data-layout=phone-landscape] .finish__lead{font-size:.875rem}.shell[data-layout=phone-landscape] .finish__preview{min-height:0}.shell[data-layout^=phone] .finish{overscroll-behavior:contain}.shell[data-layout^=phone] .banner{font-size:.875rem}.shell[data-layout^=phone] .float-dock .toolbar:not(.toolbar--settings){display:flex;flex-direction:column;width:max-content}.shell[data-layout^=phone] .step-card{top:60px;width:calc(100% - 16px);gap:8px;padding:6px 8px}.shell[data-layout^=phone][data-tablet-notice=open] .step-card{top:124px}.shell[data-layout^=phone]:has(>.pad) .tablet-notice{top:58px;padding:6px 8px 6px 12px;gap:8px}.shell[data-layout^=phone] .tablet-notice p{font-size:.95rem}.shell[data-layout=phone-portrait] .step-card,.shell[data-layout=phone-portrait] .step-nav{width:calc(100% - 16px)}.shell[data-layout=phone-portrait] .step-nav .step-panel__nav{position:static}.shell[data-layout=phone-portrait] .float-dock{top:auto;bottom:calc(72px + env(safe-area-inset-bottom,0px));left:72px;right:8px;transform:none;width:auto;max-width:none;max-height:none;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:6px}.shell[data-layout=phone-portrait] .float-dock .pad__control-panel{max-height:none;overflow:visible;padding:2px}.shell[data-layout=phone-portrait] .float-dock .toolbar:not(.toolbar--settings),.shell[data-layout=phone-portrait] .float-dock .toolbar__group--tools,.shell[data-layout=phone-portrait] .float-dock .toolbar__group--history{flex-direction:row;align-items:center;width:auto}.shell[data-layout=phone-portrait] .float-dock .toolbar__group--tools .chip:not(.chip--wide),.shell[data-layout=phone-portrait] .float-dock .toolbar__group--history .chip,.shell[data-layout=phone-portrait] .float-dock__help,.shell[data-layout=phone-portrait] .float-dock__fit{width:48px;min-width:48px;max-width:48px;height:48px}.shell[data-layout=phone-portrait] .float-help{right:0;left:auto;bottom:calc(100% + 8px);width:min(320px,calc(100vw - 24px))}.shell[data-layout=phone-portrait] .brush-slider{top:auto;bottom:calc(128px + env(safe-area-inset-bottom,0px));left:max(8px,env(safe-area-inset-left,0px));width:52px;height:132px;min-height:132px;max-height:none;margin:0}.shell[data-layout=phone-portrait] .brush-slider__input{min-height:0;height:100%}.shell[data-layout=phone-landscape] .float-dock{top:116px;bottom:68px;transform:none;max-height:none}.shell[data-layout=phone-landscape] .brush-slider{top:116px;bottom:68px;height:auto;min-height:0;max-height:none}.shell[data-layout=phone-landscape][data-tablet-notice=open] .float-dock,.shell[data-layout=phone-landscape][data-tablet-notice=open] .brush-slider{top:160px}