.sample-entry{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px;margin-top:8px;font-size:14px;border-radius:10px;color:var(--green);border:1px solid var(--line);background:var(--paper)}.sample-entry .icon{width:17px;height:17px}
.sheet.sample-gallery-sheet{width:1060px;max-height:min(92dvh,calc(var(--visual-height,100dvh) - 32px));max-width:calc(100vw - 40px)}
.sample-gallery-sheet .sheet-head{padding:24px 30px 18px;border-bottom:1px solid var(--line)}.sample-gallery-sheet .sheet-body{padding:24px 30px 30px;min-height:0}.sample-gallery-sheet h3{margin:0;font-size:18px;line-height:1.7}.sample-gallery-sheet p{line-height:1.9}
.sample-welcome{display:flex;gap:24px;align-items:center;justify-content:space-between;padding:22px 24px;margin-bottom:22px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,var(--quiet),var(--paper))}.sample-gallery-sheet .sample-intro{font-size:14px!important;margin:6px 0 0}.sample-welcome-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:130px;padding-inline-start:24px;border-inline-start:1px solid var(--line);color:var(--green)}.sample-welcome-stat strong{font-size:34px;font-weight:650;line-height:1.4}.sample-welcome-stat span{font-size:12px;color:var(--muted);white-space:nowrap}
.sample-filters{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;align-items:end}.sample-filter-label{display:flex;flex-direction:column;gap:7px;font-size:12px;color:var(--muted);min-width:0}.sample-filters input,.sample-filters select{width:100%;min-width:0;font-size:14px!important;min-height:48px;margin:0}.sample-category-select{display:none}.sample-subjects{display:flex;flex-wrap:wrap;gap:7px;margin:18px 0 8px}.sample-subject{border:1px solid var(--line);border-radius:24px;padding:8px 13px;min-height:44px;font-size:12px;line-height:1.6;background:var(--paper);color:var(--muted)}.sample-subject[aria-pressed=true]{background:var(--hover);border-color:var(--green);color:var(--green)}
.sample-results-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0 12px;min-height:36px}.sample-gallery-sheet .sample-result-count{font-size:12px!important;color:var(--muted);margin:0}.sample-clear{font-size:12px;color:var(--green);min-height:44px;padding:8px 4px}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.sample-card{display:flex;flex-direction:column;text-align:start;border:1px solid var(--line);border-radius:18px;padding:0;background:var(--paper);min-width:0;overflow:hidden;transition:transform .18s,border-color .18s,box-shadow .18s;--sample-accent:#26796c}.sample-kind-flow{--sample-accent:#477fa0}.sample-kind-multiflow{--sample-accent:#b17648}.sample-kind-brace{--sample-accent:#8a719c}.sample-kind-tree{--sample-accent:#62825a}.sample-kind-bubble{--sample-accent:#ad7088}.sample-card:hover{transform:translateY(-3px);border-color:var(--green);box-shadow:0 8px 24px var(--shadow)}.sample-card:focus-visible,.sample-subject:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.sample-card-art{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:136px;padding:28px 20px 14px;background:color-mix(in srgb,var(--sample-accent) 7%,var(--quiet));border-bottom:1px solid var(--line)}.sample-card-art .type-preview{width:100%;height:100%;opacity:.92}.sample-topic-count{position:absolute;inset-inline-end:12px;top:10px;font-size:10px;color:var(--muted)}.sample-card-content{display:flex;flex:1;flex-direction:column;gap:8px;padding:16px 17px 14px;min-width:0}.sample-card-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 8px;font-size:10px;line-height:1.7}.sample-gallery-sheet .sample-kind{display:inline-flex;align-items:center;color:var(--green);font-size:11px!important;font-weight:550;line-height:1.8!important}.sample-category{color:var(--muted);font-size:10px}.sample-featured{font-size:10px;padding:0 6px;background:var(--hover);color:var(--green);border-radius:5px;margin-inline-start:auto}.sample-gallery-sheet .sample-card strong{font-size:16px;line-height:1.8;margin:0;font-weight:650}.sample-gallery-sheet .sample-card-description{display:block;color:var(--muted);font-size:12px!important;line-height:1.9!important}.sample-branch-glimpse{display:block;font-size:11px;line-height:1.8;color:var(--muted);padding-top:8px;border-top:1px solid var(--line);margin-top:auto}.sample-card-open{display:block;font-size:12px;color:var(--green);padding-top:3px}.sample-load-more{display:block;max-width:360px;margin:24px auto 0;min-height:48px}.sample-empty{grid-column:1/-1;text-align:center;border:1px dashed var(--line);border-radius:16px;padding:36px 20px;background:var(--quiet)}.sample-empty strong{font-size:16px}.sample-empty .secondary-action{width:auto;min-height:44px;margin-top:8px}
.sample-preview-meta{display:flex;gap:8px 18px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:12px}.sample-preview-sheet .sample-kind{font-size:13px!important}.sample-gallery-sheet .sample-preview-description{font-size:16px!important;color:var(--ink);margin:12px 0 20px}.sample-purpose{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:var(--quiet);border:1px solid var(--line);border-radius:16px;padding:20px}.sample-purpose h3{font-size:14px}.sample-purpose p{font-size:13px!important;margin:6px 0 0}.sample-hero{margin-top:24px;border:1px solid var(--line);border-radius:16px;padding:20px;background:var(--quiet)}.sample-hero .type-preview{width:100%;height:300px!important;display:block}.sample-gallery-sheet .sample-diagram-caption{font-size:11px!important;text-align:center;margin:8px 0 24px}.sample-outline{margin-top:20px}.sample-outline h3{font-size:18px}.sample-gallery-sheet .sample-root-note{font-size:13px!important;margin:6px 0 14px}.sample-branch{border:1px solid var(--line);border-radius:12px;background:var(--paper);margin:8px 0;padding:0 16px}.sample-branch[open]{background:var(--quiet)}.sample-branch summary{padding:12px 0;cursor:pointer;font-size:14px;color:var(--ink);min-height:48px;line-height:1.9;font-weight:550;overflow-wrap:anywhere}.sample-branch summary::marker{color:var(--green)}.sample-branch p{font-size:13px!important;margin:0 0 12px!important}.sample-branch ul{padding-inline-start:20px;margin:0 0 16px}.sample-branch li{font-size:14px;line-height:1.9;margin-top:10px;overflow-wrap:anywhere}.sample-branch li p{margin:4px 0 0!important}.sample-sources{font-size:12px;border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.sample-sources summary{cursor:pointer;min-height:44px;padding:8px 0;color:var(--green)}.sample-sources p,.sample-sources a{font-size:12px!important}.sample-sources a{display:block;color:var(--green);margin:12px 0 4px;text-decoration:underline;line-height:1.9}.sample-footer{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px 12px}.sample-footer .primary-action,.sample-footer .secondary-action{width:100%;min-height:48px;margin:0}.sample-footer .sample-copy-note{grid-column:1/-1;font-size:12px!important;margin:0 0 4px;color:var(--muted);line-height:1.7!important}.sample-more{width:100%;display:block;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:14px;color:var(--green);margin:12px 0;min-height:44px}
@media(max-width:900px){.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.sample-gallery-sheet .sheet-body{padding:20px}.sample-gallery-sheet .sheet-head{padding:20px}.sample-subjects{gap:6px}.sample-subject{padding-inline:11px}.sample-welcome{padding:18px}.sample-welcome-stat{min-width:112px;padding-inline-start:16px}.sample-hero .type-preview{height:250px!important}}
@media(max-width:600px),(max-width:1000px) and (max-height:500px){.sheet.sample-gallery-sheet{max-width:calc(100vw - 20px);max-height:calc(var(--visual-height,100dvh) - 20px);border-radius:20px}.sample-gallery-sheet .sheet-head{padding:16px 18px 12px}.sample-gallery-sheet .sheet-body{padding:16px 16px 20px}.sample-gallery-sheet h3{font-size:16px}.sample-welcome{padding:15px;margin-bottom:16px;gap:12px}.sample-gallery-sheet .sample-intro{font-size:12px!important;line-height:1.9;margin-top:5px}.sample-welcome-stat{display:none}.sample-filters{grid-template-columns:1fr 1fr;gap:10px}.sample-filters>label:first-child{grid-column:1/-1}.sample-filter-label{font-size:11px;gap:5px}.sample-filters input,.sample-filters select{min-height:46px;font-size:13px!important;padding-inline:10px}.sample-category-select{display:flex}.sample-subjects{display:none}.sample-results-head{margin:14px 0 10px;gap:8px}.sample-gallery-sheet .sample-result-count{font-size:11px!important}.sample-clear{font-size:11px}.sample-grid{grid-template-columns:1fr;gap:14px}.sample-card{border-radius:14px}.sample-card-art{height:112px;padding:25px 18px 12px}.sample-card-content{padding:14px 15px;gap:7px}.sample-gallery-sheet .sample-card strong{font-size:16px}.sample-card-meta{gap:5px 10px}.sample-gallery-sheet .sample-card-description{font-size:13px!important}.sample-branch-glimpse{font-size:11px}.sample-card-open{font-size:12px}.sample-purpose{grid-template-columns:1fr;gap:16px;padding:16px}.sample-purpose h3{font-size:14px}.sample-purpose p{font-size:13px!important}.sample-gallery-sheet .sample-preview-description{font-size:14px!important;margin-bottom:16px}.sample-hero{padding:10px;margin-top:18px}.sample-hero .type-preview{height:190px!important}.sample-gallery-sheet .sample-diagram-caption{font-size:11px!important;margin-bottom:18px}.sample-branch{padding-inline:12px}.sample-branch summary{font-size:14px}.sample-footer{grid-template-columns:1fr;padding:12px 16px}.sample-footer .sample-copy-note{font-size:11px!important}.sample-footer .primary-action{font-size:14px}.sample-footer .secondary-action{border:0;min-height:44px;padding:7px;font-size:12px}.sample-preview-meta{gap:6px 12px;font-size:11px}.sample-load-more{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.sample-card{transition:none}.sample-card:hover{transform:none}}
/* Keep a sample title visible on short phones before the first scroll. */
@media(max-width:600px){.sample-welcome{padding:0;border:0;background:none;margin-bottom:14px}.sample-welcome h3{display:none}.sample-gallery-sheet .sample-intro{margin:0;font-size:12px!important}.sample-card-art{height:90px}.sample-results-head{margin-top:8px}}