.text-style-workspace{gap:1.5rem;padding:clamp(1rem,3vw,1.75rem) clamp(1rem,3vw,1.75rem) clamp(2.25rem,5vw,3.5rem);display:grid}.text-style-controls,.text-style-patterns{gap:1rem;display:grid}.text-style-controls h2,.text-style-patterns h2,.text-style-patterns p{margin:0}.text-style-controls{max-width:58rem}.text-style-basic-grid{grid-template-columns:minmax(12rem,1.5fr) minmax(8rem,.6fr) minmax(12rem,1fr);align-items:start;gap:.875rem;display:grid}.text-style-color-input{grid-template-columns:minmax(7rem,1fr) 3rem;gap:.5rem;display:grid}.text-style-color-input>input[type=color]{border:1px solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);cursor:pointer;width:100%;min-width:2.75rem;height:2rem;padding:.125rem}.text-style-color-input>input[type=color]:focus-visible{outline:2px solid var(--colorStrokeFocus2);outline-offset:2px}.text-style-font-actions{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.text-style-license-note,.text-style-loading,.text-style-order-note,.text-style-compatibility-note{color:var(--colorNeutralForeground2);font-size:var(--fontSizeBase200)}.text-style-error{color:var(--colorPaletteRedForeground1);font-weight:var(--fontWeightSemibold)}.text-style-patterns>header{justify-content:space-between;align-items:start;gap:1rem;display:flex}.text-style-patterns>header>div{gap:.375rem;display:grid}.text-style-patterns>header p{color:var(--colorNeutralForeground2)}.text-style-patterns>header>div{max-width:48rem}.text-style-patterns>header>:last-child{min-width:9rem}.text-style-effect-tabs{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:.5rem;display:grid}.text-style-effect-tab{border:1px solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);min-width:0;min-height:4.25rem;color:var(--colorNeutralForeground1);cursor:pointer;padding:.25rem;overflow:hidden}.text-style-effect-tab:hover{border-color:var(--colorNeutralStroke1Hover);background:var(--colorNeutralBackground1Hover)}.text-style-effect-tab[aria-selected=true]{border-color:var(--colorBrandStroke1);box-shadow:inset 0 0 0 1px var(--colorBrandStroke1);background:var(--colorBrandBackground2)}.text-style-effect-tab:focus-visible{outline:2px solid var(--colorStrokeFocus2);outline-offset:2px}.text-style-pattern{border:1px solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusLarge);background:var(--colorNeutralBackground1);min-width:0;color:var(--colorNeutralForeground1);gap:.875rem;padding:clamp(.875rem,2vw,1.25rem);display:grid;overflow:visible}.text-style-pattern>header{justify-content:space-between;align-items:start;gap:1rem;display:flex}.text-style-pattern>header>div{gap:.25rem;min-width:0;display:grid}.text-style-pattern h3,.text-style-pattern header p{margin:0}.text-style-pattern h3{font-size:var(--fontSizeBase500);line-height:var(--lineHeightBase500)}.text-style-pattern header p{color:var(--colorNeutralForeground2)}.text-style-colorway-list{gap:.875rem;display:grid}.text-style-colorway{border:1px solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusLarge);background:var(--colorNeutralBackground2);align-content:start;gap:.75rem;min-width:0;padding:.875rem;display:grid}.text-style-colorway>header{justify-content:space-between;align-items:start;gap:.75rem;display:flex}.text-style-colorway>header>div{gap:.25rem;min-width:0;display:grid}.text-style-colorway h4,.text-style-colorway header p{margin:0}.text-style-colorway h4{font-size:var(--fontSizeBase400);line-height:var(--lineHeightBase400)}.text-style-colorway header p{font-size:var(--fontSizeBase200)}.text-style-pattern-preview{border-radius:var(--borderRadiusMedium);background:conic-gradient(#d9d9d9 25%, #fff 0 50%, #d9d9d9 0 75%, #fff 0) 0 0 / 1rem 1rem;min-width:0;display:block;overflow:hidden}.text-style-canvas-viewport{width:100%;min-width:0;padding:clamp(1rem,3vw,2rem);overflow:hidden}.text-style-canvas-viewport canvas{max-width:none;display:block}.text-style-canvas-viewport--compact{--text-style-tab-checker-a:#d9d9d9;--text-style-tab-checker-b:#fff;border-radius:calc(var(--borderRadiusMedium) - 2px);background:conic-gradient(var(--text-style-tab-checker-a) 25%, var(--text-style-tab-checker-b) 0 50%, var(--text-style-tab-checker-a) 0 75%, var(--text-style-tab-checker-b) 0) 0 0 / 1rem 1rem;align-items:center;height:3.5rem;padding:.125rem;display:flex}.app-theme[data-color-scheme=dark] .text-style-canvas-viewport--compact{--text-style-tab-checker-a:#3a3a3a;--text-style-tab-checker-b:#242424}.text-style-pattern-settings{gap:.5rem;display:grid}.text-style-pattern-settings dl{grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem;margin:0;display:grid}.text-style-pattern-settings .text-style-setting{border:1px solid var(--colorNeutralStroke3);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground2);gap:.25rem;min-width:0;padding:.75rem;display:grid}.text-style-pattern-settings dt{color:var(--colorNeutralForeground2);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightSemibold)}.text-style-pattern-settings dd{overflow-wrap:anywhere;min-width:0;color:var(--colorNeutralForeground1);font-family:var(--fontFamilyMonospace);font-size:var(--fontSizeBase200);margin:0}.text-style-effect-layer,.text-style-value-tokens{flex-wrap:wrap;align-items:center;gap:.375rem;display:flex}.text-style-effect-layer+.text-style-effect-layer{margin-top:.375rem}.text-style-copy-token{border:1px solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);min-width:0;color:var(--colorNeutralForeground1);font:inherit;cursor:pointer;padding:.25rem .5rem}.text-style-copy-token:hover:not(:disabled){background:var(--colorNeutralBackground1Hover)}.text-style-copy-token:focus-visible{outline:2px solid var(--colorStrokeFocus2);outline-offset:2px}.text-style-copy-token:disabled{cursor:not-allowed;opacity:.5}.text-style-copy-token strong{font-weight:var(--fontWeightSemibold)}@media (width<=920px){.text-style-basic-grid,.text-style-pattern-settings dl{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=560px){.text-style-basic-grid{grid-template-columns:1fr}.text-style-patterns>header,.text-style-font-actions{flex-direction:column;align-items:stretch}.text-style-font-actions>button{width:100%}.text-style-patterns>header>:last-child{min-width:0}.text-style-pattern{padding:.75rem}.text-style-pattern>header{flex-direction:column;align-items:stretch}.text-style-effect-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}.text-style-colorway>header{flex-direction:column;align-items:stretch}.text-style-colorway>header>button,.text-style-pattern>header>button{align-self:start}.text-style-canvas-viewport{padding:.75rem}.text-style-pattern-settings dl{grid-template-columns:1fr}}