@font-face{font-family:Accio Sans;src:url(/studio/_next/static/media/AccioSans.61bf3800.woff2) format("woff2");font-weight:200 900;font-stretch:100% 105%;font-style:normal;font-display:swap}@font-face{font-family:"Averia Serif Libre";src:url(/studio/_next/static/media/AveriaSerifLibre-300.b80ed72e.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap}@font-face{font-family:"Averia Serif Libre";src:url(/studio/_next/static/media/AveriaSerifLibre-400.6a099412.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:"Averia Serif Libre";src:url(/studio/_next/static/media/AveriaSerifLibre-700.92f51fb3.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:Geist Mono;src:url(/studio/_next/static/media/GeistMono.a32fd535.ttf) format("truetype");font-weight:100 900;font-style:normal;font-display:swap}:root{--ui-page:#F3F3F3;--ui-panel:#FFFFFF;--ui-hover:#F1F1F1;--ui-active:#FFFFFF;--ui-fill:#E3E3E2;--ui-ink:#131210;--ui-ink-2:#828180;--ui-hair:rgba(19,18,16,0.07);--ui-lift:none;--ui-knob:none;--ui-font:"Accio Sans",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;--ui-mono:ui-monospace,"SF Mono",Menlo,monospace;--ui-ease:cubic-bezier(0.23,1,0.32,1);--ui-gutter:12px;--ui-top:56px;color-scheme:light}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ui-page:#131210;--ui-panel:#242321;--ui-hover:#2F2E2D;--ui-active:#403F3D;--ui-fill:#454442;--ui-ink:#FFFFFF;--ui-ink-2:#90908F;--ui-hair:rgba(255,255,255,0.08);--ui-lift:0 0 0 0.5px rgba(255,255,255,0.08),0 12px 32px rgba(19,18,16,0.5);--ui-knob:0 1px 3px rgba(19,18,16,0.5);color-scheme:dark}}:root[data-theme=dark]{--ui-page:#131210;--ui-panel:#242321;--ui-hover:#2F2E2D;--ui-active:#403F3D;--ui-fill:#454442;--ui-ink:#FFFFFF;--ui-ink-2:#90908F;--ui-hair:rgba(255,255,255,0.08);--ui-lift:none;--ui-knob:none;color-scheme:dark}:root[data-theme=light]{color-scheme:light}*,:after,:before{box-sizing:border-box}body,html{background:var(--ui-page);color:var(--ui-ink)}body{margin:0;min-height:100dvh;font:13px/1.4 var(--ui-font);font-stretch:calc(var(--type-sans-axes-wdth, 100) * 1%);-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}::selection{background:color-mix(in srgb,var(--ui-ink) 18%,transparent)}h1,h2,h3,p{margin:0}button,input,select,textarea{font:inherit;color:inherit}:focus-visible{outline:2px solid var(--ui-ink);outline-offset:2px}.m{font-family:var(--ui-mono);font-size:.885em;font-feature-settings:"tnum",none;font-variant-numeric:tabular-nums;font-variant-ligatures:none;letter-spacing:0}.hint,.quiet{color:var(--ui-ink-2)}.hint{font-size:12px;line-height:16px}.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:absolute;left:var(--ui-gutter);top:-100px;z-index:10;padding:8px 12px;border-radius:10px;background:var(--ui-panel)}.skip:focus{top:8px}.top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;height:var(--ui-top);padding:var(--ui-gutter) var(--ui-gutter) 0}.brand{display:flex;align-items:baseline;gap:6px;justify-self:start;padding:0 8px;color:inherit;text-decoration:none;font-size:13px;font-weight:600;white-space:nowrap}.brand .quiet{font-weight:400}.nav{gap:2px;margin:0;padding:4px;list-style:none;background:var(--ui-panel);border-radius:14px;overflow-x:auto;scrollbar-width:none}.nav,.nav a{display:flex}.nav a{align-items:center;height:32px;padding:0 12px;border-radius:10px;color:inherit;text-decoration:none;font-weight:500;white-space:nowrap;transition:background-color .15s var(--ui-ease),transform .15s var(--ui-ease)}.nav a[aria-current=page]{background:var(--ui-hover)}.nav a:active{transform:scale(.96)}.nav .pending{color:var(--ui-ink-2);font-weight:400}@media (hover:hover) and (pointer:fine){.nav a:hover{background:var(--ui-hover)}}.top-end{justify-self:end}@media (max-width:760px){.top{grid-template-columns:minmax(0,1fr) auto;height:auto;row-gap:10px}.top>nav{grid-column:1/-1;grid-row:2;min-width:0}}.page{max-width:1280px;margin:0 auto;padding:36px 24px 72px}.page-head{display:grid;gap:6px;margin-bottom:32px}.page-head h1{font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.01em}.page-head p{max-width:64ch;color:var(--ui-ink-2)}section{margin-bottom:40px}.section-title{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;padding:0 4px;font-size:13px;font-weight:600}.section-note{margin:-4px 4px 12px}.flag{font-weight:400;color:var(--ui-ink-2)}.after-note{margin:10px 4px 0}.catalogue,.scale,.slots,.spaces{margin:0;padding:6px;list-style:none;background:var(--ui-panel);border-radius:16px}.catalogue a{display:grid;grid-template-columns:140px minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:14px 12px;border-radius:10px;color:inherit;text-decoration:none;transition:background-color .15s var(--ui-ease)}.cat-name{font-size:15px;font-weight:600}@media (hover:hover) and (pointer:fine){.catalogue a:hover{background:var(--ui-hover)}}@media (max-width:700px){.catalogue a{grid-template-columns:minmax(0,1fr);gap:4px}}.app{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--ui-gutter);height:calc(100dvh - var(--ui-top));padding:var(--ui-gutter)}.canvas{position:relative;min-height:0}.panel{display:flex;flex-direction:column;gap:16px;min-height:0;overflow:auto;padding:12px;background:var(--ui-panel);border-radius:16px}.panel-head{display:grid;gap:4px;padding:2px 2px 12px;border-bottom:1px solid var(--ui-hair)}.panel-head h1{font-size:15px;font-weight:600}.panel-head p{font-size:12px;line-height:16px;color:var(--ui-ink-2)}.panel-group{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--ui-hair)}@media (max-width:880px){.app{height:auto;grid-template-columns:minmax(0,1fr)}.canvas{height:70vh}}.frame{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;background:var(--ground);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ui-hair);--hair:color-mix(in srgb,var(--line) 28%,transparent);--quiet:color-mix(in srgb,var(--ink) 62%,transparent)}.frame .hint,.frame .quiet{color:var(--quiet)}.frame :focus-visible{outline-color:var(--ink)}.stage{position:absolute;inset:0}.stage .art{position:absolute;inset:56px 32px 64px}.stage .art>svg{display:block;width:100%;height:100%}.corner{position:absolute;z-index:1;font-size:12px;line-height:16px;color:var(--quiet);pointer-events:none}.corner.tl{top:18px;left:20px}.corner.tr{top:18px;right:20px;text-align:right}.corner.bl{bottom:18px;left:20px}.corner.br{bottom:18px;right:20px;text-align:right}.corner.m{font-size:11.5px}.corner b{font-weight:500;color:var(--ink)}@media (max-width:560px){.corner.br,.corner.tr{display:none}}.field{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}.field-label,.field>legend{display:flex;justify-content:space-between;align-items:baseline;width:100%;margin-bottom:0;padding:0 2px;font-size:12px;font-weight:500;color:var(--ui-ink-2)}.field>legend{margin-bottom:6px}.field .hint{padding:0 2px}.text{width:100%;height:36px;padding:0 12px;border:0;border-radius:8px;background:var(--ui-hover)}.text:focus-visible{outline-offset:0}.text[aria-invalid=true]{box-shadow:inset 0 0 0 1px var(--ui-ink-2)}.dial{position:relative;height:36px;border-radius:8px;background:var(--ui-hover);overflow:hidden}.dial:before{content:"";position:absolute;inset:0 auto 0 0;width:var(--p,0);background:var(--ui-fill);transition:width .08s linear;pointer-events:none}.dial input[type=range]{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}.dial-label,.dial-value{position:absolute;top:0;z-index:1;display:flex;align-items:center;height:100%;pointer-events:none}.dial-label{left:12px;font-weight:500}.dial-value{right:12px}.dial:focus-within{outline:2px solid var(--ui-ink);outline-offset:2px}.ticks{display:flex;justify-content:space-between;padding:0 4px;color:var(--ui-ink-2);font-size:10.5px}.segs{display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--ui-hover)}.seg{position:relative;flex:1 1 auto}.seg input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.seg span{display:block;padding:7px 5px;border-radius:8px;text-align:center;font-weight:500;color:var(--ui-ink-2);white-space:nowrap;transition:background-color .15s var(--ui-ease),color .15s var(--ui-ease)}.seg input:checked+span{background:var(--ui-active);color:var(--ui-ink)}.seg input:focus-visible+span{outline:2px solid var(--ui-ink);outline-offset:0}@media (hover:hover) and (pointer:fine){.seg input:hover+span{color:var(--ui-ink)}}.swatches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px}.swatch{position:relative}.swatch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}.swatch span{display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;border-radius:8px;background:var(--ui-hover);color:var(--ui-ink-2);font-weight:500;transition:background-color .15s var(--ui-ease),color .15s var(--ui-ease)}.swatch i{width:14px;height:14px;border-radius:50%;box-shadow:inset 0 0 0 .5px rgba(128,128,128,.5)}@media (hover:hover) and (pointer:fine){.swatch input:hover+span{background:color-mix(in oklab,var(--ui-hover),var(--ui-fill) 55%);color:var(--ui-ink)}}.swatch input:checked+span{background:var(--ui-fill);color:var(--ui-ink)}.swatch input:focus-visible+span{outline:2px solid var(--ui-ink);outline-offset:2px}.check{display:flex;align-items:center;justify-content:space-between;gap:10px;height:36px;padding:0 8px 0 12px;border-radius:8px;background:var(--ui-hover);font-weight:500;cursor:pointer}.check input{appearance:none;position:relative;flex:none;width:34px;height:20px;margin:0;border-radius:10px;background:var(--ui-fill);cursor:pointer;transition:background-color .2s var(--ui-ease)}.check input:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#ffffff;transition:transform .2s var(--ui-ease)}.check input:checked{background:var(--ui-ink)}.check input:checked:after{transform:translateX(14px);background:var(--ui-page)}.primary{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:36px;padding:0 14px;border:0;border-radius:10px;background:var(--ui-ink);color:var(--ui-page);font-weight:500;cursor:pointer;transition:opacity .15s var(--ui-ease),transform .15s var(--ui-ease)}.primary .m{opacity:.6}.primary:active{transform:scale(.96)}@media (hover:hover) and (pointer:fine){.primary:hover{opacity:.88}}.ghost{display:inline-flex;align-items:center;gap:10px;height:32px;padding:0 12px;border:0;border-radius:10px;background:var(--ui-hover);color:inherit;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s var(--ui-ease),transform .15s var(--ui-ease)}.ghost:active{transform:scale(.96)}@media (hover:hover) and (pointer:fine){.ghost:hover{background:var(--ui-active)}}.files{display:flex;flex-wrap:wrap;gap:6px}.files .ghost{height:36px;background:var(--ui-panel)}@media (hover:hover) and (pointer:fine){.files .ghost:hover{background:var(--ui-hover)}}.cli{display:grid;gap:6px;padding-top:12px;border-top:1px solid var(--ui-hair)}.cli code{display:block;padding:8px 10px;overflow-x:auto;white-space:pre;line-height:1.5}.cli code,.error{border-radius:8px;background:var(--ui-hover)}.error{padding:10px 12px}.copy-value{display:flex;justify-content:space-between;gap:8px;width:100%;padding:2px 0;border:0;background:none;text-align:left;cursor:copy}@media (hover:hover) and (pointer:fine){.copy-value:hover span:first-child{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}}.copy-tag{color:var(--ui-ink-2)}.theme-switch .field>legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.theme-switch .segs{background:var(--ui-panel)}.theme-switch .seg span{padding:5px 10px;font-size:12px}.theme-switch .seg input:checked+span{background:var(--ui-hover);box-shadow:none}.waiting{display:grid;place-items:center;align-content:center;gap:8px;min-height:360px;padding:32px;border-radius:16px;background:var(--ui-panel);text-align:center}.waiting p{max-width:48ch}.palette{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:6px;margin:0;padding:0;list-style:none}.palette li{display:grid;gap:2px;align-content:start;padding:6px 6px 12px;border-radius:16px;background:var(--ui-panel)}.palette li>:not(.chip){padding:0 6px}.chip{aspect-ratio:4/3;margin-bottom:8px;border-radius:10px;box-shadow:inset 0 0 0 .5px rgba(128,128,128,.35)}.chip-name{font-weight:600}.chip-meta{font-size:11px}.themes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:12px}.theme-card{padding:20px 20px 10px}.theme-card h3{font-size:15px;font-weight:600}.theme-note{margin:4px 0 14px;font-size:12px}.roles{width:100%;border-collapse:collapse}.roles td,.roles th{padding:9px 8px 9px 0;border-top:1px solid var(--hair);text-align:left;vertical-align:middle;font-weight:400}.roles th{font-weight:500}.role-name{display:grid;gap:2px}.roles td:nth-child(3){white-space:nowrap}.roles td:nth-child(3) .copy-value{display:inline-flex;width:auto}.roles td:last-child{text-align:right;padding-right:0;white-space:nowrap}.below{color:var(--ink);box-shadow:inset 0 -1px 0 var(--alert)}@media (max-width:700px){.roles .role-name .hint,.roles td:nth-child(2){display:none}.roles td:last-child,.roles td:nth-child(3){white-space:normal}}.sample-ink{font-weight:600}.sample-accent,.sample-alert,.sample-focus,.sample-line,.sample-panel{display:inline-block;width:28px;vertical-align:middle}.sample-line{height:1px;background:var(--line)}.sample-alert{height:1px;background:var(--alert)}.sample-accent{background:var(--accent)}.sample-accent,.sample-focus{height:12px;border-radius:3px}.sample-focus{outline:2px solid var(--focus);outline-offset:-2px}.sample-panel{height:12px;border-radius:3px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--hair)}.scale li{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:baseline;padding:14px 12px}.scale li+li,.spaces li+li{border-top:1px solid var(--ui-hair)}.scale-meta{display:grid;gap:2px}.scale-sample{font-family:var(--type-sans-family),var(--type-sans-fallback);line-height:1.1;overflow-wrap:anywhere}.scale-sample[data-family=display]{font-family:var(--type-display-family),var(--type-display-fallback);font-stretch:calc(var(--type-display-axes-wdth) * 1%)}.wordmark-sample{font-size:var(--type-scale-hero)}.side .brand .mark,.wordmark-sample{font-stretch:calc(var(--type-wordmark-wdth) * 1%);font-weight:var(--type-wordmark-wght);letter-spacing:var(--type-wordmark-tracking);text-transform:var(--type-wordmark-case)}.side .brand .mark{font-family:var(--type-sans-family),var(--type-sans-fallback)}.mono-sample{font-family:var(--type-mono-family),var(--type-mono-fallback);font-size:var(--type-scale-body)}@media (max-width:700px){.scale li{grid-template-columns:minmax(0,1fr);gap:8px}}.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:0 12px}.spaces li{display:grid;grid-template-columns:minmax(0,180px) 64px minmax(0,1fr);gap:12px;align-items:center;padding:8px 12px}.motion li{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.space-bar{max-width:100%;height:8px;border-radius:4px;background:var(--ui-fill)}.kit-sheet{margin-bottom:10px;border-radius:16px;overflow:hidden}.kit-sheet svg{display:block;width:100%;height:auto}.slots{margin-bottom:10px}.slots li{display:grid;grid-template-columns:110px 84px minmax(0,1fr);gap:16px;align-items:baseline;padding:11px 12px}.slots li+li{border-top:1px solid var(--ui-hair)}.slot-path{font-weight:500}.slot-state{color:var(--ui-ink-2)}.slots .is-pending .slot-state{color:var(--ui-ink)}.slots .is-pending .slot-state:before{content:"";display:inline-block;width:6px;height:6px;margin-right:7px;vertical-align:1px;border-radius:50%;background:var(--ui-ink)}@media (max-width:700px){.slots li{grid-template-columns:minmax(0,1fr) auto}.slot-note{grid-column:1/-1}}.kit-pdf{display:block;width:min(100%,680px);aspect-ratio:595/842;border:0;border-radius:16px;background:#ffffff}.sheet-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:12px;margin:0 0 10px;padding:0;list-style:none}.sheet-grid a{display:grid;gap:2px;padding:6px 6px 10px;border-radius:16px;background:var(--ui-panel);color:inherit;text-decoration:none;transition:transform .15s var(--ui-ease)}.sheet-grid a>.m,.sheet-grid a>.sheet-name{padding:0 6px}.sheet-grid a:active{transform:scale(.98)}.sheet-thumb{display:grid;grid-template-rows:minmax(0,1fr);place-items:center;aspect-ratio:4/3;margin-bottom:8px;overflow:hidden;border-radius:10px;background:var(--ui-hover)}.sheet-thumb img{display:block;width:100%;height:100%;object-fit:contain}.sheet-name{font-weight:500;overflow-wrap:anywhere}@media (prefers-reduced-motion:reduce){*,:after,:before{transition-duration:0s!important}.ghost:active,.nav a:active,.primary:active,.sheet-grid a:active{transform:none}}.tool{display:grid;grid-template-rows:minmax(0,1fr) auto;height:calc(100dvh - var(--ui-top));padding:var(--ui-gutter);gap:var(--ui-gutter)}.tool .canvas{position:relative;min-height:0}.tool .corner.tr{padding-right:280px}@media (max-width:900px){.tool .corner.tr{padding-right:0}}.tool-foot{display:flex;border-radius:2px;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--ui-hair);background:var(--ui-panel)}.tool-foot .primary{width:auto;flex:0 0 auto}.tool-foot code{flex:1 1 260px;min-width:0;overflow-x:auto;white-space:nowrap;color:var(--ui-ink-2);font-size:11.5px}.tool-foot .hint{flex:1 1 200px}.shell{display:grid;grid-template-columns:208px minmax(0,1fr);min-height:100dvh}.side{display:flex;flex-direction:column;gap:26px;padding:18px 14px;border-right:1px solid var(--ui-hair);position:sticky;top:0;height:100dvh}.side .brand{display:flex;align-items:baseline;gap:6px;padding:2px 8px 0;color:inherit;text-decoration:none;font-size:13px;font-weight:600}.side-group+.side-group{margin-top:18px}.side-group ul{margin:0;padding:0;list-style:none}.side-label{padding:0 8px 8px;color:var(--ui-ink-2);font-size:11px;letter-spacing:.06em;text-transform:uppercase}.side-group a{display:flex;align-items:center;justify-content:space-between;gap:8px;height:30px;padding:0 8px;border-radius:6px;color:inherit;text-decoration:none;font-size:13px;transition:background-color .12s var(--ui-ease)}.side-group a[aria-current=page]{background:var(--ui-fill)}.side-flag,.side-group .pending{color:var(--ui-ink-2)}.side-flag{font-size:10px}@media (hover:hover) and (pointer:fine){.side-group a:hover{background:var(--ui-hover)}}.side-end{margin-top:auto}.home{padding:28px 28px 64px}.home-head{display:grid;gap:6px;margin-bottom:22px}.home-head h1{font-size:20px;font-weight:600}.home-head p{max-width:62ch;color:var(--ui-ink-2);font-size:13px}.work{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:0 0 40px;padding:0;list-style:none}.work a{display:grid;gap:8px;color:inherit;text-decoration:none}.work img{display:block;width:100%;height:190px;object-fit:cover;object-position:top left;border-radius:8px;background:var(--ui-panel)}.work-meta{display:grid;gap:2px;padding:0 2px}.work-name{font-size:12.5px}.home-tools ul{margin:0;padding:0;list-style:none;border-top:1px solid var(--ui-hair)}.home-tools a{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:11px 2px;border-bottom:1px solid var(--ui-hair);color:inherit;text-decoration:none;font-size:13px}@media (hover:hover) and (pointer:fine){.home-tools a:hover{background:var(--ui-hover)}}@media (max-width:760px){.shell{grid-template-columns:minmax(0,1fr)}.side{position:static;height:auto;border-right:0;border-bottom:1px solid var(--ui-hair)}}.pattern-tool{grid-template-rows:auto minmax(380px,1fr) auto;min-height:calc(100dvh - var(--ui-top));height:auto}.pattern-modes{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.pattern-modes p{margin:0}.pattern-mode-buttons{position:relative;display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--ui-fill)}.pattern-mode-buttons a,.pattern-mode-buttons button{position:relative;z-index:1;padding:8px 12px;border:0;border-radius:8px;background:transparent;color:var(--ui-ink-2);font:inherit;cursor:pointer;transition:color .2s var(--ui-ease),transform .15s var(--ui-ease)}.pattern-mode-buttons a{text-decoration:none}@media (max-width:430px){.pattern-mode-buttons{gap:2px;padding:3px}.pattern-mode-buttons a,.pattern-mode-buttons button{padding:8px;font-size:13px;white-space:nowrap}}.pattern-mode-buttons a:active,.pattern-mode-buttons button:active{transform:scale(.96)}@media (hover:hover) and (pointer:fine){.pattern-mode-buttons a:hover,.pattern-mode-buttons button:hover{color:var(--ui-ink)}}.pattern-mode-buttons [aria-current=page],.pattern-mode-buttons [aria-pressed=true]{color:var(--ui-ink)}.pattern-mode-buttons .sliding-pill{top:4px;bottom:4px;border-radius:8px;background:var(--ui-panel);box-shadow:0 0 0 .5px var(--ui-hair),0 1px 2px rgba(19,18,16,.06)}.pattern-modes+.canvas{min-height:380px}.pattern-tool-symbol .canvas{min-height:680px}@media (max-width:600px){.pattern-tool-symbol .canvas{min-height:600px}}.symbol-sizes{position:absolute;bottom:56px;left:50%;translate:-50% 0;display:flex;align-items:flex-end;gap:32px}.symbol-size{display:grid;justify-items:center;gap:12px;color:var(--quiet);font-size:12.5px}.symbol-size-art>svg{display:block;width:100%;height:100%}.stage-frame{position:absolute;inset:0}.stage.repeating{background-color:var(--ground)}.stage .single{position:absolute;top:50%;left:50%;translate:-50% -50%}.stage .single>svg{display:block;width:100%;height:100%}.tile-outline{position:absolute;outline:1px dashed var(--quiet);outline-offset:-.5px;pointer-events:none}.stage.repeating~.corner{padding:4px 8px;margin:-4px -8px;border-radius:8px;background:color-mix(in srgb,var(--ground) 96%,transparent);box-shadow:0 0 0 .5px var(--hair);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.tool .stage.repeating~.corner.tr{padding-right:8px;margin-right:272px}@media (max-width:900px){.tool .stage.repeating~.corner.tr{margin-right:-8px}}.primary:disabled{opacity:.6;cursor:progress}.drawpad{position:absolute;left:16px;top:48px;z-index:2;max-height:calc(100% - 96px);overflow:auto;display:grid;gap:10px;width:296px;padding:12px;margin:0;border:1px solid var(--ui-hair);border-radius:16px;background:var(--ui-panel);color:var(--ui-ink);box-shadow:0 0 0 .5px var(--ui-hair),0 12px 32px rgba(19,18,16,.16);animation:drawpad-in .2s var(--ui-ease)}.drawpad:not([open]){display:none}.drawpad::backdrop{background:rgba(19,18,16,.28)}@keyframes drawpad-in{0%{opacity:0;transform:translateY(6px) scale(.98)}}@media (prefers-reduced-motion:reduce){.drawpad{animation:none}}.drawpad-head{display:flex;align-items:center;justify-content:space-between;padding-left:2px}.drawpad-head h2{font-size:13px;font-weight:600}.drawpad-head .ghost{height:28px}.drawpad-grid{display:block;width:100%;aspect-ratio:1;border-radius:10px;background:var(--ui-hover);touch-action:none;cursor:crosshair}.drawpad-grid.erase{cursor:cell}.drawpad-grid pattern circle{fill:var(--ui-ink-2);opacity:.55}.drawpad-grid .guides line{stroke:var(--ui-ink-2);stroke-width:.05;stroke-dasharray:.3 .3;opacity:.45}.drawpad-grid .ink{fill:none;stroke:var(--ui-ink);stroke-width:.26;stroke-linecap:round;stroke-linejoin:round}.drawpad-grid .cursor{fill:none;stroke:var(--ui-ink);stroke-width:.07;pointer-events:none}.drawpad-row{display:flex;align-items:center;gap:6px}.drawpad-row .segs{flex:1 1 auto}.drawpad .ghost:disabled{opacity:.4;cursor:default}.drawpad .hint{padding:0 2px}.sources{position:relative;margin-left:auto}.sources summary{list-style:none}.sources summary::-webkit-details-marker{display:none}.sources-pop{position:absolute;right:0;bottom:44px;z-index:10003;display:grid;gap:10px;width:340px;padding:14px;border-radius:14px;background:var(--ui-panel);box-shadow:0 0 0 .5px var(--ui-hair),0 12px 32px rgba(19,18,16,.16)}.sources-pop ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.sources-pop li{display:grid;gap:2px}.sources-pop a{color:var(--ui-ink);font-weight:500;text-decoration:none}@media (hover:hover) and (pointer:fine){.sources-pop a:hover{text-decoration:underline}}.corner .legend{display:inline-block;max-width:min(46vw,560px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;vertical-align:bottom}.alphabet{margin-left:auto}.alphabet+.sources{margin-left:0}.alphabet-pop{width:420px;max-height:70vh;overflow:auto}.spelled{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}.spelled li{display:flex;align-items:center;gap:6px;padding:4px 8px 4px 4px;border-radius:8px;background:var(--ui-hover);font-size:12px}.glyph{display:inline-flex;width:26px;height:26px;color:var(--ui-ink)}.glyph svg{width:100%;height:100%}.alphabet-grid{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}.alphabet-grid li{display:grid;justify-items:center;gap:2px;padding:6px 0 4px;border-radius:8px;background:var(--ui-hover);font-size:11px}.alphabet-grid .glyph{width:30px;height:30px}.symbol-construction-pop{width:min(600px,calc(100vw - 32px));max-height:min(640px,calc(100dvh - 200px));overflow-y:auto;overscroll-behavior:contain;padding:20px 24px 0}.symbol-construction-pop:after{content:"";position:sticky;bottom:0;display:block;height:32px;margin:-8px -24px 0;background:linear-gradient(to bottom,transparent,var(--ui-panel));pointer-events:none}.symbol-construction-pop h3{margin:4px 0 12px;font-size:24px;letter-spacing:.08em}.symbol-construction-pop p{margin:10px 0}.symbol-recipe{display:grid;grid-template-columns:minmax(120px,1fr) 1fr;align-items:center;gap:24px;margin:20px 0}.symbol-recipe>svg{width:100%;max-height:240px}.symbol-letter-buttons{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:16px}.symbol-letter-buttons button{display:grid;gap:4px;min-width:34px;padding:8px;border:1px solid var(--ui-hair);border-radius:6px;background:transparent;color:var(--ui-ink);cursor:pointer}.symbol-letter-buttons button span{font-size:10px;color:var(--ui-ink-2)}.symbol-letter-buttons button[aria-pressed=true]{background:var(--ui-fill);border-color:var(--ui-ink-2)}@media (max-width:600px){.symbol-construction-pop{position:fixed;inset:auto 16px 24px}.symbol-recipe{gap:12px}}.symbol-construction-close{position:absolute;top:8px;right:8px;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--ui-ink-2);font-size:22px;cursor:pointer}.symbol-construction-close:hover{color:var(--ui-ink);background:var(--ui-hover)}.floral-measures{margin:0;align-self:center}.floral-measures>div{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--ui-hair)}.floral-measures dt{font-size:13px}.floral-measures dd{margin:0;text-align:right;font-size:13px}.floral-measures small{display:block;opacity:.55;font-size:10px;margin-top:2px}.symbol-construction-pop h3{overflow-wrap:anywhere}.botanical-components{display:grid;gap:6px}.botanical-components button{display:grid;gap:3px;padding:10px 12px;text-align:left;border:1px solid var(--ui-hair);border-radius:6px;background:transparent;color:var(--ui-ink);cursor:pointer}.botanical-components button:hover{background:var(--ui-hover)}.botanical-components button[aria-pressed=true]{background:var(--ui-fill);border-color:var(--ui-ink-2)}.botanical-components small,.botanical-components span{color:var(--ui-ink-2);font-size:10px}.botanical-components b{font-size:13px;font-weight:500}.symbol-upgrade{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 16px;font-size:12px;color:var(--ui-ink-2)}.motif-upload{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;border:1px solid var(--ui-hair);border-radius:16px;background:var(--ui-panel);color:var(--ui-ink);overflow:auto;box-shadow:0 16px 48px #13121026}.motif-upload::backdrop{background:#13121066}.motif-upload[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:16px;height:fit-content;max-height:calc(100dvh - 32px);overflow:hidden}.upload-body{min-height:0;overflow:auto;padding-right:4px}.upload-body>*+*{margin-top:16px}.motif-upload .drawpad-head{padding:0}.motif-upload .drawpad-head h2{font-size:18px}.motif-upload .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);border:0}.upload-choose{display:grid;gap:4px;width:100%;height:auto;padding:16px;border:1px solid var(--ui-hair)}.upload-preview{display:grid;justify-items:center;gap:8px;padding:16px;border-radius:8px;background:var(--ui-fill)}.upload-preview svg{width:160px;height:160px}.upload-preview span{max-width:100%;overflow-wrap:anywhere;font-size:11px}.upload-mask{border:0;padding:0;min-width:0}.upload-mask legend{font-size:12px;margin-bottom:8px}.upload-mask .segs{display:flex;flex-wrap:wrap}.upload-mask .seg{flex:1 1}.upload-mask .seg span{padding-inline:8px}.upload-threshold{display:grid;grid-template-columns:1fr auto;gap:8px;font-size:12px}.upload-threshold input{grid-column:1/-1;width:100%;accent-color:var(--ui-ink)}.motif-upload footer{display:grid;gap:12px}.motif-upload footer .primary{width:100%;justify-content:center}.motif-upload .upload-error{color:var(--ui-ink);font-weight:600}.upload-missing{padding:24px;display:grid;justify-items:start;gap:16px}@media (max-height:700px){.upload-preview{grid-template-columns:96px minmax(0,1fr);align-items:center;padding:8px}.upload-preview svg{width:96px;height:96px}.upload-body>*+*{margin-top:12px}.upload-choose{padding:12px}}.sliding-pill{position:absolute;top:2px;bottom:2px;left:0;z-index:0;border-radius:8px;background:var(--ui-active);pointer-events:none}.sliding-pill[data-ready]{transition:translate .34s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.32,.72,0,1)}[data-draggable]{touch-action:pan-y;user-select:none;-webkit-user-select:none}[data-draggable]>.sliding-pill{transform-origin:left center}[data-draggable]>.sliding-pill[data-ready]{transition-duration:.22s}[data-draggable]>.sliding-pill:is([data-held],[data-settling],[data-keyboard]){transition:none}.segs{position:relative}.segs>.seg{z-index:1}.segs:has(>.sliding-pill) .seg input:checked+span{background:transparent}.seg span{transition:color .2s var(--ui-ease),transform .15s var(--ui-ease)}.seg:active span{transform:scale(.96)}.theme-switch .sliding-pill{background:var(--ui-fill)}.pattern-tool .stage.stage-in{animation:stage-in .26s var(--ui-ease)}@keyframes stage-in{0%{opacity:0}}.tool-foot details[open]>.sources-pop{transform-origin:bottom right;animation:pop-in .2s var(--ui-ease)}@keyframes pop-in{0%{opacity:0;transform:translateY(4px) scale(.98)}}.text-tool .tool-foot{border-top:0;border-radius:16px}.dialkit-segmented-pill{transition:left .34s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.32,.72,0,1)!important}.dialkit-segmented-button{transition:color .2s var(--ui-ease),transform .15s var(--ui-ease)}.dialkit-segmented-button:active,.dialkit-select-trigger:active,.dialkit-toolbar-add:active,.dialkit-toolbar-copy:active{transform:scale(.96)}.dialkit-select-trigger,.dialkit-toolbar-add{transition:background-color .15s var(--ui-ease),transform .15s var(--ui-ease)}.dialkit-toolbar-add.dialkit-toolbar-primary{background:var(--dial-surface);color:var(--dial-text-label)}@media (hover:hover) and (pointer:fine){.dialkit-toolbar-add.dialkit-toolbar-primary:hover{background:var(--dial-surface-hover);color:var(--dial-text-primary)}}.dialkit-select-option{position:relative;padding-right:32px}.dialkit-select-option[data-selected=true]{background:transparent;color:var(--dial-text-primary)}.dialkit-select-option[data-selected=true]:after{content:"";position:absolute;top:50%;right:10px;width:14px;height:14px;translate:0 -50%;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.4 5.8 10 11 4'/%3E%3C/svg%3E") center /contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.4 5.8 10 11 4'/%3E%3C/svg%3E") center /contain no-repeat}.dialkit-select-option:active,.dialkit-select-option:focus-visible{background:var(--dial-surface-hover)}@media (hover:hover) and (pointer:fine){.dialkit-select-option:hover{background:var(--dial-surface-hover)}}.drawpad,.pattern-bar,.pattern-mode-buttons,.phone-tabs,.tool-panel{-webkit-tap-highlight-color:transparent}.dialkit-select-option,.dialkit-select-trigger,.drawpad button,.pattern-mode-buttons :is(button,a),.phone-tabs button{touch-action:manipulation;-webkit-user-select:none;user-select:none}.dialkit-select-dropdown{transform-origin:top center;transition:opacity .16s var(--ui-ease),scale .16s var(--ui-ease),translate .16s var(--ui-ease),overlay .16s allow-discrete,display .16s allow-discrete}@starting-style{.dialkit-select-dropdown:popover-open{opacity:0;scale:.98;translate:0 -4px}}@media (prefers-reduced-motion:reduce){.dialkit-segmented-pill,.sliding-pill[data-ready]{transition:none!important}.pattern-tool .stage.stage-in,.tool-foot details[open]>.sources-pop{animation:none}.dialkit-select-dropdown{transition:none}.dialkit-segmented-button:active,.dialkit-select-trigger:active,.dialkit-toolbar-add:active,.dialkit-toolbar-copy:active,.pattern-mode-buttons a:active,.pattern-mode-buttons button:active,.seg:active span{transform:none}}.dialkit-select-option:focus-visible{outline:none}.tool-foot .ghost[aria-pressed=true],.tool-foot details[open]>summary.ghost{background:var(--ui-fill)}.tool.pattern-tool{position:relative;height:calc(100dvh - var(--ui-top));min-height:640px}.tool.pattern-tool.pattern-tool-symbol>.canvas,.tool.pattern-tool>.canvas{grid-row:1;min-height:0}.tool.text-tool{position:relative;grid-template-rows:minmax(520px,1fr) auto}.text-tool .corner.tl{display:none}.pattern-bar,.pattern-tool .pattern-mode-buttons,.text-tool .pattern-mode-buttons{background:color-mix(in srgb,var(--ui-panel) 84%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 0 0 .5px rgba(19,18,16,.1),0 1px 2px rgba(19,18,16,.08),0 12px 32px rgba(19,18,16,.22)}.pattern-tool>.pattern-modes,.text-tool>.pattern-modes{position:absolute;z-index:5;top:calc(var(--ui-gutter) + 12px);left:calc(var(--ui-gutter) + 12px);right:calc(var(--ui-gutter) + 312px);gap:10px 14px;pointer-events:none}.pattern-tool>.pattern-modes>*,.text-tool>.pattern-modes>*{pointer-events:auto}.pattern-tool .pattern-mode-buttons,.text-tool .pattern-mode-buttons{gap:2px;padding:4px;border-radius:14px}.pattern-tool .pattern-mode-buttons a,.pattern-tool .pattern-mode-buttons button,.text-tool .pattern-mode-buttons a,.text-tool .pattern-mode-buttons button{height:30px;padding:0 13px;border-radius:10px;font-weight:500;line-height:30px;color:color-mix(in srgb,var(--ui-ink) 55%,transparent)}.pattern-tool .pattern-mode-buttons [aria-pressed=true],.text-tool .pattern-mode-buttons [aria-pressed=true]{color:var(--ui-ink)}.pattern-tool .pattern-mode-buttons .sliding-pill,.text-tool .pattern-mode-buttons .sliding-pill{top:4px;bottom:4px;border-radius:10px;background:var(--ui-panel);box-shadow:0 0 0 .5px rgba(19,18,16,.08),0 1px 3px rgba(19,18,16,.12)}.pattern-tool .symbol-upgrade,.pattern-tool>.pattern-modes .hint,.text-tool>.pattern-modes .hint{color:rgba(255,255,255,.62);font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.4)}.pattern-tool[data-ground=khadi] .symbol-upgrade,.pattern-tool[data-ground=khadi]>.pattern-modes .hint{color:rgba(19,18,16,.6);text-shadow:none}.pattern-tool .symbol-upgrade{flex-basis:100%;padding:0 0 0 4px}.pattern-tool .symbol-upgrade .ghost{height:28px;text-shadow:none;color:var(--ui-ink);background:color-mix(in srgb,var(--ui-panel) 84%,transparent);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.pattern-tool .corner.br{line-height:17px}.pattern-tool .symbol-sizes{bottom:96px}.pattern-tool .symbol-preview{top:calc(50% - 36px)}.pattern-tool .drawpad{top:64px;max-height:calc(100% - 148px)}.tool>.pattern-bar{position:absolute;z-index:5;left:calc(var(--ui-gutter) + 12px);bottom:calc(var(--ui-gutter) + 12px);max-width:calc(100% - 2 * var(--ui-gutter) - 24px);display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:6px;border:0;border-radius:16px}.pattern-bar .bar-group{display:flex;align-items:center;gap:2px}.pattern-bar .bar-export{gap:6px}.pattern-bar .bar-rule{align-self:center;width:0;height:18px;margin:0 14px;background:none}.pattern-bar .ghost,.pattern-bar .primary{height:34px;padding:0 12px;border-radius:10px;gap:8px}.pattern-bar .ghost{background:transparent;color:var(--ui-ink)}@media (hover:hover) and (pointer:fine){.pattern-bar .ghost:hover{background:rgba(19,18,16,.06)}}.pattern-bar .ghost[aria-pressed=true],.pattern-bar details[open]>summary.ghost{background:rgba(19,18,16,.09)}.pattern-bar .primary{width:auto;padding:0 14px;box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 1px 2px rgba(19,18,16,.25)}.pattern-bar .m{font-size:11px;opacity:.5;font-feature-settings:"tnum";font-variant-numeric:tabular-nums}@media (max-width:439px){.pattern-bar .m{display:none}}.pattern-bar .alphabet,.pattern-bar .sources{margin-left:0}.pattern-bar .sources-pop{left:0;right:auto;bottom:calc(100% + 14px)}.pattern-bar details[open]>.sources-pop{transform-origin:bottom left}.pattern-bar .bar-note{position:absolute;left:0;bottom:calc(100% + 8px);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:max-content;max-width:min(560px,calc(100vw - 48px));padding:7px 12px;border-radius:12px;background:color-mix(in srgb,var(--ui-panel) 84%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 0 0 .5px rgba(19,18,16,.1),0 8px 24px rgba(19,18,16,.18)}.pattern-bar .bar-note .hint{margin:0;font-size:12px}.pattern-bar .bar-note code{font-size:11px;color:var(--ui-ink-2)}:root[data-theme=dark] .pattern-bar .bar-note{background-color:rgba(255,255,255,.12);border-color:rgba(255,255,255,.08);background-color:transparent}@media (hover:hover) and (pointer:fine){:root[data-theme=dark] .pattern-bar .ghost:hover{background:rgba(255,255,255,.08)}}:root[data-theme=dark] .pattern-bar .ghost[aria-pressed=true],:root[data-theme=dark] .pattern-bar details[open]>summary.ghost{background:rgba(255,255,255,.12)}@media (max-width:900px){.pattern-tool>.pattern-modes,.text-tool>.pattern-modes{right:calc(var(--ui-gutter) + 12px)}}.dialkit-root{font-family:var(--ui-font);--dial-radius:10px;--dial-row-height:34px;--dial-row-gap:4px}.dialkit-root[data-theme=light]{--dial-glass-bg:#ffffff;--dial-dropdown-bg:#ffffff;--dial-surface:rgba(19,18,16,0.045);--dial-surface-hover:rgba(19,18,16,0.075);--dial-surface-active:rgba(19,18,16,0.1);--dial-surface-subtle:rgba(19,18,16,0.06);--dial-text-root:#131210;--dial-text-primary:#131210;--dial-text-label:rgba(19,18,16,0.6);--dial-text-section:rgba(19,18,16,0.42);--dial-border:rgba(19,18,16,0.08);--dial-shadow:0 0 0 0.5px rgba(19,18,16,0.1),0 1px 2px rgba(19,18,16,0.06),0 16px 40px rgba(19,18,16,0.16);--dial-shadow-dropdown:0 0 0 0.5px rgba(19,18,16,0.1),0 12px 32px rgba(19,18,16,0.16)}.dialkit-panel:not([data-mode=inline]) .dialkit-panel-inner:not([data-collapsed=true]){border:0;border-radius:18px;padding:4px 8px 8px;box-shadow:var(--dial-shadow)}.dialkit-root[data-theme=dark] .dialkit-panel:not([data-mode=inline]) .dialkit-panel-inner:not([data-collapsed=true]){box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 16px 40px rgba(0,0,0,.5)}.dialkit-folder-title-root{font-size:14px;font-weight:600;letter-spacing:-.01em}.dialkit-folder:not(.dialkit-folder-root)>.dialkit-folder-header .dialkit-folder-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dial-text-section)}.dialkit-select-value,.dialkit-slider-value,.dialkit-text-input{color:var(--dial-text-primary);font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.dialkit-select-dropdown{border:0;border-radius:12px}@media (min-width:881px){.tool.pattern-tool{height:100dvh}}.dialkit-panel[data-position=top-right]:not([data-mode=inline]){top:calc(var(--ui-gutter) + 12px);right:calc(var(--ui-gutter) + 12px)}.pattern-tool .corner.br,.pattern-tool .stage.repeating~.corner.br{right:12px;bottom:12px;margin:0;padding:8px 10px;border-radius:10px;line-height:17px;background:color-mix(in srgb,var(--ground) 92%,transparent);box-shadow:0 0 0 .5px var(--hair);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.pattern-tool .corner.br .file{color:var(--ink)}.pattern-tool .corner.br .legend{max-width:min(40vw,460px)}.tool.text-tool{grid-template-rows:minmax(520px,1fr)}@media (min-width:881px){.tool.text-tool{height:100dvh}.text-tool .text-frame,.text-tool .text-workspace,.text-tool .text-workspace>.canvas{min-height:0;height:100%}}.text-tool .corner.bl{display:none}.text-tool .corner.br{bottom:24px}.dialkit-text-input:focus-visible{background-image:none}.dialkit-text-control{transition:background-color .15s var(--ui-ease),box-shadow .15s var(--ui-ease)}.dialkit-text-control:focus-within{background:var(--dial-surface-hover);box-shadow:inset 0 0 0 1px var(--dial-border-hover)}.motif-upload{width:min(440px,calc(100vw - 32px));padding:20px;border:0;border-radius:20px;box-shadow:0 0 0 .5px rgba(19,18,16,.1),0 24px 64px rgba(19,18,16,.28)}.motif-upload[open]{animation:sheet-in .24s var(--ui-ease)}.motif-upload::backdrop{background:rgba(19,18,16,.42);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@keyframes sheet-in{0%{opacity:0;transform:translateY(8px) scale(.98)}}.motif-upload .drawpad-head h2{font-size:17px;font-weight:600;letter-spacing:-.01em}.motif-upload .drawpad-head .ghost{width:30px;height:30px;padding:0;justify-content:center;border-radius:50%;font-size:17px;color:var(--ui-ink-2)}.motif-upload .upload-choose{min-height:112px;align-content:center;justify-items:center;border:1.5px dashed rgba(19,18,16,.16);border-radius:14px;background:transparent}@media (hover:hover) and (pointer:fine){.motif-upload .upload-choose:hover{border-color:rgba(19,18,16,.32);background:rgba(19,18,16,.025)}}.motif-upload .upload-choose .hint{font-weight:400}.motif-upload footer{padding-top:4px}.motif-upload footer .primary{height:40px;border-radius:12px}.motif-upload footer .primary:disabled{opacity:.28;cursor:default}:root[data-theme=dark] .motif-upload .upload-choose{border-color:rgba(255,255,255,.16)}@media (prefers-reduced-motion:reduce){.motif-upload[open]{animation:none}}.page{margin:0;padding:32px 28px 72px}.home{padding:32px 28px 64px}.home-head h1{font-size:22px;line-height:28px;letter-spacing:-.01em}.home-head h1,.page-head h1{text-wrap:balance}.home-head p,.page-head p{text-wrap:pretty}.side nav{position:relative}.side nav>.sliding-pill{top:0;bottom:auto;left:0;right:0;width:auto;border-radius:8px;background:var(--ui-fill)}.side nav>.sliding-pill[data-ready]{transition:translate .34s cubic-bezier(.32,.72,0,1),height .34s cubic-bezier(.32,.72,0,1)}.side-group a{position:relative;z-index:1;border-radius:8px;transition:background-color .15s var(--ui-ease),color .15s var(--ui-ease),transform .15s var(--ui-ease)}.side-group a:active{transform:scale(.98)}.side nav:has(>.sliding-pill:not([hidden])) .side-group a[aria-current=page]{background:transparent}.side-group a[aria-current=page]{font-weight:500;color:var(--ui-ink)}.side-flag{padding:1px 5px;border-radius:5px;background:var(--ui-hover);font-size:9.5px;letter-spacing:.02em}.waiting{min-height:min(560px,calc(100dvh - 180px));padding:24px;background-color:var(--ui-panel);background-image:radial-gradient(circle,color-mix(in srgb,var(--ui-ink) 14%,transparent) 1px,transparent 1.2px);background-size:18px 18px;background-position:50%;box-shadow:inset 0 0 0 .5px var(--ui-hair)}.waiting-card{display:grid;justify-items:center;gap:8px;max-width:380px;padding:22px 26px 24px;border-radius:16px;background:var(--ui-panel);box-shadow:0 0 0 .5px rgba(19,18,16,.1),0 12px 32px rgba(19,18,16,.1)}.waiting-status{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:var(--ui-hover);color:var(--ui-ink-2);font-size:11px}.waiting-dot{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6}.waiting-title{margin-top:6px;font-size:15px;font-weight:600;letter-spacing:-.01em}.waiting .quiet{font-size:13px;line-height:19px;text-wrap:pretty}.tk{max-width:1180px}#colour,.tk-section,.tk-two{scroll-margin-top:72px}.type-app .type-bar,.type-app .type-pop{background:color-mix(in srgb,var(--ui-panel) 84%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);box-shadow:0 0 0 .5px rgba(19,18,16,.1),0 1px 2px rgba(19,18,16,.08),0 12px 32px rgba(19,18,16,.22)}.files .ghost,.tk-files .ghost{background:var(--ui-panel);box-shadow:0 0 0 .5px var(--ui-hair)}@media (prefers-reduced-motion:reduce){.side nav>.sliding-pill[data-ready]{transition:none}.side-group a:active,.tk-index a:active{transform:none}}.work img{outline:1px solid rgba(0,0,0,.08);outline-offset:-1px;transition:transform .25s var(--ui-ease),box-shadow .25s var(--ui-ease)}:root[data-theme=dark] .work img{outline-color:rgba(255,255,255,.08)}@media (hover:hover) and (pointer:fine){.work a:hover img{transform:translateY(-2px);box-shadow:0 10px 24px rgba(19,18,16,.12)}}.work a:active img{transform:scale(.99)}.home-tools a{border-radius:8px;transition:background-color .15s var(--ui-ease)}@media (prefers-reduced-motion:reduce){.work img{transition:none}.work a:active img,.work a:hover img{transform:none}}:root[data-theme=dark] .waiting-card{background:var(--ui-hover);box-shadow:0 0 0 .5px rgba(255,255,255,.1),0 12px 32px rgba(0,0,0,.4)}:root[data-theme=dark] .waiting-status{background:var(--ui-active)}.tool.pattern-tool{grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:minmax(0,1fr)}.tool.pattern-tool>.canvas{grid-column:1;grid-row:1}.text-workspace{grid-template-columns:minmax(0,1fr) 320px}.tool-panel{grid-column:2;grid-row:1;min-height:0;overflow:auto;overscroll-behavior:contain;border-radius:16px;background:var(--ui-panel)}.tool-panel .dialkit-panel,.tool-panel .dialkit-panel-inline,.tool-panel .dialkit-panel-wrapper,.tool-panel>.dialkit-root{position:static;width:auto;max-height:none}.text-dials .dialkit-panel-inner,.tool-panel .dialkit-panel-inner,.type-panel .dialkit-panel-inner{border:0;background:transparent;box-shadow:none}.pattern-tool>.pattern-modes,.text-tool>.pattern-modes{right:calc(320px + 2 * var(--ui-gutter) + 12px)}.tool.pattern-tool>.pattern-bar{max-width:calc(100% - 320px - 3 * var(--ui-gutter) - 24px)}@media (max-width:880px){.text-workspace,.tool.pattern-tool{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(560px,1fr) auto;height:auto}.tool-panel{grid-column:1;grid-row:2}.pattern-tool>.pattern-modes,.text-tool>.pattern-modes{right:calc(var(--ui-gutter) + 12px)}}.book,.home,.page{max-width:none;margin:0;padding:24px var(--ui-gutter) 72px}.tk{max-width:none}.book-bar,.home-head,.page-head,.tk-section-head{padding:0 12px;margin-left:0;margin-right:0}.tk-index{margin-left:0}.shell .book{max-width:none;margin:0;padding:24px var(--ui-gutter) 80px}.shell .book-bar{padding:0 12px}.text-tool .text-workspace{grid-template-columns:minmax(0,1fr) 320px}.page.tk{max-width:none}.page.tk .tk-section-head{margin:0 0 14px;padding:0 12px}.section-title{padding:0 12px}.pattern-tool .corner.br,.pattern-tool .stage.repeating~.corner.br{top:12px;bottom:auto}.page.tk .tk-index-band{position:sticky;top:0;z-index:3;margin:0 calc(-1 * var(--ui-gutter)) 16px;padding:var(--ui-gutter);background:var(--ui-page)}.page.tk .tk-index{position:relative;top:auto;display:flex;flex-wrap:wrap;gap:2px;width:max-content;max-width:100%;margin:0;padding:4px;border:0;border-radius:14px;background:var(--ui-panel);box-shadow:0 0 0 .5px var(--ui-hair),0 1px 2px rgba(19,18,16,.04)}.page.tk .tk-index a{position:relative;z-index:1;display:block;height:30px;padding:0 12px;border-radius:10px;color:var(--ui-ink-2);font-size:13px;font-weight:500;line-height:30px;text-decoration:none;transition:color .2s var(--ui-ease),transform .15s var(--ui-ease)}@media (hover:hover) and (pointer:fine){.page.tk .tk-index a:hover{background:transparent;color:var(--ui-ink)}}.page.tk .tk-index a:active{transform:scale(.96)}.page.tk .tk-index a[aria-current=location]{color:var(--ui-ink)}.page.tk .tk-index>.sliding-pill{top:4px;bottom:4px;border-radius:10px;background:var(--ui-fill)}.page.tk #colour,.page.tk .tk-section,.page.tk .tk-two{scroll-margin-top:72px}.page.tk .tk-index-band:after{content:"";position:absolute;left:0;right:0;top:100%;height:16px;background:linear-gradient(var(--ui-page),transparent);pointer-events:none}html[data-embed] .side,html[data-embed] .skip{display:none}html[data-embed] .shell{grid-template-columns:minmax(0,1fr)}html[data-embed]{--ui-top:0px}html[data-embed]:not([data-embed-top]) .shell{zoom:var(--z,1);min-height:calc(100dvh / var(--z, 1))}@media (min-width:881px){html[data-embed]:not([data-embed-top]),html[data-embed]:not([data-embed-top]) body{overflow:hidden}html[data-embed]:not([data-embed-top]) .tool.pattern-tool{height:calc(100dvh / var(--z, 1));min-height:0}html[data-embed]:not([data-embed-top]) .tool.text-tool{grid-template-rows:minmax(0,1fr) auto;height:calc(100dvh / var(--z, 1));min-height:0}}@media (min-width:881px) and (min-height:561px){html[data-embed-top] .tool.pattern-tool{height:100dvh;min-height:0}html[data-embed-top] .tool.text-tool{grid-template-rows:minmax(0,1fr) auto;height:100dvh;min-height:0}}@media (max-width:880px){html[data-embed] .tool.pattern-tool{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(340px,58dvh) auto auto;height:auto;min-height:0}html[data-embed] .tool.pattern-tool>.pattern-bar{position:static;grid-row:3;max-width:none;margin:0;justify-content:flex-start}html[data-embed] .tool.pattern-tool>.tool-panel{grid-column:1;grid-row:2}html[data-embed] .pattern-tool>.pattern-modes{right:calc(var(--ui-gutter) + 12px)}html[data-embed] .pattern-mode-buttons{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}html[data-embed] .pattern-mode-buttons>*{flex:none;white-space:nowrap}html[data-embed] .pattern-tool .corner.br{display:none}}@media (max-height:560px){html[data-embed-top] .tool.pattern-tool{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(340px,58dvh) auto auto;height:auto;min-height:0}html[data-embed-top] .tool.pattern-tool>.pattern-bar{position:static;grid-row:3;max-width:none;margin:0;justify-content:flex-start}html[data-embed-top] .tool.pattern-tool>.tool-panel{grid-column:1;grid-row:2}html[data-embed-top] .pattern-tool>.pattern-modes{right:calc(var(--ui-gutter) + 12px)}html[data-embed-top] .pattern-mode-buttons{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;max-width:100%}html[data-embed-top] .pattern-mode-buttons>*{flex:none;white-space:nowrap}}.embed-back{display:none}html[data-embed-top] .embed-back{display:block;padding:12px var(--ui-gutter) 0;font-size:13px;color:var(--ui-ink);opacity:.7;text-decoration:none}html[data-embed-top] .embed-back:hover{opacity:1}.alphabet-grid li[data-used]{background:var(--ui-hover);border-radius:8px}.alphabet-grid li[data-used] b{color:var(--ui-ink)}.mode-short,.pattern-seed,.phone-tabs,.side-menu{display:none}@media (max-width:760px) and (pointer:coarse){:root{--ui-top:53px;--ui-control-height:44px;--ui-control-text:15px;--ui-control-line:20px;--ui-control-radius:12px;--ui-tray-inset:4px;--ui-tray-radius:calc(var(--ui-control-radius) + var(--ui-tray-inset))}html[data-embed-top]{--ui-top:var(--ui-control-height)}html[data-embed-top] .embed-back{display:flex;align-items:center;height:var(--ui-top);padding:0 var(--ui-gutter)}.shell{grid-template-columns:minmax(0,1fr);min-height:0}.side{position:sticky;top:0;z-index:20;flex-direction:row;align-items:center;gap:12px;height:53px;padding:0 12px;border-right:0;border-bottom:1px solid var(--ui-hair);background:var(--ui-page)}.side>.side-end,.side>nav{display:none}.side-menu{display:block;position:relative;margin-left:auto}.side-menu>summary{list-style:none;height:44px;padding:0 20px}.side-menu>summary::-webkit-details-marker{display:none}.side-menu-pop{position:absolute;z-index:30;top:calc(100% + 6px);right:0;display:grid;gap:6px;min-width:220px;padding:6px;border-radius:16px;background:var(--ui-panel);box-shadow:0 0 0 .5px var(--ui-hair),0 12px 32px rgba(19,18,16,.22)}.side-menu-pop ul{margin:0;padding:0;list-style:none}.side-menu-pop a{display:flex;align-items:center;height:44px;padding:0 14px;border-radius:10px;color:inherit;text-decoration:none;font-size:15px}.side-menu-pop a[aria-current=page]{background:var(--ui-fill);font-weight:500}.mode-long{display:none}.mode-short{display:inline}:root[data-phone-tool]{overscroll-behavior:none}:root[data-phone-tool][data-phone-tool] .tool .canvas{touch-action:none}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto auto auto;height:calc(var(--vvh, 100dvh) - var(--ui-top));min-height:0;overflow:hidden;gap:8px}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool>.canvas{grid-column:1;grid-row:1;height:auto;min-height:0}:root[data-phone-tool][data-phone-tool] .pattern-tool>.pattern-modes{right:calc(var(--ui-gutter) + 12px)}:root:root :is(.pattern-tool,.text-tool) .pattern-mode-buttons{flex-wrap:nowrap;overflow:visible;max-width:100%;gap:2px;padding:var(--ui-tray-inset);border-radius:var(--ui-tray-radius);background:var(--ui-panel);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:none;mask-image:none}:root:root :is(.pattern-tool,.text-tool) .pattern-mode-buttons>:is(button,a){display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;height:var(--ui-control-height);padding:0 clamp(4px,2vw,12px);border-radius:var(--ui-control-radius);white-space:nowrap;font-size:var(--ui-control-text);line-height:var(--ui-control-line)}:root:root :is(.pattern-tool,.text-tool) .pattern-mode-buttons>:is(button,a):before{content:none}:root:root :is(.pattern-tool,.text-tool) .pattern-mode-buttons>.sliding-pill{top:var(--ui-tray-inset);bottom:var(--ui-tray-inset);border-radius:var(--ui-control-radius);background:var(--ui-fill);box-shadow:none}:root[data-phone-tool][data-phone-tool] .pattern-tool .symbol-sizes{bottom:12px;gap:24px}:root[data-phone-tool][data-phone-tool] .pattern-tool .symbol-size .m{white-space:nowrap}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .pattern-tool[data-tight]:not([data-tab=Export]) .stage .single{margin-top:64px}:root[data-phone-tool][data-phone-tool] .pattern-tool .stage .export-preview{top:50%;margin-top:0}:root[data-phone-tool][data-phone-tool] .pattern-tool .corner.br,:root[data-phone-tool][data-phone-tool] .pattern-tool .symbol-upgrade{display:none}:root[data-phone-tool][data-phone-tool] .pattern-tool>.tool-panel{position:static;grid-column:1;grid-row:3;inset:auto;max-height:min(26dvh,180px);margin:0;padding:8px 0;overflow:auto;overscroll-behavior:contain;border-radius:16px;box-shadow:none;transform:none;visibility:visible;opacity:1;transition:none}:root[data-phone-tool][data-phone-tool] .pattern-tool>.tool-panel:after{content:none}:root[data-phone-tool][data-phone-tool] .tool-panel .dialkit-root{--dial-row-height:44px;--dial-row-gap:6px}:root[data-phone-tool][data-phone-tool] .tool-panel .dialkit-folder[data-group]>.dialkit-folder-header,:root[data-phone-tool][data-phone-tool] .tool-panel .dialkit-panel-header>.dialkit-folder-header-top,:root[data-phone-tool][data-phone-tool] .tool-panel:is([data-tab=Pattern],[data-tab=Layout]) .dialkit-folder[data-group]:not([data-group=Pattern]),:root[data-phone-tool][data-phone-tool] .tool-panel:not([data-tab=Export]) .dialkit-panel-toolbar,:root[data-phone-tool][data-phone-tool] .tool-panel[data-tab=Export] .dialkit-folder[data-group],:root[data-phone-tool][data-phone-tool] .tool-panel[data-tab=Finish] .dialkit-folder[data-group]:not([data-group=Finish]),:root[data-phone-tool][data-phone-tool] .tool-panel[data-tab=Layout] .dialkit-folder[data-group=Pattern] .dialkit-folder-inner>:not([data-layout-row]),:root[data-phone-tool][data-phone-tool] .tool-panel[data-tab=Pattern] .dialkit-folder[data-group=Pattern] [data-layout-row],:root[data-phone-tool][data-phone-tool] .tool-panel[data-tab=View] .dialkit-folder[data-group]:not([data-group=View]){display:none}:root[data-phone-tool][data-phone-tool] .tool-panel:not([data-tab=Export]) .dialkit-panel-header{padding:0;min-height:0}:root[data-phone-tool][data-phone-tool] .tool-panel .dialkit-text-input{font-size:16px}:root[data-phone-tool] .pattern-tool .tool-panel :is(.dialkit-text-control,.dialkit-panel-header){display:none}:root[data-phone-tool] .pattern-tool .tool-panel [data-motif-row],:root[data-phone-tool] .pattern-tool>.tool-panel[data-empty]{display:none}:root[data-phone-tool] .tool-panel .dialkit-folder:not(.dialkit-folder-root){margin:0;border:0;padding:0}:root[data-phone-tool] .pattern-tool[data-tab=Export]>:is(.tool-panel,.pattern-modes){display:none}.pattern-seed{display:grid;grid-row:2;gap:6px;min-width:0;margin:0}.pattern-seed>label{font-size:13px;line-height:18px;color:var(--ui-ink-2)}.pattern-seed-entry{display:flex;gap:8px;min-width:0}.pattern-seed input{width:100%;min-width:0;min-height:var(--ui-control-height);padding:10px 12px;border:1px solid var(--ui-hair);border-radius:var(--ui-control-radius);background:var(--ui-panel);color:var(--ui-ink);font:inherit;font-size:max(16px,1rem);line-height:22px;-webkit-user-select:text;user-select:text}.pattern-seed input:focus-visible{outline:2px solid var(--ui-ink);outline-offset:2px}.pattern-seed .seed-done{display:none;flex:none;min-height:44px;padding:0 16px}:root[data-phone-tool][data-phone-tool] .tool-panel .dialkit-segmented-button{position:relative}:root[data-phone-tool][data-phone-tool] .tool-panel .dialkit-segmented-button:before{content:"";position:absolute;inset:-7px -2px}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool>.pattern-bar{position:relative;inset:auto;grid-row:4;z-index:2;max-width:none;margin:0;padding:0;gap:6px;flex-wrap:wrap;justify-content:flex-start;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transform:none}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool:not([data-tab=Export])>.pattern-bar>:is(.bar-export,.phone-export-note),:root[data-phone-tool][data-phone-tool] .tool.pattern-tool[data-tab=Export]>.pattern-bar>.pattern-extras{display:none}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool:not([data-adjusting])>.pattern-bar>.pattern-extras,:root[data-phone-tool][data-phone-tool] .tool.pattern-tool:not([data-adjusting])>:is(.tool-panel,.phone-tabs){display:none}:root[data-phone-tool][data-phone-tool] .pattern-bar>.tools-toggle{flex:1 1 100%;justify-content:center;order:2}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool[data-adjusting]:not([data-tab=Export])>.pattern-bar{flex-wrap:nowrap}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool[data-adjusting]:not([data-tab=Export])>.pattern-bar>.tools-toggle{flex:0 0 auto;padding:0 20px}:root[data-phone-tool][data-phone-tool] .tool.pattern-tool[data-adjusting]>.pattern-bar>.pattern-extras{flex:1 1 auto;width:auto;min-width:0}:root[data-phone-tool][data-phone-tool] .pattern-bar .bar-note .copy,:root[data-phone-tool][data-phone-tool] .pattern-bar .bar-note code,:root[data-phone-tool][data-phone-tool] .pattern-bar .bar-rule{display:none}:root[data-phone-tool][data-phone-tool] .pattern-bar .bar-note{position:static;width:100%;max-width:none;padding:0;border-radius:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:root[data-phone-tool][data-phone-tool] .pattern-tool>.pattern-bar>.bar-group{position:static;inset:auto;display:flex;flex-wrap:wrap;gap:6px;width:100%;height:auto;padding:0;background:none;transform:none;visibility:visible;opacity:1;transition:none}:root:root :is(.pattern-tool,.text-tool)>.pattern-bar :is(.ghost,.primary){height:var(--ui-control-height);padding:0 12px;border-radius:var(--ui-control-radius);font-size:var(--ui-control-text);line-height:var(--ui-control-line)}:root:root .text-tool>.pattern-bar{padding:var(--ui-tray-inset);gap:2px;border-radius:var(--ui-tray-radius);padding-bottom:max(var(--ui-tray-inset),env(safe-area-inset-bottom));background:var(--ui-panel);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}:root:root .text-tool>.pattern-bar .bar-export{width:100%;flex-wrap:nowrap;gap:2px}:root:root .text-tool>.pattern-bar .bar-export>*{flex:1 1 auto;min-width:0;justify-content:center}:root:root .text-tool>.pattern-bar .accio-kit-settings:before{content:none}:root[data-phone-tool][data-phone-tool] .pattern-bar .ghost{background:var(--ui-hover)}:root[data-phone-tool][data-phone-tool] .pattern-bar .bar-export>*{flex:1 1;justify-content:center}:root[data-phone-tool][data-phone-tool] .pattern-bar :is(.sources,.alphabet){position:static}:root[data-phone-tool][data-phone-tool] .pattern-bar .sources-pop{position:absolute;inset:auto 0 calc(100% + 8px);width:auto;max-height:min(60dvh,420px);overflow-y:auto;overscroll-behavior:contain}.pattern-extras{width:100%}.pattern-extras>button{width:100%;justify-content:center}.pattern-extras-dialog{--ui-ink-2:color-mix(in srgb,var(--ui-ink) 68%,var(--ui-panel));position:fixed;inset:auto 12px 12px;width:auto;height:auto;max-width:420px;max-height:calc(100% - 24px);margin:0 auto;padding:16px;border:1px solid var(--ui-hair);border-radius:20px;background:var(--ui-panel);color:var(--ui-ink);overflow:auto;outline:none}.pattern-extras-dialog[open]{display:flex;flex-direction:column;gap:12px}.pattern-extras-dialog::backdrop{background:rgb(0 0 0/35%)}.pattern-extras-dialog>header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:12px}.pattern-extras-dialog h2{margin:0;font-size:18px;outline:none}.tools-close{display:grid;place-items:center;flex:none;width:44px;height:44px;padding:0;border:0;border-radius:12px;color:inherit;background:var(--ui-hover);cursor:pointer}.pattern-extras-content{display:grid;flex:none;gap:16px;align-content:start}:root[data-phone-tool] .pattern-extras-content .bar-group{display:grid;gap:4px;align-content:start}.tools-group-label{margin:0 12px 4px;color:var(--ui-ink-2);font-size:12px;line-height:16px}:root[data-phone-tool][data-phone-tool] .pattern-extras-content .ghost{display:flex;justify-content:space-between;width:100%;height:auto;min-height:44px;padding:8px 12px;gap:12px;border-radius:12px;background:none;font-size:15px;line-height:20px;text-align:left}:root[data-phone-tool][data-phone-tool] .pattern-extras-content button[aria-pressed=true]{background:var(--ui-hover)}.pattern-extras-content small{display:block;margin-top:2px;color:var(--ui-ink-2);font-size:12px;line-height:16px}.tools-selected{flex:none;font-size:16px}.pattern-extras-content summary.ghost:after{content:"›";font-size:20px;color:var(--ui-ink-2)}.tools-close:active,:root[data-phone-tool][data-phone-tool] .pattern-extras-content .ghost:active{background:var(--ui-fill)}:root[data-phone-tool][data-phone-tool] .pattern-extras-content .sources-pop{position:fixed;inset:12px;width:auto;max-height:calc(100% - 24px);margin:0;overflow:auto;padding:64px 16px 16px;align-content:start;animation:none}:root[data-phone-tool] .pattern-extras-content .symbol-construction-close{width:44px;height:44px}.pattern-extras-dialog details[open]>summary,.pattern-extras-dialog:has(details[open]) .bar-group>:not(details[open]),.pattern-extras-dialog:has(details[open])>header{visibility:hidden}.phone-export-note{width:100%;margin:0;font-size:14px;line-height:1.4}.phone-export-note>span{display:block;color:var(--ui-ink-2);font-size:12px}:root[data-phone-tool] .bar-export .m,:root[data-phone-tool][data-phone-tool] .accio-kit-settings{display:none}.phone-tabs{display:flex;position:relative;isolation:isolate;grid-column:1;grid-row:5;gap:2px;padding:var(--ui-tray-inset);border-radius:var(--ui-tray-radius);background:var(--ui-panel);padding-bottom:max(var(--ui-tray-inset),env(safe-area-inset-bottom))}.phone-tabs button{position:relative;z-index:1;flex:1 1;min-width:0;height:var(--ui-control-height);padding:0 4px;border:0;border-radius:var(--ui-control-radius);background:transparent;color:var(--ui-ink-2);font:inherit;font-size:var(--ui-control-text);line-height:var(--ui-control-line);font-weight:500;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .15s var(--ui-ease),color .15s var(--ui-ease)}.phone-tabs button[aria-selected=true]{color:var(--ui-ink)}.phone-tabs:has(>button:nth-of-type(5)) button{flex-basis:auto;padding-inline:2px}.phone-tabs>.sliding-pill{top:var(--ui-tray-inset);bottom:max(var(--ui-tray-inset),env(safe-area-inset-bottom));border-radius:var(--ui-control-radius);background:var(--ui-fill)}.phone-tabs button:active{background:var(--ui-fill)}.phone-tabs:has([data-held]) button:active{background:transparent}.phone-tabs button:focus-visible{outline:2px solid var(--ui-ink);outline-offset:-2px}:root[data-phone-tool][data-seed-editing] .tool.pattern-tool{grid-template-rows:minmax(0,1fr) auto;background:var(--ui-page)}:root[data-phone-tool][data-seed-editing] .tool.pattern-tool>:is(.pattern-bar,.phone-tabs,.pattern-modes,.tool-panel){display:none}:root[data-phone-tool][data-seed-editing] .pattern-seed .seed-done{display:inline-flex}:root[data-phone-tool][data-seed-editing] .pattern-tool .stage .single{top:50%;margin-top:0}:root[data-phone-tool][data-seed-editing]:not([data-embed]) .tool.pattern-tool,:root[data-phone-tool][data-seed-editing][data-embed-top] .tool.pattern-tool{position:fixed;z-index:40;inset:var(--vvtop) 0 auto;height:var(--vvh)}:root[data-phone-tool] .pattern-tool .drawpad{position:fixed;inset:8px;width:auto;max-width:none;height:calc(100% - 16px);max-height:none;grid-template-rows:auto minmax(0,1fr) auto auto auto;gap:8px;overflow:hidden;padding:12px;animation:none}:root[data-phone-tool] .drawpad-grid{width:100%;height:100%;min-height:0}:root[data-phone-tool] .drawpad :is(.ghost,.seg span){min-height:44px}:root[data-phone-tool] .drawpad .seg span{display:grid;place-items:center;padding:0 8px}:root[data-phone-tool] .drawpad>.segs{display:flex}:root[data-phone-tool] .drawpad>.segs>.seg{flex:1 1}:root[data-phone-tool] .drawpad .hint{font-size:12px;line-height:1.4}}@media (min-width:480px) and (max-width:760px) and (max-height:450px) and (pointer:coarse){:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .tool.pattern-tool{grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);grid-template-rows:auto minmax(0,1fr) auto auto}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .tool.pattern-tool>.canvas{grid-column:1;grid-row:1/-1}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .pattern-seed{grid-column:2;grid-row:1}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .tool.pattern-tool>.tool-panel{grid-column:2;grid-row:2;min-height:0;max-height:none}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .tool.pattern-tool>.pattern-bar{grid-column:2;grid-row:3}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .phone-tabs{grid-column:2;grid-row:4}:root[data-phone-tool][data-phone-tool]:not([data-seed-editing]) .pattern-modes{right:calc(50% + 8px)}:root[data-phone-tool][data-phone-tool] .pattern-mode-buttons>:is(button,a){padding:0 4px}:root[data-phone-tool][data-phone-tool] .pattern-bar :is(.ghost,.primary){padding:0 8px}.pattern-extras-dialog{max-width:640px}.pattern-extras-content{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}