.ass.ass { --ass-accent:#165f65; --ass-ink:#253940; --ass-muted:#60747b; --ass-line:#cdded7; --ass-soft:#edf4ee; display:block; width:100%; max-width:100%; min-width:0; margin:2rem 0; border:1px solid var(--ass-line); border-radius:22px; background:#fff; color:var(--ass-ink); font-family:Arial,Helvetica,sans-serif; font-size:15px; line-height:1.55; overflow:hidden; container:ass / inline-size; }
.ass.ass *, .ass.ass *::before, .ass.ass *::after {box-sizing:border-box;}
.ass.ass [hidden] {display:none !important;}
.ass.ass h2,.ass.ass h3,.ass.ass h4,.ass.ass p {margin:0;color:inherit;}
.ass.ass h2 {font-size:clamp(25px,3vw,35px);line-height:1.22;letter-spacing:-.03em;font-weight:750;}
.ass.ass h3 {font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:700;}
.ass.ass h4 {font-size:16px;line-height:1.35;font-weight:700;}
.ass.ass a {color:var(--ass-accent);text-underline-offset:3px;}
.ass.ass button {min-height:44px;border:1px solid var(--ass-line);border-radius:9px;padding:10px 13px;color:var(--ass-ink);background:#fff;font:inherit;font-size:14px;font-weight:600;line-height:1.35;cursor:pointer;text-transform:none;letter-spacing:normal;white-space:normal;box-shadow:none;}
.ass.ass button:hover {border-color:var(--ass-accent);background:#edf5f0;color:#164f55;}
.ass.ass button:focus-visible,.ass.ass :focus-visible {outline:3px solid #26949a;outline-offset:3px;}
.ass.ass .ass-button.ass-primary,.ass.ass .ass-button.ass-primary:hover {background:var(--ass-accent);color:#fff;border-color:var(--ass-accent);}
.ass.ass .ass-button.ass-primary:hover {background:#104c52;}
.ass.ass .ass-head {display:flex;align-items:center;justify-content:space-between;gap:20px;padding:28px;background:linear-gradient(115deg,#f4f7ee,#e9f3ee);border-bottom:1px solid var(--ass-line);}
.ass.ass .ass-head p {margin-top:12px;color:var(--ass-muted);font-size:14px;}
.ass.ass .ass-head-badge,.ass.ass .ass-badge {display:flex;flex-direction:column;gap:4px;padding:12px 15px;border:1px solid #c0d5cb;border-radius:14px;flex-shrink:0;background:#ffffff90;color:var(--ass-accent);font-size:12px;text-align:center;}
.ass.ass .ass-eyebrow {display:block;margin-bottom:7px;font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--ass-accent);}
.ass.ass .ass-app {padding:24px 28px 0;}
.ass.ass .ass-section-heading {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px;}
.ass.ass .ass-section-heading >span {color:var(--ass-muted);font-size:10px;letter-spacing:.06em;}
.ass.ass .ass-muted {color:var(--ass-muted);font-size:13px;}
.ass.ass .ass-presets {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:17px 0 22px;}
.ass.ass button.ass-preset {display:flex;min-width:0;align-items:flex-start;flex-direction:column;padding:12px;text-align:left;border-radius:13px;}
.ass.ass button.ass-preset[aria-pressed=true] {padding:11px;border:2px solid var(--ass-accent);background:#f1f7f3;}
.ass.ass .ass-swatches {display:flex;width:100%;height:28px;overflow:hidden;border-radius:7px;margin-bottom:9px;box-shadow:0 0 0 1px #00000009;}
.ass.ass .ass-swatches >span {flex:1;}
.ass.ass .ass-preset strong {font-size:13px;}
.ass.ass .ass-preset small {margin-top:3px;color:var(--ass-muted);font-size:10px;line-height:1.45;font-weight:400;overflow-wrap:anywhere;}
.ass.ass .ass-project-bar {display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;padding:16px;border:1px solid var(--ass-line);border-radius:12px;background:#f6f9f5;}
.ass.ass .ass-project-bar strong {font-size:16px;}
.ass.ass .ass-draft-note {font-size:11px;color:var(--ass-muted);margin-top:4px;}
.ass.ass .ass-project-actions {display:flex;flex-wrap:wrap;gap:7px;}
.ass.ass .ass-file {position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);}
.ass.ass .ass-project-status {min-height:20px;margin:9px 0 0;font-size:12px;line-height:1.55;overflow-wrap:anywhere;color:var(--ass-accent);}
.ass.ass .ass-project-status.is-error {color:#9e333c;}
.ass.ass .ass-workspace {display:grid;grid-template-columns:minmax(210px,235px) minmax(0,1fr);gap:16px;margin-top:12px;align-items:start;}
.ass.ass .ass-controls {min-width:0;padding:18px;background:#f5f8f4;border:1px solid var(--ass-line);border-radius:14px;}
.ass.ass .ass-control-heading {display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:14px;}
.ass.ass .ass-mode-label {font-size:10px;color:var(--ass-muted);}
.ass.ass .ass-mode-buttons {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;}
.ass.ass .ass-mode-buttons button,.ass.ass .ass-tabs button {font-size:12px;padding:9px 10px;}
.ass.ass .ass-mode-buttons button[aria-pressed=true],.ass.ass .ass-tabs button[aria-pressed=true],.ass.ass .ass-mode-buttons button[aria-pressed=true]:hover,.ass.ass .ass-tabs button[aria-pressed=true]:hover {background:var(--ass-accent);border-color:var(--ass-accent);color:#fff;}
.ass.ass .ass-small-note {color:var(--ass-muted);font-size:11px;line-height:1.6;margin-top:8px;}
.ass.ass .ass-field-label {display:block;margin:16px 0 5px;font-size:12px;font-weight:600;color:var(--ass-ink);}
.ass.ass .ass-color-row .ass-field-label {margin-top:13px;}
.ass.ass .ass-color-inputs {display:flex;gap:7px;align-items:center;}
.ass.ass .ass-input {display:block;width:100%;min-width:0;min-height:44px;padding:9px 10px;border:1px solid #bbcec6;border-radius:8px;font:inherit;font-size:16px;line-height:1.45;background:#fff;color:var(--ass-ink);box-shadow:none;}
.ass.ass .ass-color-picker {width:46px;height:44px;min-height:44px;flex-shrink:0;border:1px solid #bbcec6;border-radius:8px;padding:4px;background:#fff;cursor:pointer;}
.ass.ass .ass-color-hex {font-family:ui-monospace,Consolas,monospace;font-size:16px;}
.ass.ass .ass-radius {display:block;width:100%;min-height:44px;margin:0;accent-color:var(--ass-accent);}
.ass.ass .ass-radius-output {float:right;color:var(--ass-accent);}
.ass.ass .ass-range-ends {display:flex;justify-content:space-between;color:var(--ass-muted);font-size:10px;}
.ass.ass button.ass-reset {width:100%;margin-top:18px;background:transparent;color:var(--ass-accent);}
.ass.ass .ass-result-panel {min-width:0;border:1px solid var(--ass-line);border-radius:14px;background:#fafcf9;overflow:hidden;}
.ass.ass .ass-tabs {display:flex;flex-wrap:wrap;gap:6px;padding:12px;background:#fff;border-bottom:1px solid var(--ass-line);}
.ass.ass .ass-context-line {padding:13px 14px;background:#f7faf5;border-bottom:1px solid var(--ass-line);}
.ass.ass .ass-context-line label {display:block;margin:0 0 6px;color:var(--ass-muted);font-size:11px;}
.ass.ass .ass-context-line select {font-size:16px;}
.ass.ass .ass-preview {padding:22px 16px;min-height:320px;display:grid;place-items:center;background:var(--ass-demo-background);color:var(--ass-demo-foreground);transition:background-color .1s;}
.ass.ass .ass-demo-card {width:100%;max-width:450px;min-width:0;padding:20px;background:var(--ass-demo-card);border:1px solid var(--ass-demo-border);border-radius:var(--ass-demo-radius);color:var(--ass-demo-card-foreground);box-shadow:0 10px 26px #00000005;}
.ass.ass .ass-demo-card * {overflow-wrap:anywhere;}
.ass.ass .ass-demo-kicker {display:block;font-size:9px;letter-spacing:.1em;font-weight:700;color:var(--ass-demo-muted-foreground);margin-bottom:7px;}
.ass.ass h4.ass-demo-title {font-size:20px;line-height:1.3;font-weight:700;color:var(--ass-demo-card-foreground);}
.ass.ass .ass-demo-muted {color:var(--ass-demo-muted-foreground);font-size:12px;}
.ass.ass .ass-demo-card >p.ass-demo-muted {margin-top:12px;}
.ass.ass .ass-demo-actions {display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 14px;}
.ass.ass button.ass-demo-button {display:inline-flex;align-items:center;justify-content:center;max-width:100%;min-width:0;min-height:44px;padding:10px 13px;border:1px solid var(--ass-demo-primary);border-radius:var(--ass-demo-radius);background:var(--ass-demo-primary);color:var(--ass-demo-primary-foreground);font-size:13px;text-align:center;overflow-wrap:anywhere;}
.ass.ass button.ass-demo-button:hover {background:var(--ass-demo-primary);color:var(--ass-demo-primary-foreground);filter:brightness(.95);border-color:var(--ass-demo-primary);}
.ass.ass button.ass-demo-button:focus-visible {outline-color:var(--ass-demo-ring);}
.ass.ass button.ass-demo-secondary,.ass.ass button.ass-demo-secondary:hover {background:var(--ass-demo-secondary);color:var(--ass-demo-secondary-foreground);border-color:var(--ass-demo-secondary);}
.ass.ass button.ass-demo-outline,.ass.ass button.ass-demo-outline:hover {background:var(--ass-demo-card);color:var(--ass-demo-card-foreground);border-color:var(--ass-demo-border);}
.ass.ass .ass-demo-badges {display:flex;flex-wrap:wrap;gap:7px;}
.ass.ass .ass-demo-badge {display:inline-block;max-width:100%;padding:4px 8px;border-radius:calc(var(--ass-demo-radius) * .7);background:var(--ass-demo-primary);color:var(--ass-demo-primary-foreground);font-size:10px;font-weight:600;line-height:1.5;}
.ass.ass .ass-demo-badge-secondary {background:var(--ass-demo-secondary);color:var(--ass-demo-secondary-foreground);}
.ass.ass .ass-demo-caption {font-size:10px;}
.ass.ass .ass-demo-form {margin-top:17px;}
.ass.ass .ass-demo-label {display:block;font-size:12px;font-weight:600;margin-bottom:6px;color:var(--ass-demo-card-foreground);}
.ass.ass .ass-demo-input {display:block;min-width:0;width:100%;min-height:44px;padding:10px;border:1px solid var(--ass-demo-input);border-radius:var(--ass-demo-radius);background:var(--ass-demo-card);color:var(--ass-demo-card-foreground);font:inherit;font-size:16px;box-shadow:none;}
.ass.ass .ass-demo-input::placeholder {color:var(--ass-demo-muted-foreground);opacity:1;}
.ass.ass .ass-demo-input:focus-visible {outline-color:var(--ass-demo-ring);}
.ass.ass .ass-demo-check {display:flex;align-items:center;gap:8px;margin:13px 0;min-height:44px;font-size:11px;color:var(--ass-demo-card-foreground);}
.ass.ass .ass-demo-check input {width:18px;height:18px;flex-shrink:0;accent-color:var(--ass-demo-primary);}
.ass.ass .ass-demo-price {margin:16px 0;font-size:27px;font-weight:700;line-height:1.2;}
.ass.ass .ass-demo-price span {font-weight:400;}
.ass.ass .ass-demo-card > .ass-demo-badge {margin-top:14px;}
.ass.ass .ass-demo-features {list-style:none;padding:0;margin:16px 0;font-size:12px;line-height:2;color:var(--ass-demo-card-foreground);}
.ass.ass .ass-preview[data-context=pricing] .ass-demo-button {width:100%;}
.ass.ass .ass-demo-total {display:flex;align-items:baseline;gap:9px;margin:17px 0;}
.ass.ass .ass-demo-total strong {font-size:35px;line-height:1.2;color:var(--ass-demo-primary);}
.ass.ass .ass-demo-project-list {list-style:none;padding:0;margin:0 0 16px;}
.ass.ass .ass-demo-project-list li {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:7px 0;padding:11px;border:1px solid var(--ass-demo-border);border-radius:var(--ass-demo-radius);font-size:11px;color:var(--ass-demo-card-foreground);}
.ass.ass .ass-demo-status {min-height:18px;padding:8px 14px;font-size:11px;line-height:1.55;color:var(--ass-accent);}
.ass.ass .ass-contrast {padding:16px;background:#fff;border-top:1px solid var(--ass-line);}
.ass.ass .ass-contrast h4 {font-size:13px;}
.ass.ass .ass-contrast-items {margin-top:10px;}
.ass.ass .ass-contrast-item {display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;padding:6px 0;font-size:11px;}
.ass.ass .ass-contrast-item strong {font-size:11px;}
.ass.ass .is-good {color:#226b45;}
.ass.ass .is-warning {color:#9c4a0e;}
.ass.ass .ass-contrast p {margin-top:10px;color:var(--ass-muted);font-size:10px;line-height:1.6;}
.ass.ass .ass-code-heading {display:flex;flex-wrap:wrap;align-items:start;justify-content:space-between;gap:12px;padding:17px;background:#fff;}
.ass.ass .ass-code-heading p {margin-top:6px;color:var(--ass-muted);font-size:11px;line-height:1.6;}
.ass.ass .ass-code-heading h4 {font-size:14px;}
.ass.ass .ass-code {width:100%;max-width:100%;max-height:650px;overflow:auto;margin:0;border:0;border-radius:0;padding:18px;background:#182d32;color:#e5f3ee;font-family:ui-monospace,Consolas,monospace;font-size:12px;line-height:1.65;tab-size:2;white-space:pre;}
.ass.ass .ass-code code {padding:0;color:inherit;background:transparent;font:inherit;white-space:pre;}
.ass.ass .ass-copy-status {min-height:36px;padding:9px 16px;font-size:12px;color:var(--ass-accent);}
.ass.ass .ass-clipboard-field {position:fixed;left:-10000px;top:0;}
.ass.ass .ass-export {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 25px;padding:20px;border:1px solid #c4d8ce;border-radius:14px;background:#edf5ef;}
.ass.ass .ass-export >div {flex:1;min-width:0;}
.ass.ass .ass-export h3 {font-size:19px;}
.ass.ass .ass-export p {margin-top:8px;font-size:12px;color:var(--ass-muted);}
.ass.ass .ass-check {display:flex;align-items:center;gap:9px;margin-top:13px;font-size:12px;min-height:44px;color:var(--ass-ink);}
.ass.ass .ass-check input {width:18px;height:18px;margin:0;flex-shrink:0;accent-color:var(--ass-accent);}
.ass.ass .ass-export .ass-export-status {color:var(--ass-accent);font-size:12px;font-weight:600;}
.ass.ass .ass-help,.ass.ass .ass-download-project {padding:23px 28px;border-top:1px solid var(--ass-line);background:#f6f9f4;}
.ass.ass .ass-help p,.ass.ass .ass-download-project p {margin:8px 0 14px;color:var(--ass-muted);font-size:12px;}
.ass.ass .ass-footer {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:17px;padding:23px 28px;border-top:1px solid var(--ass-line);background:#f6f9f4;}
.ass.ass .ass-footer > div {flex:1;min-width:180px;}
.ass.ass .ass-footer strong {font-size:15px;}
.ass.ass .ass-footer p {margin-top:8px;color:var(--ass-muted);font-size:12px;line-height:1.6;}
.ass.ass .ass-footer a.btn,.ass.ass .ass-footer a.btn:hover,.ass.ass .ass-footer a.btn:focus {display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;padding:11px 15px;border:1px solid var(--ass-accent);border-radius:9px;background:var(--ass-accent);color:#fff;font:inherit;font-size:13px;font-weight:600;line-height:1.4;text-decoration:none;text-align:center;white-space:normal;box-shadow:none;}
.ass.ass .ass-footer a.btn:hover {background:#104c52;}
.ass.ass .ass-credit {margin:0;padding:17px 28px;border-top:1px solid var(--ass-line);background:#f3f7f2;color:var(--ass-muted);font-size:11px;line-height:1.6;}
@container ass (min-width:1050px) {.ass.ass .ass-presets {grid-template-columns:repeat(6,minmax(0,1fr));}.ass.ass .ass-workspace{grid-template-columns:270px minmax(0,1fr);}}
@container ass (max-width:680px) {.ass.ass .ass-workspace {grid-template-columns:minmax(0,1fr);}.ass.ass .ass-colors {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;}.ass.ass .ass-result-panel {min-height:0;}.ass.ass .ass-controls {padding:18px;}.ass.ass .ass-preview {min-height:290px;}.ass.ass .ass-app {padding:22px 22px 0;}.ass.ass .ass-code {max-height:450px;}.ass.ass .ass-primary-note{margin-top:12px;}}
@container ass (max-width:430px) {.ass.ass .ass-presets{grid-template-columns:repeat(2,minmax(0,1fr));}.ass.ass .ass-app{padding:18px 14px 0;}.ass.ass .ass-head{padding:23px 18px;flex-direction:column;align-items:flex-start;}.ass.ass .ass-head-badge{display:inline-block;padding:8px 12px;}.ass.ass .ass-workspace {gap:14px;}.ass.ass .ass-colors{display:block;}.ass.ass .ass-controls {padding:16px;}.ass.ass .ass-preview{padding:18px 12px;}.ass.ass .ass-demo-card{padding:18px 14px;}.ass.ass .ass-project-actions{width:100%;}.ass.ass .ass-project-actions button{flex:1;font-size:12px;}.ass.ass .ass-export{padding:17px;display:block;}.ass.ass .ass-download{width:100%;margin-top:16px;}.ass.ass .ass-code{font-size:11px;padding:15px;}.ass.ass .ass-help,.ass.ass .ass-credit,.ass.ass .ass-download-project{padding:20px 18px;}}
@media (max-width:680px) {.ass.ass .ass-workspace{grid-template-columns:minmax(0,1fr);}.ass.ass .ass-head{flex-direction:column;align-items:flex-start;}.ass.ass .ass-app{padding:20px 16px 0;}}
@media (max-width:430px) {.ass.ass .ass-presets{grid-template-columns:repeat(2,minmax(0,1fr));}.ass.ass .ass-colors{display:block;}.ass.ass .ass-project-actions button{flex:1;}.ass.ass .ass-export{display:block;}.ass.ass .ass-download{width:100%;margin-top:16px;}}
@media (prefers-reduced-motion:reduce) {.ass.ass .ass-preview{transition:none;}}