:root {
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  color:#1d1d1f;background:#f5f5f7;font-synthesis:none;--blue:#0067d8;
}
* {box-sizing:border-box}
body {margin:0}
[hidden] {display:none!important}
a {color:inherit;text-decoration:none}
button,select,input {font:inherit}
button,a {-webkit-tap-highlight-color:transparent}
button {cursor:pointer}
:focus-visible {outline:3px solid var(--blue);outline-offset:4px}
header {background:rgba(255,255,255,.86);border-bottom:1px solid #e7e7ea;backdrop-filter:blur(20px)}
.nav {max-width:1160px;margin:auto;height:74px;display:flex;align-items:center;justify-content:space-between;padding:0 32px}
.brand {font-size:21px;font-weight:650;letter-spacing:-.8px;display:flex;align-items:center;gap:11px}
.brand svg {width:27px;height:27px;flex-shrink:0}
.brand-wordmark {display:flex;flex-direction:column}
.brand-name {line-height:1.2}
.brand-byline {font-size:9px;font-weight:500;letter-spacing:-.1px;line-height:1.4;margin-top:0}
.header-controls {display:flex;align-items:center;gap:22px}
.nav-note {font-size:14px;color:#727277}
.language {font-size:14px;color:#414146;background:#f5f5f7;border:1px solid #dddde2;border-radius:9px;padding:9px 12px;cursor:pointer}
main {max-width:1160px;margin:auto;padding:56px 32px 64px}
.intro {margin-bottom:34px}
h1 {font-size:clamp(36px,4.7vw,57px);font-weight:650;letter-spacing:-2.6px;line-height:1.08;margin:0 0 17px}
h1 span {color:var(--blue)}
.intro p {color:#6e6e73;font-size:18px;line-height:1.55;max-width:none;margin:0}
.search-area {margin-bottom:24px}
.search-form {display:flex;max-width:620px;background:white;border:1px solid #dddde3;border-radius:14px;align-items:center;padding:0 15px}
.search-form:focus-within {outline:3px solid #0067d830;border-color:var(--blue)}
.search-form svg {width:20px;height:20px;flex-shrink:0;color:#818187}
.search-form input {font-size:16px;background:none;border:0;outline:none;padding:15px 12px;width:100%;min-width:0;color:#1d1d1f}
.search-form input::-webkit-search-cancel-button {-webkit-appearance:none}
.search-form button {border:0;background:none;padding:8px;font-size:20px;color:#666}
.search-summary {font-size:14px;line-height:1.5;color:#77777d;margin:12px 0 0;min-height:21px}
.filters {display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px}
.filter {font-size:14px;padding:10px 16px;border:1px solid #dddde3;border-radius:24px;background:transparent;color:#64646b}
.filter:hover {background:#eeeef2}
.filter[aria-pressed="true"] {color:white;background:#1d1d1f;border-color:#1d1d1f}
.grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:start}
.card {
  height:380px;min-width:0;background:white;border:1px solid #e9e9ec;border-radius:22px;padding:22px;
  display:flex;flex-direction:column;box-shadow:0 3px 9px #1d1d1f03;scroll-margin-top:24px;
  transition:box-shadow .2s,border-color .2s;
}
.card:hover {border-color:#dcdce2;box-shadow:0 8px 24px #1d1d1f08}
.card:target {border-color:#a8bdd9;box-shadow:0 0 0 3px #0067d81a}
.card.expanded,.card.has-fallback {height:auto;min-height:380px}
.card.animating {overflow:hidden}
.card-top {display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-shrink:0}
.symbol {flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--tone);background:var(--tint)}
.symbol svg {width:17px;height:17px}
.category {flex:1;min-width:0;color:#74747a;font-size:12px;line-height:1.4}
.share {display:flex;align-items:center;justify-content:center;gap:5px;flex-shrink:0;width:auto;min-height:28px;padding:4px 5px;border:0;border-radius:7px;background:transparent;color:#74747a;font-size:12px;line-height:1.3;font-weight:400;white-space:nowrap;transition:background .18s,color .18s}
.share svg {width:13px;height:13px;flex-shrink:0}
.share:hover {background:#f5f5f7;color:#414146}
.share.copied {background:#edf8f0;color:#237340}
h2 {font-size:20px;letter-spacing:-.55px;margin:0 0 12px;font-weight:620;line-height:1.3}
.card>h2 {min-height:52px;flex-shrink:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card.expanded>h2 {display:block;overflow:visible}
.card-overview {flex:1;min-height:0;overflow-wrap:anywhere;margin-bottom:12px}
.prompt-summary {font-size:16px;line-height:1.45;color:#414146;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.summary-result {border-top:1px solid #ececef;padding-top:10px}
.label {font-size:11px;font-weight:600;color:var(--tone);letter-spacing:.6px;text-transform:uppercase;margin-bottom:7px;line-height:1.4}
.result-summary {font-size:14px;line-height:1.5;color:#68686e;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.card-details {overflow-wrap:anywhere;margin-bottom:20px}
.prompt-label {font-size:13px;font-weight:600;color:#74747a;margin-bottom:8px}
.prompt {font-size:16px;line-height:1.55;margin:0 0 20px;color:#414146}
.prompt-shorthand {background:#f5f5f7;border-radius:10px;padding:12px;margin:0 0 16px;font-size:16px;font-weight:600;line-height:1.5;color:#414146;overflow-wrap:anywhere}
.image-hint {font-size:13px;line-height:1.5;color:#546d85;margin:0 0 10px}
.result {border-top:1px solid #ececef;padding-top:16px}
.example-context {font-size:13px;line-height:1.5;color:#77777d;margin-bottom:12px}
.example-output {color:#55555d;font-size:15px;line-height:1.6}
.example-output p {margin:0 0 10px}
.example-output p:last-child {margin-bottom:0}
.example-output ul,.example-output ol {padding-left:20px;margin:0}
.example-output li {margin-bottom:6px}
.example-output li:last-child {margin-bottom:0}
.example-output strong {font-weight:600;color:#414146}
.example-output table {width:100%;border-collapse:collapse;font-size:14px;line-height:1.5;table-layout:fixed}
.example-output caption {text-align:left;font-weight:600;margin-bottom:8px}
.example-output th,.example-output td {padding:9px 5px;border-bottom:1px solid #ececef;text-align:left;vertical-align:top;overflow-wrap:anywhere}
.example-output th {font-weight:600}
.card-actions {display:grid;grid-template-columns:1fr 1fr;gap:9px;padding-top:12px;border-top:1px solid #ececef;align-items:stretch;margin-top:auto;flex-shrink:0}
.copy,.details-toggle {width:100%;min-width:0;min-height:66px;border-radius:12px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;font-size:13px;font-weight:600;line-height:1.3;text-align:center;letter-spacing:-.1px;transition:background .18s,border-color .18s}
.copy {background:#f1f1f4;color:#414146;border:1px solid #e2e2e7}
.copy:hover {background:#e8e8ee;border-color:#d5d5dd}
.copy svg {width:18px;height:18px;flex-shrink:0}
.copy.copied {background:#eaf7ee;border-color:#cae7d3;color:#237340}
.details-toggle {background:#f5f5f7;color:#414146;border:1px solid #e9e9ed}
.details-toggle:hover,.details-toggle[aria-expanded="true"] {background:#eeeef2;border-color:#dddde3}
.details-icon {position:relative;flex-shrink:0;width:18px;height:18px;border:1.5px solid currentColor;border-radius:50%;font-size:0;letter-spacing:0}
.details-icon::before,.details-icon::after {content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:currentColor;border-radius:1px}
.details-icon::before {width:8px;height:1.5px}
.details-icon::after {width:1.5px;height:8px}
.details-toggle[aria-expanded="true"] .details-icon::after {display:none}
mark {background:#fff0bd;color:inherit;border-radius:3px;padding:0 1px}
.empty {background:white;padding:40px 24px;border-radius:18px;text-align:center;grid-column:1/-1}
.empty p {color:#6e6e73;margin:0;line-height:1.6}
.reset-filters {font-size:14px;border:0;border-radius:9px;padding:11px 16px;background:#edf4ff;color:var(--blue);margin-top:20px}
.fallback {border:1px solid #d9d9df;border-radius:10px;width:100%;font:inherit;padding:12px;margin-top:12px;resize:vertical;color:#414146;flex-shrink:0}
.note {margin-top:32px;padding:21px 24px;border-radius:16px;background:#eaf0f9;display:flex;align-items:flex-start;gap:13px;color:#495a74;font-size:14px;line-height:1.6}
.note svg {flex-shrink:0;width:20px;height:20px;margin-top:2px}
.note p {margin:0}
.note strong {color:#263c5b}
.site-footer {max-width:1096px;margin:0 auto;padding:24px 0 88px;border-top:1px solid #dddde2;color:#86868b;font-size:12px}
.footer-top,.footer-bottom {display:flex;align-items:center;justify-content:space-between;gap:24px}
.footer-top {padding-bottom:25px}
.footer-top p {margin:0 0 0 auto;text-align:right;font-size:14px}
.footer-legal {padding:18px 0 5px;border-top:1px solid #dddde2;display:flex;justify-content:flex-end}
.footer-legal nav {display:flex;gap:24px;font-size:14px}
.footer-legal a:hover,.footer-bottom a:hover {color:var(--blue)}
.footer-bottom {padding-top:5px;font-size:12px}
.footer-bottom a {font-weight:650}
.legal-page {max-width:860px;padding-top:42px}
.legal-page h1 {font-size:44px;margin:30px 0 42px;letter-spacing:-1.8px;overflow-wrap:anywhere}
.legal-page section {margin-bottom:32px;scroll-margin-top:24px}
.legal-page h2 {font-size:23px;line-height:1.35}
.legal-page p {color:#626269;font-size:16px;line-height:1.75}
.legal-page a {color:var(--blue);overflow-wrap:anywhere}
.legal-page .back {font-size:14px;display:inline-flex;align-items:center;gap:8px;margin-bottom:12px}
.back svg {width:16px;height:16px;flex-shrink:0}
.scroll-top {position:fixed;right:24px;bottom:24px;z-index:20;display:grid;place-items:center;width:48px;height:48px;border:1px solid #dddde2;border-radius:50%;background:rgba(255,255,255,.95);color:#1d1d1f;box-shadow:0 4px 18px #00000012;transition:background .2s,box-shadow .2s}
.scroll-top svg {width:22px;height:22px}
.scroll-top:hover {background:#f0f0f4;box-shadow:0 5px 22px #00000020}
.toast {position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);background:#1d1d1f;color:white;padding:13px 21px;border-radius:13px;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;font-size:14px;box-shadow:0 6px 25px #0002;max-width:90vw;text-align:center;z-index:30}
.toast.show {opacity:1;transform:translateX(-50%) translateY(0)}
.skip {position:absolute;top:-80px;background:white;padding:12px;z-index:40}
.skip:focus {top:12px}
.noscript {padding:16px;font-size:14px;text-align:center}
@media(max-width:900px) {
  .grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer {margin:0 32px}
}
@media(max-width:700px) {
  .header-controls {gap:8px}
  .nav-note {display:none}
  .footer-top {flex-wrap:wrap}
  .footer-bottom {align-items:flex-start;flex-wrap:wrap;gap:8px}
  .legal-page h1 {font-size:36px}
}
@media(max-width:580px) {
  .nav {height:64px;padding:0 20px}
  .brand {font-size:19px}
  .brand svg {width:24px;height:24px}
  .brand-byline {font-size:8px}
  main {padding:36px 20px 38px}
  h1 {letter-spacing:-1.7px}
  .intro p {font-size:17px}
  .intro {margin-bottom:24px}
  .grid {grid-template-columns:1fr;gap:16px}
  .card {padding:20px}
  .filter {padding:9px 13px}
  .filters {gap:7px;margin-bottom:22px}
  .note {padding:18px}
  .site-footer {margin:0 20px;padding-bottom:82px}
  .footer-top {gap:15px}
  .footer-top p {max-width:170px;font-size:13px}
  .footer-legal nav {gap:18px}
  .scroll-top {right:18px;bottom:18px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {transition:none!important;scroll-behavior:auto!important}
}
/* Community suggestion card and form */
.suggestion-card {background:radial-gradient(circle at 100% 0%,#e1dbf0 0,transparent 62%),linear-gradient(145deg,#f1edf8,#eaeef7);border:1px solid #dcd6e9;--tone:#66517e;--tint:#ffffffb3;box-shadow:0 3px 12px #53406808}
.suggestion-card:hover {border-color:#c6b9db;box-shadow:0 8px 24px #53406812}
.suggestion-card .card-top {gap:12px;margin-bottom:18px}
.suggestion-card .symbol {width:44px;height:44px;border-radius:14px;border:1px solid #ffffffd9;box-shadow:0 2px 5px #53406806}
.suggestion-card .symbol svg {width:23px;height:23px}
.suggestion-card .category {font-weight:600;color:#76658a}
.suggestion-card>h2 {color:#342c42;font-size:22px}
.suggestion-card .suggestion-copy {color:#746c80}
.suggestion-card .suggestion-copy p:first-child {color:#50445f}
.suggestion-copy {flex:1;color:#73737b;font-size:15px;line-height:1.6}
.suggestion-copy p {margin:0 0 12px}
.suggestion-copy p:first-child {color:#414146;font-size:16px}
.suggest-action {display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:16px;border:1px solid #dedee4;border-radius:12px;color:#414146;background:#f0f0f4;font-size:14px;font-weight:600;min-height:54px}
.suggest-action:hover {background:#e8e8ee}
.suggestion-card .suggest-action {background:#ffffffbf;border-color:#ffffffeb;color:#50405f;box-shadow:0 2px 8px #53406806;padding:11px 12px 11px 16px;min-height:56px;transition:background .18s,box-shadow .18s}
.suggestion-card .suggest-action>span:last-child {display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:#ebe5f3;color:#69557f;font-size:18px;font-weight:400}
.suggestion-card .suggest-action:hover {background:#fff;box-shadow:0 3px 12px #5340680d}
.suggestion-open {overflow:hidden}
.suggestion-dialog {width:min(540px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:32px;border:1px solid #e8e8ed;border-radius:26px;background:#fff;color:#1d1d1f;box-shadow:0 24px 90px #0003;overflow-y:auto;overscroll-behavior:contain}
.suggestion-dialog::backdrop {background:#1d1d1f55;backdrop-filter:blur(5px)}
.suggest-close {position:absolute;right:18px;top:18px;width:34px;height:34px;background:#f2f2f5;border:0;border-radius:50%;font-size:24px;line-height:1;color:#73737b}
.suggest-heading {padding-right:20px;margin-bottom:25px}
.suggest-eyebrow {font-size:12px;font-weight:600;color:#818189}
.suggest-heading h2 {font-size:30px;letter-spacing:-1px;margin:10px 0}
.suggest-heading p,#suggestion-review>p {font-size:15px;line-height:1.6;color:#73737b;margin:0 0 16px}
.suggest-field {margin-bottom:18px}
.suggest-field label {display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.suggest-field label span {font-size:12px;font-weight:400;color:#86868b;margin-left:5px}
.suggest-field input,.suggest-field textarea,.suggest-field select,.suggest-preview {width:100%;min-width:0;max-width:100%;border:1px solid #dddde4;border-radius:11px;background:#fafafb;color:#414146;font:inherit;font-size:16px;line-height:1.5;padding:11px 12px}
.suggest-field textarea {resize:vertical}
.suggest-field textarea::placeholder {color:#909099;font-size:14px}
.suggest-hint {font-size:12px;line-height:1.5;color:#818189;margin:7px 0 0}
.suggest-notice {font-size:12px;line-height:1.6;color:#818189;margin:4px 0 20px}
.suggest-notice a {text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.suggest-submit {display:block;width:100%;text-align:center;border:1px solid #d6d6df;border-radius:12px;background:#ededf2;color:#414146;padding:14px 12px;font-size:14px;font-weight:600;line-height:1.5}
.suggest-submit:hover {background:#e2e2e9}
#suggestion-review h3 {font-size:22px;letter-spacing:-.5px;margin:0 0 12px}
#suggestion-review .suggest-submit {margin-bottom:20px}
.suggest-preview {font-size:13px;background:#f7f7f9;resize:vertical}
.suggest-review-actions {display:flex;justify-content:space-between;gap:12px;margin-top:12px}
.suggest-review-actions button {font-size:12px;border:0;background:#f1f1f5;color:#62626c;border-radius:8px;padding:10px}
@media(max-width:580px){.suggestion-dialog{padding:26px 20px;border-radius:22px}.suggest-heading h2{font-size:28px}}
.suggest-heading {margin-bottom:20px}
.suggest-heading h2 {font-size:28px;margin:8px 0}
.suggest-heading p {margin-bottom:0}
.suggest-field {margin-bottom:14px}
.suggest-field input,.suggest-field textarea,.suggest-field select {padding:9px 12px}
.suggest-notice {margin-bottom:16px}

.example-figure {margin:14px 0 18px;border:1px solid #e7e7ec;border-radius:13px;overflow:hidden;background:#f7f7f9}
.example-figure img {display:block;width:100%;height:auto;object-fit:contain}
.example-figure figcaption {display:flex;justify-content:center;gap:12px;padding:9px 12px;font-size:11px;color:#77777d;background:#fafafb;line-height:1.4;border-top:1px solid #eeeef2}
.example-figure figcaption span {flex:1;text-align:center}
.example-image-link {display:block;cursor:zoom-in}
.example-figure .example-labels {display:grid;grid-template-columns:repeat(var(--label-columns),minmax(0,1fr));gap:7px 4px}
.example-image-meta {display:flex;justify-content:space-between;gap:8px;padding:9px 12px;font-size:10px;line-height:1.4;color:#818187;background:#fafafb;border-top:1px solid #eeeef2}
.example-image-meta a {color:#68686f;text-decoration:none;white-space:nowrap}
.example-image-meta a:hover {color:#252529;text-decoration:underline}
.example-image-link:focus-visible,.example-image-meta a:focus-visible {outline:2px solid #8a7bb5;outline-offset:-3px}
.image-preview-open {overflow:hidden}
.image-preview {box-sizing:border-box;width:min(1248px,calc(100% - 40px));max-height:calc(100dvh - 40px);margin:auto;padding:18px;border:1px solid #ffffff80;border-radius:22px;background:#fafafc;color:#1d1d1f;box-shadow:0 24px 100px #0005;overflow:auto;overscroll-behavior:contain}
.image-preview::backdrop {background:#111119b3;backdrop-filter:blur(8px)}
.image-preview-heading {display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.image-preview-heading h2 {margin:0;font-size:17px;line-height:1.35;font-weight:600}
.image-preview-close {display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;padding:0;border:1px solid #e5e5ea;border-radius:50%;background:#fff;color:#62626b;cursor:pointer}
.image-preview-close:hover {background:#eeeef2;color:#1d1d1f}
.image-preview-close svg {display:block;width:19px;height:19px}
.image-preview figure {margin:0}
.image-preview img {display:block;width:100%;height:auto;max-height:calc(100dvh - 160px);object-fit:contain;border-radius:12px;background:#fff}
.image-preview figcaption {display:grid;grid-template-columns:repeat(var(--label-columns),minmax(0,1fr));gap:8px;padding:12px 6px 2px;color:#73737b;text-align:center;font-size:12px;line-height:1.4}
.image-preview figcaption[hidden] {display:none}
.image-preview-close:focus-visible {outline:2px solid #8a7bb5;outline-offset:3px}
@media(max-width:580px){.image-preview{width:calc(100% - 20px);max-height:calc(100dvh - 20px);padding:12px;border-radius:16px}.image-preview-heading h2{font-size:15px}.image-preview img{max-height:calc(100dvh - 160px)}}

.library-heading {font-size:20px;line-height:1.4;letter-spacing:-.4px;margin:0 0 14px}
.language-links {display:flex;gap:14px;align-items:center;font-size:13px;color:#727277}
.language-links a:hover {text-decoration:underline}.language-links [aria-current="page"] {color:#1d1d1f;font-weight:600}
.footer-legal {gap:16px;flex-wrap:wrap}.not-found {max-width:800px;padding-top:72px}.not-found .brand {margin-bottom:48px}.not-found .brand small {font-size:11px;letter-spacing:0}.not-found .error-code {color:#77777d;font-size:16px}.not-found>p {line-height:1.6;color:#6e6e73}.not-found>.filter {display:inline-block;margin:16px 0 30px}
