@import"https://fonts.googleapis.com/css2?family=Bagel+Fat+One&family=Jost:wght@500;600;700&display=swap";:root{--ink:#1F1A17;--cream:#F6EEDC;--surface:#FFFDF8;--red:#D94A2B;--muted:#655C51;--line:#DCD5C8;--accent:#E8B23A;font-family:Jost,Arial,sans-serif;color:var(--ink);font-weight:500;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{background:#eceae4;font-size:14px;line-height:1.35}button,input,select{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.35}button,a{touch-action:manipulation}button{border:0;background:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #2B6D8A;outline-offset:3px}button:not(:disabled):active{transform:translateY(1px)}h1,h2,p,figure{margin:0}h1,h2{font-weight:600}svg{display:block;width:22px;height:22px;flex:none}#pp-app{height:100%}.studio{width:100%;max-width:430px;height:100%;height:100dvh;margin:auto;display:grid;grid-template-rows:56px 44px minmax(0,1fr) 300px;grid-template-columns:minmax(0,1fr);background:var(--cream);position:relative;isolation:isolate;overflow:hidden}.topbar{padding:0 16px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #1f1a171a}.brand{display:flex;align-items:center;gap:8px;margin-right:auto;min-width:0}.brand img{width:66px;height:30px;object-fit:contain}.brand span{font-size:10px;font-weight:700;line-height:1.05;letter-spacing:.04em;max-width:35px}.device-chip{height:44px;padding:0 10px;border:1px solid #1f1a174d;border-radius:24px;font-size:12px;white-space:nowrap}.icon-button{width:44px;height:44px;display:grid;place-items:center;position:relative;padding:0}.cart-count{position:absolute;right:0;top:0;background:var(--ink);color:var(--cream);min-width:17px;height:17px;border-radius:50%;font-size:10px;display:grid;place-items:center}.toolbar{display:flex;align-items:center;padding:0 16px;gap:4px}.history-button{height:44px;padding:0 5px;font-size:11px;white-space:nowrap}.history-button:first-child{padding-left:0}.history-button span{font-size:20px;vertical-align:-2px;margin-right:2px}.design-code{font-size:9px;letter-spacing:.02em;margin:auto;white-space:nowrap;font-variant-numeric:tabular-nums}.surprise{height:36px;min-height:44px;display:flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:inherit;text-decoration:none;padding:0 7px;position:relative;isolation:isolate;white-space:nowrap}.surprise:before{content:"";position:absolute;top:6px;right:0;bottom:6px;left:0;background:var(--accent);border:2px solid var(--ink);border-radius:8px;box-shadow:2px 2px 0 var(--ink);z-index:-1}.preview{position:relative;min-height:0;display:flex;flex-direction:column;align-items:center;padding:0 16px;background-color:var(--cream);background-image:radial-gradient(#1f1a1711 .65px,transparent .8px);background-size:12px 12px}.phone-wrap{flex:1;min-height:0;width:100%;display:flex;justify-content:center;align-items:center;height:100%}.phone{display:block;width:100%;height:100%;object-fit:contain}.preview-caption{position:absolute;bottom:10px;left:50%;transform:translate(-50%);max-width:calc(100% - 32px);width:max-content;padding:3px 10px;border-radius:20px;background:#fffdf8d9;font-size:12px;line-height:20px;text-align:center;pointer-events:none}.preview-caption span{color:var(--muted)}.control-card{background:#fffdf8;border-top:1px solid #1f1a172b;border-radius:24px 24px 0 0;min-height:0;display:flex;flex-direction:column;padding:12px 16px 0}.tabs{height:44px;min-height:44px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#eee9de;border-radius:12px;padding:2px;gap:4px}.tab{border-radius:9px;font-weight:600;font-size:15px;min-height:44px;margin:-2px 0;position:relative}.tab:after{content:"";position:absolute;top:-4px;right:0;bottom:-4px;left:0}.tab[aria-selected=true]{background:var(--ink);color:var(--cream)}.panel{min-height:0;flex:1;overflow:hidden;padding:8px 0}.panel::-webkit-scrollbar{display:none}.panel :focus{scroll-margin-block:8px}.panel h2{font-size:14px;line-height:20px;margin-bottom:8px}.panel-hint{color:var(--muted);font-size:12px;line-height:20px;margin:0 0 4px}.pattern-grid{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:3px 0 4px;scrollbar-width:none;scroll-snap-type:x proximity}.pattern-tile{flex:0 0 72px;scroll-snap-align:start;padding:0;min-width:0;position:relative;font-size:12px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:8px}.tile-art{width:72px;height:72px;aspect-ratio:1;border:2px solid var(--line);border-radius:12px;overflow:hidden;display:grid;place-items:center;background:var(--cream)}.tile-art canvas{display:block;width:100%;height:100%}.pattern-tile[aria-pressed=true] .tile-art{border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink)}.tile-check{position:absolute;top:5px;right:5px;border-radius:50%;width:21px;height:21px;border:1.5px solid var(--ink);background:var(--cream);display:grid;place-items:center;font-size:13px;font-weight:700}.tile-label{min-height:32px;display:flex;align-items:flex-start;justify-content:center;text-align:center;max-width:100%}.shuffle .tile-art{font-size:29px;border:2px dashed #948777}.palette-strip{display:flex;gap:8px;overflow-x:auto;overscroll-behavior-x:contain;padding:5px 3px 3px;margin:0 -3px;scrollbar-width:none}.palette-strip::-webkit-scrollbar{display:none}.palette{flex:none;width:60px;min-height:72px;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;white-space:nowrap}.palette-disc{width:52px;height:52px;border-radius:50%;background:linear-gradient(90deg,var(--fg) 50%,var(--bg) 50%);border:1px solid #1f1a1733}.palette[aria-pressed=true] .palette-disc{outline:2px solid var(--ink);outline-offset:3px;position:relative}.palette[aria-pressed=true] .palette-disc:after{content:"\2713";position:absolute;right:-3px;bottom:0;width:19px;height:19px;border:1px solid var(--ink);border-radius:50%;background:var(--cream);font-size:12px}.color-boxes{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:4px}.color-box{height:44px;border:2px solid var(--line);border-radius:12px;display:flex;align-items:center;padding:3px 6px;gap:6px;text-align:left;min-width:0}.color-box[aria-pressed=true]{border:3px solid var(--ink);background:#f6eedc;box-shadow:2px 2px 0 var(--ink)}.color-square{width:24px;height:28px;flex:none;border-radius:6px;border:1px solid #1f1a1733;background:var(--color)}.color-label{min-width:0;flex:1;font-size:13px;font-weight:600}.color-label small{display:block;font-weight:500;font-size:10px;line-height:13px;white-space:nowrap}.pencil{font-size:15px}.swap{height:44px;width:44px;font-size:24px;padding:0}.picker{margin-top:0}.color-dots{display:flex;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;gap:0}.color-dot{flex:0 0 44px;min-width:44px;height:44px;padding:6px;display:grid;place-items:center}.color-dot span{width:30px;height:30px;border:1px solid #1f1a1740;border-radius:50%;background:var(--color);position:relative}.color-dot[aria-pressed=true] span{outline:2px solid var(--ink);outline-offset:3px}.color-dot[aria-pressed=true] span:after{content:"\2713";position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;font-size:16px;font-weight:700;color:var(--tick);text-shadow:0 0 2px #ffffff40}.custom-row{display:grid;grid-template-columns:36px minmax(44px,1fr) 44px 44px;align-items:center;gap:4px;font-size:12px;height:44px}.custom-row input{width:100%}.slider{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}.slider-head{display:flex;justify-content:space-between;align-items:center;height:20px;font-size:14px;font-weight:500}.slider-head output{font-size:12px;font-variant-numeric:tabular-nums;color:var(--muted)}input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;height:44px;margin:0;cursor:pointer;min-width:44px;touch-action:pan-y}.slider input{display:block;width:100%}input[type=range]::-webkit-slider-runnable-track{height:8px;border:1px solid #A39988;border-radius:8px;background:#ded6c5}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border:2px solid var(--ink);border-radius:50%;background:var(--cream);box-shadow:2px 2px 0 var(--ink)}input[type=range]::-moz-range-track{height:8px;border:1px solid #A39988;border-radius:8px;background:#ded6c5}input[type=range]::-moz-range-thumb{width:24px;height:24px;border:2px solid var(--ink);border-radius:50%;background:var(--cream);box-shadow:2px 2px 0 var(--ink)}.slider-ends{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;line-height:14px;pointer-events:none}.custom-row .hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.custom-row .hue::-moz-range-track{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.switches{display:flex;gap:16px;height:72px;align-items:center}.switch{flex:1;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:4px;padding:0;font-size:13px;text-align:left}.switch-track{width:32px;height:20px;background:#ded6c5;border:1.5px solid var(--ink);border-radius:20px;padding:2px;flex:none}.switch-track:after{content:"";display:block;width:13px;height:13px;background:var(--ink);border-radius:50%;transition:transform .15s ease}.switch[aria-checked=true] .switch-track{background:var(--accent)}.switch[aria-checked=true] .switch-track:after{transform:translate(11px)}.reset{display:block;min-height:44px;margin:0 auto;padding:0 16px;text-decoration:underline;text-underline-offset:3px;font-size:12px}.footer{flex:none;height:83px;padding:8px 0 19px;background:#fffdf8;border-top:1px solid #EEE9DE}.add-button{width:calc(100% - 4px);height:56px;display:flex;justify-content:center;align-items:center;gap:12px;border:3px solid var(--ink);border-radius:14px;background:var(--red);color:#fffdf8;box-shadow:4px 4px 0 var(--ink);font-weight:700;font-size:18px}.add-button:active{box-shadow:1px 1px 0 var(--ink);transform:translate(3px,3px)!important}.dialog{border:2px solid var(--ink);border-radius:20px;background:#fffdf8;color:var(--ink);padding:20px;width:calc(100% - 32px);max-width:398px;max-height:80dvh;overflow:auto;box-shadow:5px 5px 0 var(--ink)}.dialog::backdrop{background:#1f1a1766}.dialog-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.dialog h2{font-family:Bagel Fat One,cursive;font-weight:400;font-size:26px}.dialog .icon-button{flex:none}.device-option{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;border-top:1px solid var(--line);text-align:left}.device-option[aria-pressed=true]{font-weight:700}.cart-list{list-style:none;margin:0;padding:0}.cart-list li{padding:12px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:8px}.cart-list strong{display:block}.cart-list small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.cart-remove{min-width:44px;min-height:44px;font-size:20px}.dialog-note{font-size:12px;color:var(--muted);margin-top:12px}.toast{position:absolute;left:16px;right:16px;bottom:92px;z-index:3;padding:12px 16px;border-radius:12px;background:var(--ink);color:var(--cream);text-align:center;box-shadow:0 4px 12px #1f1a1720;pointer-events:none}.toast[hidden]{display:none}.error{padding:24px;font:500 16px/1.5 Jost,sans-serif}.board{width:1736px;padding:42px 40px 36px}.board-head{height:148px;display:grid;grid-template-columns:1fr 650px;gap:44px;align-items:start}.serial{font-size:13px;letter-spacing:.1em;display:block;margin-bottom:8px}.board h1{font-size:36px;line-height:1.2;letter-spacing:-.03em}.board-name{font-family:Bagel Fat One,cursive;font-weight:400}.board-head p{font-size:17px;margin-top:12px;max-width:770px}.board-head .interaction{font-size:15px;line-height:1.6;padding-top:20px}.screens{display:flex;gap:28px}.screens figure{width:390px;flex:none}.screens .studio{width:390px;height:844px;border-radius:36px;outline:1px solid #1f1a1720}.screens figcaption{margin-top:17px;font-size:14px;line-height:1.4}body[data-board]{height:auto;overflow:auto}body[data-board] #pp-app{height:auto}.board .footer{padding-bottom:19px}@media(min-width:600px){body:not([data-board]) .studio{box-shadow:0 0 0 1px #1f1a1720}}@media(max-width:359px){.brand{gap:4px}.brand img{width:56px}.device-chip{padding:0 6px;font-size:11px}.design-code{font-size:8px}.history-button{font-size:10px}.color-box{gap:4px;padding:5px}.pencil{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}.control-card,.panel,.preview,.topbar,.toolbar{min-width:0}.color-stage{height:100px}.color-stage h2{font-size:12px;line-height:16px;margin:0}.picker-top{display:flex;height:44px;align-items:center}.picker-back{flex:0 0 44px;height:44px;font-size:22px;padding:0}.custom-row button{width:44px;height:44px;font-size:22px}.panel[data-mode=settings]{padding:0}.setting-chips{display:flex;overflow-x:auto;scrollbar-width:none;height:44px;align-items:center;gap:4px}.setting-chip{height:44px;flex:1 0 auto;padding:0 9px;border-radius:20px;font-size:12px;white-space:nowrap}.setting-chip[aria-pressed=true]{background:var(--ink);color:var(--cream)}.setting-stage{height:72px}.pattern-grid::-webkit-scrollbar,.color-dots::-webkit-scrollbar,.setting-chips::-webkit-scrollbar{display:none}@media(min-width:1024px){.studio[data-layout]{max-width:none;height:100dvh;padding:0 24px 24px;grid-template-columns:minmax(0,1fr) 420px;grid-template-rows:64px minmax(0,1fr);column-gap:24px;box-shadow:none!important}.studio[data-layout] .topbar{grid-column:1/-1;grid-row:1;margin:0 -24px;padding:0 24px;gap:16px;display:grid;grid-template-columns:minmax(170px,1fr) auto auto auto 44px}.studio[data-layout] .brand{gap:12px;margin:0}.studio[data-layout] .brand img{width:80px;height:32px}.studio[data-layout] .brand span{max-width:none;font-size:12px;letter-spacing:.08em;white-space:nowrap}.studio[data-layout] .toolbar{padding:0;gap:8px}.studio[data-layout] .history-button{font-size:12px;padding:0 8px}.studio[data-layout] .design-code{font-size:11px;margin:0 16px;min-width:112px;text-align:center}.studio[data-layout] .device-chip{font-size:13px;padding:0 16px;height:40px;background:var(--surface)}.studio[data-layout] .surprise{font-size:13px;padding:0 12px}.studio[data-layout] .preview{grid-column:1;grid-row:2;padding:0;justify-content:center}.studio[data-layout] .phone-wrap{flex:none;height:82%;max-height:calc(100% - 64px);width:100%}.studio[data-layout] .preview-caption{position:static;transform:none;margin-top:16px;max-width:100%;font-size:13px}.studio[data-layout] .control-card{grid-column:2;grid-row:2;border-radius:0;border-top:0;border-left:1px solid var(--line);padding:16px 16px 0;overflow:visible}.studio[data-layout] .tabs{display:none}.studio[data-layout] .panel{padding:0;overflow:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:8px}.studio[data-layout] .panel section{min-width:0;flex:none}.studio[data-layout] .panel section+section{border-top:1px solid var(--line);padding-top:8px}.studio[data-layout] .panel h2{font:700 12px/16px Jost,Arial,sans-serif;letter-spacing:.08em;margin:0 0 4px}.studio[data-layout] .pattern-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:visible;padding:0}.studio[data-layout] .pattern-tile{gap:4px;font-size:11px;min-height:64px;transition:transform .16s ease,opacity .16s ease}.studio[data-layout] .tile-art{width:48px;height:48px;border-radius:8px}.studio[data-layout] .tile-label{min-height:16px;line-height:16px;align-items:center;white-space:nowrap}.studio[data-layout] .tile-check{width:16px;height:16px;font-size:10px;top:2px;right:calc(50% - 22px)}.studio[data-layout] .shuffle .tile-art{font-size:24px}.studio[data-layout] .palette-strip{padding:4px;margin:-4px -4px 0;gap:0;scroll-padding:4px}.studio[data-layout] .palette{width:48px;min-height:60px;font-size:10px;line-height:12px;gap:4px}.studio[data-layout] .palette-disc{width:44px;height:44px}.studio[data-layout] .color-boxes{gap:8px;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr)}.studio[data-layout] .color-box{height:40px;border-radius:8px}.studio[data-layout] .swap{height:40px;width:32px}.studio[data-layout] .picker-top{height:auto;display:block}.studio[data-layout] .picker-back{display:none}.studio[data-layout] .color-dots{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));overflow:visible}.studio[data-layout] .color-dot{width:100%;min-width:40px;height:40px;padding:4px}.studio[data-layout] .color-dot span{width:32px;height:32px}.studio[data-layout] .custom-row{height:40px;grid-template-columns:56px minmax(44px,1fr) 40px 40px}.studio[data-layout] .custom-row label{font-size:11px}.studio[data-layout] .custom-row label:after{content:" ton"}.studio[data-layout] .custom-row button{height:40px;width:40px;border-radius:8px}.studio[data-layout] .desktop-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.studio[data-layout] .slider{height:40px}.studio[data-layout] .slider-head{height:16px;font-size:12px;line-height:16px}.studio[data-layout] .slider-head output{font-size:11px}.studio[data-layout] .slider input{height:24px}.studio[data-layout] .slider-ends{display:none}.studio[data-layout] input[type=range]::-webkit-slider-thumb{width:20px;height:20px;margin-top:-7px}.studio[data-layout] input[type=range]::-moz-range-thumb{width:16px;height:16px}.studio[data-layout] .switches{height:32px;gap:16px}.studio[data-layout] .switch{min-height:32px;font-size:12px}.studio[data-layout] .footer{height:80px;padding:12px 0;border-top:1px solid var(--line);margin-top:auto}.studio[data-layout] .toast{left:auto;right:40px;width:360px;bottom:112px}.studio[data-layout] button:not(:disabled):hover,.studio[data-layout] a:hover{background-color:#1f1a170a}.studio[data-layout] .pattern-tile:not(:disabled):hover{transform:translateY(-2px);background:none}.studio[data-layout] .add-button:hover{background:var(--red)!important;box-shadow:2px 2px 0 var(--ink)}.studio[data-layout] .surprise:hover:before{box-shadow:1px 1px 0 var(--ink)}.studio[data-layout] .palette:hover{background:none;opacity:.8}.studio[data-layout=b]{grid-template-columns:240px minmax(0,1fr) 360px}.studio[data-layout=b] .preview{grid-column:2}.studio[data-layout=b] .control-card{grid-column:3;padding-top:8px}.studio[data-layout=b] .desktop-pattern{position:absolute;left:24px;top:88px;bottom:24px;width:240px;padding-right:8px}.studio[data-layout=b] .desktop-pattern .pattern-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 8px}.studio[data-layout=b] .desktop-pattern .tile-art{width:96px;height:96px;border-radius:12px}.studio[data-layout=b] .desktop-pattern .tile-label{min-height:24px;font-size:11px}.studio[data-layout=b] .desktop-pattern .tile-check{right:8px;top:8px;width:20px;height:20px;font-size:12px}.studio[data-layout=b] .desktop-color{border:0!important;padding-top:0!important}.studio[data-layout=b] .panel{gap:4px}.studio[data-layout=b] .panel h2{margin-bottom:4px}.studio[data-layout=b] .palette-strip{display:grid;grid-template-columns:none;grid-template-rows:repeat(2,40px);grid-auto-flow:column;grid-auto-columns:calc(25% - 2px);gap:0;padding:4px;margin:-4px -4px 0;overflow-x:auto}.studio[data-layout=b] .palette{width:100%;min-height:40px;height:40px;justify-content:center}.studio[data-layout=b] .palette-disc{width:32px;height:32px}.studio[data-layout=b] .palette>span:last-child{display:none}.studio[data-layout=b] .color-dots{grid-template-columns:repeat(6,minmax(0,1fr))}.studio[data-layout=b] .custom-row,.studio[data-layout=b] .custom-row button,.studio[data-layout=b] .custom-row input{height:32px}.studio[data-layout=b] .desktop-sliders{grid-template-columns:minmax(0,1fr)}.studio[data-layout=b] .slider{height:32px}.studio[data-layout=b] .slider input{height:16px}.studio[data-layout=b] .footer{height:72px;padding:8px 0}}@media(min-width:1024px){.studio[data-layout=b] .panel{gap:12px}.studio[data-layout=b] .palette-strip{grid-template-rows:repeat(2,64px);grid-auto-columns:calc(25% - 2px);row-gap:4px}.studio[data-layout=b] .palette{height:64px;min-height:64px;flex-direction:column;gap:4px}.studio[data-layout=b] .palette-disc{width:36px;height:36px}.studio[data-layout=b] .palette>span:last-child{display:block;font-size:11px;line-height:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.studio[data-layout=b] .slider{height:auto;min-height:52px;display:grid;gap:6px}.studio[data-layout=b] .slider input{height:24px}.studio[data-layout=b] .desktop-sliders{row-gap:10px}.studio[data-layout=b] .desktop-pattern .pattern-grid{gap:20px 12px}.studio[data-layout=b] .desktop-pattern .tile-art{width:104px;height:104px}}@media(min-width:1024px){.studio[data-layout=b] .desktop-sliders{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px;row-gap:6px}.studio[data-layout=b] .slider{min-height:44px;gap:2px}.studio[data-layout=b] .palette-strip{grid-template-rows:repeat(2,58px)}.studio[data-layout=b] .palette{height:58px;min-height:58px;gap:2px}}@media(min-width:1024px)and (max-height:820px){.studio[data-layout=b] .color-dots .color-dot{height:36px}.studio[data-layout=b] .panel{gap:8px}}.brand span{max-width:none;white-space:nowrap;font-size:9px}.brand img{filter:none}.pp-likes{display:flex;justify-content:center;gap:16px;font-size:12px;height:28px}.footer{height:108px;padding-top:3px}.pp-likes button{min-height:28px}.pp-cats,.pp-surfaces{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}.pp-cats button,.pp-surfaces button{padding:10px;border:1px solid var(--line);border-radius:12px}.pp-cats [aria-pressed=true],.pp-surfaces [aria-pressed=true]{background:var(--ink);color:var(--surface)}.pp-models{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.pp-models .device-option{display:flex;flex-direction:column;text-align:center;gap:8px;padding:10px;font-size:12px}.pp-models canvas{width:50px;height:62px}.pp-saved{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.pp-saved article{min-width:0}.pp-saved img{width:100%;height:140px;object-fit:contain}.pp-saved b,.pp-saved small{display:block}.pp-saved button{min-height:36px}.pp-added{display:grid;grid-template-columns:96px 1fr;gap:16px;align-items:center}.pp-added img{width:96px;height:140px;object-fit:contain}.pp-added small{display:block;margin-top:6px}.pp-added-actions{display:flex;gap:14px;align-items:center;margin-top:20px}.pp-added-actions a{color:var(--red);font-weight:700}.phone{width:100%;height:100%}.studio[data-busy] .toolbar,.studio[data-busy] .panel,.studio[data-busy] .device-chip,.studio[data-busy] .pp-likes{pointer-events:none;opacity:.6}@media(min-width:1024px){.studio[data-layout=b] .footer{height:100px}.studio[data-layout=b] .desktop-pattern{overflow:auto}.studio[data-layout=b] .brand{gap:8px}.studio[data-layout=b] .brand span{font-size:10px}.studio[data-layout=b] .topbar{grid-template-columns:minmax(160px,1fr) auto auto auto 40px;gap:8px}.studio[data-layout=b] .design-code{display:none}}@media(max-width:1023px){.brand{gap:4px}.brand span{max-width:48px;white-space:normal}.device-chip{max-width:48vw;overflow:hidden;text-overflow:ellipsis}.footer{padding-bottom:calc(12px + env(safe-area-inset-bottom))}.studio .panel{min-height:0}}.dialog h2,.add-button,.surprise{font-family:Bagel Fat One,Jost,sans-serif;font-weight:400}.add-button{font-size:18px;gap:7px}@media(max-width:1023px){.tile-label{min-height:16px;line-height:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}}.group-chips{display:flex;align-items:center;gap:4px;height:32px;min-height:32px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain}.group-chips::-webkit-scrollbar{display:none}.group-chip{flex:none;height:32px;padding:0 10px;border-radius:16px;font-size:11px;white-space:nowrap}.group-chip[aria-pressed=true]{background:var(--ink);color:var(--cream)}.pattern-groups h3{font-size:12px;margin:16px 0 8px;font-weight:600}@media(max-width:1023px){.panel[data-mode=pattern],.panel[data-mode=color]{padding:4px 0}.panel[data-mode=pattern] .pattern-grid{gap:8px;padding-top:4px}.pattern-tile{flex-basis:76px;gap:4px;font-size:11px}.tile-art{width:64px;height:64px}.tile-label{white-space:normal;line-height:13px;min-height:26px;overflow:visible}.color-stage{height:80px}.palette-strip{padding:2px 3px 1px}.palette{min-height:45px;gap:2px;line-height:12px;font-size:10px}.palette-disc{width:30px;height:30px}.palette[aria-pressed=true] .palette-disc{outline-offset:1px}}@media(min-width:1024px){.studio[data-layout=b] .desktop-pattern{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#A39988 transparent;overscroll-behavior:contain}.studio[data-layout=b] .desktop-pattern::-webkit-scrollbar{width:5px}.studio[data-layout=b] .desktop-pattern::-webkit-scrollbar-thumb{background:#a39988;border-radius:5px}.studio[data-layout=b] .desktop-pattern .pattern-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 6px}.studio[data-layout=b] .desktop-pattern .tile-art{width:68px;height:68px;border-radius:10px}.studio[data-layout=b] .desktop-pattern .pattern-tile{gap:4px;min-height:94px}.studio[data-layout=b] .desktop-pattern .tile-label{white-space:normal;line-height:13px;min-height:26px;font-size:10px}.studio[data-layout=b] .desktop-pattern .tile-check{right:2px;top:3px;width:18px;height:18px}.studio[data-layout=b] .pattern-groups h3:first-child{margin-top:8px}.studio[data-layout=b] .desktop-color .group-chip{padding:0 8px;font-size:10px}.studio[data-layout=b] .palette-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-rows:56px;gap:2px 0;height:120px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;margin:0 -3px 4px;padding:4px 3px}.studio[data-layout=b] .palette{width:100%;height:56px;min-height:56px;gap:3px}.studio[data-layout=b] .palette-disc{width:32px;height:32px;flex:none}.studio[data-layout=b] .palette>span:last-child{font-size:9px;line-height:12px}}@media(max-width:1023px){.panel[data-mode=pattern] .pattern-grid{padding-bottom:0}.panel[data-mode=pattern] .pattern-tile{gap:2px}.panel[data-mode=pattern] .tile-label{line-height:12px;min-height:24px}}.studio[data-layout] .color-boxes,.studio .color-boxes{grid-template-columns:minmax(0,1fr) 24px minmax(0,1fr) minmax(0,1fr);gap:4px}.studio .color-box{min-width:0;padding:5px;gap:5px}.studio .color-square{width:22px;height:26px;flex:none}.studio .color-label{min-width:0;font-size:11px;line-height:14px}.studio .color-label small{font-size:9px;white-space:nowrap;letter-spacing:-.02em}.studio[data-layout] .swap,.studio .swap{width:24px;min-width:24px;font-size:18px}.studio .color-box:disabled{opacity:.46;cursor:default}.studio .custom-row:has(.auto-color){grid-template-columns:74px minmax(44px,1fr) 36px 36px}.studio .custom-row .auto-color{width:74px;font:500 10px/12px Jost,Arial,sans-serif;text-decoration:underline;text-underline-offset:2px}@media(max-width:359px){.studio .color-square{width:16px}.studio .color-box{gap:3px;padding:3px}.studio .color-label{font-size:10px}.studio .color-label small{font-size:8px}}.studio[data-layout] .custom-row .auto-color{width:74px}@media(max-width:1023px){.color-stage .picker-top,.color-stage .picker-back{height:40px}.color-stage .color-dot{height:40px;min-width:40px;flex-basis:40px}.color-stage .custom-row,.color-stage .custom-row input,.color-stage .custom-row button{height:40px}}.tabs{grid-template-columns:repeat(4,minmax(0,1fr))}.toolbar .tool-action{min-width:44px;min-height:44px;padding:0 5px;font-size:11px;white-space:nowrap}.toolbar .design-code{display:none}.preview-caption small{display:none;font-size:9px;font-weight:500}.toolbar{padding-inline:12px;justify-content:space-between;gap:0}.toolbar .history-button{font-size:0;min-width:44px;padding:0}.toolbar .history-button span{font-size:22px;margin:0}.toolbar .surprise{display:none}.preview-caption{font-size:11px;line-height:15px}.preview-caption small{display:block}.panel[data-mode=extras]{overflow-y:auto;overscroll-behavior:contain}.extra-chips,.font-strip{display:flex;gap:6px;overflow-x:auto;flex:none;scrollbar-width:none}.extra-chips button,.font-strip button,.extra-fields button{min-height:44px;min-width:44px;padding:0 12px;border:1px solid var(--line);border-radius:9px;white-space:nowrap}.extra-chips button[aria-pressed=true],.font-strip button[aria-pressed=true],.stamp-grid button[aria-pressed=true]{background:var(--ink);color:var(--cream);border-color:var(--ink)}.extra-controls{display:flex;flex-direction:column;gap:8px;padding-top:8px}.extra-controls label,.dialog-body>label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;min-width:0}.extra-controls input:not([type=checkbox]),.extra-controls select,.team-grid select{width:100%;min-width:0;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);padding:5px 8px}.extra-controls input[type=range]{padding-inline:0}.extra-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.extra-fields label output{font-size:11px;float:right}.extra-scatter{flex-direction:row!important;align-items:center;min-height:44px}.extra-controls input[type=checkbox],.team-grid input{width:24px;height:24px;margin:10px}.stamp-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:2px}.stamp-grid button{min-width:0;min-height:44px;border-radius:6px;display:grid;place-items:center}.stamp-grid svg{width:26px;height:26px}.dialog[data-drawer] .dialog-body{overscroll-behavior:contain}.drawer-primary{display:block;width:100%;min-height:48px;margin-top:12px;border:1px solid var(--ink);border-radius:10px;font-weight:600;padding:8px 12px}.drawer-primary:last-child{background:var(--ink);color:var(--cream)}.similar-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.similar-grid button{min-height:160px;border:1px solid var(--line);border-radius:12px;padding:6px}.similar-grid canvas{display:block;width:100%;height:142px}.similar-grid span{display:block;font-size:11px}.share-code{font-family:Space Mono,monospace;font-size:14px;margin-bottom:16px;overflow-wrap:anywhere}.share-link{width:100%;min-height:88px;resize:vertical;border:1px solid var(--line);border-radius:8px;padding:10px;font:12px/1.5 Space Mono,monospace;color:var(--ink);background:var(--cream)}.dialog[data-drawer=team]{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0}.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.team-grid article{min-width:0;display:flex;flex-direction:column;gap:8px}.team-grid label{display:flex;align-items:center;min-height:44px;font-weight:600}.team-grid canvas{display:block;width:100%;height:320px}.team-grid output{font-size:13px;font-weight:700}.team-progress{width:100%;height:12px;margin-top:24px;accent-color:var(--red)}.team-result{margin-top:12px}.story-stage{position:fixed;left:-10000px;top:0;width:880px;height:1230px;pointer-events:none}.desktop-extra{min-height:44px;padding:0 10px;border:1px solid var(--line);border-radius:8px;float:right;font-size:12px}@media(max-width:1023px){.stamp-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.toolbar>.tool-action{font-size:12px;padding:0 3px}.toolbar>.tool-action span{font-size:10px}.toolbar .history-button{min-width:44px}.dialog[data-drawer=team] .dialog-body{padding-inline:12px}.team-grid{gap:6px}.team-grid canvas{height:270px}.team-grid select{font-size:11px;padding:3px}.team-grid label{font-size:12px}.team-grid input{margin:4px}.team-grid output{font-size:11px}.shake-switch{display:block}}@media(min-width:1024px){.toolbar .history-button{font-size:11px;width:auto}.toolbar .tool-action{font-size:11px;padding-inline:6px}.toolbar .surprise{display:flex}.tool-action[data-action=more],.shake-switch{display:none}.dialog[data-drawer=extras]{width:460px}.desktop-settings h2{min-height:44px;display:flex;align-items:center;justify-content:space-between}.team-grid canvas{height:min(54vh,470px)}}@media(prefers-reduced-motion:reduce){.dialog,.tool-action{animation:none;transition:none}}@media(max-width:1023px){.extra-controls{gap:6px}.extra-controls>label:first-child:not(.extra-scatter){flex-direction:row;align-items:center;font-size:0}.extra-controls>label:first-child input{font-size:14px}.stamp-grid{display:grid;grid-template-rows:repeat(2,44px);grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:44px;overflow-x:auto;gap:2px}.extra-chips{gap:4px}.extra-chips button{min-height:44px}.font-strip button{font-size:14px}.dialog[data-drawer=similar],.dialog[data-drawer=share],.dialog[data-drawer=more],.dialog[data-drawer=extras]{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:85dvh;border-radius:24px 24px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom))}.studio .group-chip,.studio .group-chips{height:44px;min-height:44px}.studio .pp-likes button{min-height:44px;position:relative;margin-top:-8px}.studio .pp-saved button,.studio .pp-added-actions a,.studio .pp-added-actions button{min-height:44px;display:inline-flex;align-items:center}}@media(max-width:1023px){.studio .panel[data-mode=color],.studio .panel[data-mode=picker],.studio .panel[data-mode=pattern]{padding-block:0}.studio .color-stage{height:90px}.studio .color-stage .palette-strip{padding-block:0}.studio .color-stage .palette{min-height:44px}.studio .color-stage .picker-top,.studio .color-stage .picker-back,.studio .color-stage .color-dot,.studio .color-stage .custom-row,.studio .color-stage .custom-row input,.studio .color-stage .custom-row button{height:44px;min-height:44px}.studio .color-stage .color-dot{min-width:44px;flex-basis:44px}.studio .color-boxes{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) minmax(0,1fr)}.studio .swap{width:44px;min-width:44px}.studio .custom-row:has(.auto-color){grid-template-columns:74px minmax(44px,1fr) 44px 44px}.studio .custom-row button{min-width:44px}.studio .panel[data-mode=pattern] .tile-art{width:56px;height:56px}.studio .footer{padding:3px 0 4px}.studio .pp-likes{height:44px}.studio .pp-likes button{height:44px;min-height:44px;margin:0}.studio .reset{min-height:44px}.studio .setting-chip{min-width:44px}}.preview-caption{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:20px;margin-bottom:0}.preview-caption[hidden]{display:none}.toolbar .design-code{display:block;min-width:0;max-width:98px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;letter-spacing:-.02em}.font-strip{min-width:0;max-width:100%;padding-bottom:3px;scrollbar-width:thin}.font-strip button{flex:0 0 104px;width:104px;min-width:104px;max-width:104px;padding:0 5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.dialog[data-drawer=team]{display:flex;flex-direction:column}.dialog[data-drawer=team]:not([open]){display:none}.dialog[data-drawer=team] .dialog-body{flex:1;min-height:0;display:flex;flex-direction:column}.team-grid{flex:1;align-items:stretch;min-height:0}.team-grid article{justify-content:flex-start}.team-grid canvas{flex:1;min-height:260px;height:calc(100dvh - 300px);max-height:620px}.team-grid output{text-align:center;min-height:24px}.team-grid select{flex:none}.team-progress{flex:none;margin-top:16px}@media(max-width:1023px){.toolbar{gap:2px;padding-inline:6px}.toolbar .tool-action span{display:none}.toolbar .design-code{flex:1;font-size:8px}.team-grid{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:12px;padding-bottom:8px;align-items:stretch}.team-grid article{flex:0 0 min(78vw,360px);scroll-snap-align:start}.team-grid canvas{height:calc(100dvh - 310px);min-height:260px;max-height:480px}.team-grid label,.team-grid output{font-size:13px}.team-grid select{font-size:13px;padding:5px 8px}}
/*# sourceMappingURL=/cdn/shop/t/83/assets/pp.css.map */