:root {
  --ink:#222823;
  --muted:#737a70;
  --paper:#f7f7f3;
  --surface:#fff;
  --line:#e4e7df;
  --green:#2e5d45;
  --green-dark:#1f4934;
  --lime:#d9eb83;
  --soft-green:#ecf2e7;
  --orange:#e59458;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif;
  --shadow:0 20px 55px rgba(29,48,35,.09)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:14px;
  line-height:1.6
}
button,input {
  font:inherit
}
button {
  color:inherit
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.topbar {
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 clamp(24px,7vw,112px);
  border-bottom:1px solid #e9ebe5;
  background:rgba(247,247,243,.88);
  position:sticky;
  top:0;
  z-index:20;
  backdrop-filter:blur(16px)
}
.brand {
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.04em;
  display:flex;
  align-items:center;
  gap:11px;
  font-size:17px
}
.brand small {
  font-family:"PingFang SC","Hiragino Sans GB",sans-serif;
  font-size:12px;
  letter-spacing:0;
  color:var(--muted);
  font-weight:500;
  margin-left:7px
}
.brand-mark {
  width:30px;
  height:30px;
  background:var(--green);
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:2px;
  transform:rotate(-7deg)
}
.brand-mark i {
  height:13px;
  width:3px;
  border-radius:5px;
  background:var(--lime);
  transform:rotate(15deg)
}
.brand-mark i:nth-child(2) {
  height:19px
}
.brand-mark i:nth-child(3) {
  height:9px
}
.topbar nav {
  display:flex;
  gap:34px;
  margin-left:25px
}
.nav-link {
  text-decoration:none;
  color:#858a82;
  font-size:13px
}
.nav-link.active {
  color:var(--ink);
  font-weight:600
}
.topbar-cta {
  height:38px;
  padding:0 14px;
  border:1px solid #cdd4c7;
  border-radius:7px;
  text-decoration:none;
  color:var(--green);
  display:flex;
  align-items:center;
  gap:14px;
  font-size:12px;
  font-weight:600
}
.topbar-cta span:last-child {
  font-size:16px
}
.hero {
  max-width:1280px;
  margin:auto;
  min-height:458px;
  padding:88px 7vw 74px;
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:64px
}
.eyebrow {
  font:500 10px var(--mono);
  letter-spacing:.12em;
  color:#758075;
  margin:0 0 21px
}
.eyebrow-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:#a7c474;
  border-radius:50%;
  margin:0 8px 1px 0
}
.hero h1 {
  font-size:clamp(40px,5vw,64px);
  line-height:1.16;
  letter-spacing:-.065em;
  font-weight:600;
  margin:0 0 20px
}
.hero h1 em,.section-heading h2 em {
  font-style:normal;
  color:var(--green)
}
.hero-lede {
  color:#656d64;
  max-width:455px;
  line-height:1.9;
  font-size:14px;
  margin:0
}
.hero-link {
  display:inline-flex;
  gap:14px;
  align-items:center;
  margin-top:30px;
  color:var(--green);
  text-decoration:none;
  font-weight:600;
  font-size:12px;
  border-bottom:1px solid #bfcbbb;
  padding-bottom:7px
}
.hero-link span {
  font-size:18px
}
.hero-art {
  height:280px;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center
}
.art-orbit {
  position:absolute;
  border:1px solid #e3e8de;
  border-radius:50%;
  width:300px;
  height:210px;
  transform:rotate(-17deg)
}
.orbit-b {
  width:365px;
  height:250px;
  transform:rotate(24deg);
  border-style:dashed;
  opacity:.65
}
.art-note {
  z-index:1;
  position:absolute;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid #e5e8e1;
  border-radius:10px;
  padding:15px 18px;
  box-shadow:0 12px 35px rgba(40,65,48,.1)
}
.art-note>span {
  font:10px var(--mono);
  color:#8b9289;
  letter-spacing:.06em
}
.note-blur {
  left:6%;
  top:32px;
  transform:rotate(-5deg)
}
.note-blur strong {
  font-size:18px;
  margin-top:7px
}
.note-blur i {
  position:absolute;
  right:12px;
  top:-12px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4d59a;
  color:#715622;
  font-style:normal;
  font-size:12px
}
.note-precise {
  right:3%;
  bottom:33px;
  transform:rotate(3deg);
  border-color:#d7e4d4
}
.note-precise strong {
  font:500 17px var(--mono);
  color:var(--green);
  margin-top:7px
}
.note-precise small {
  font-size:10px;
  color:#788078;
  margin-top:4px
}
.art-arrow {
  z-index:2;
  position:absolute;
  left:47%;
  top:42%;
  font-size:29px;
  color:#a3bc79;
  transform:rotate(-20deg)
}
.art-cursor {
  position:absolute;
  right:20%;
  top:26%;
  font-size:20px;
  color:var(--orange)
}
.art-label {
  position:absolute;
  font:9px var(--mono);
  color:#9ba296;
  letter-spacing:.1em
}
.label-01 {
  left:1%;
  bottom:15%
}
.label-02 {
  right:4%;
  top:14%
}
.lesson-strip {
  background:#edf1e9;
  border-top:1px solid #e5eae1;
  border-bottom:1px solid #e5eae1;
  padding:25px max(7vw,24px);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:34px
}
.lesson-strip>div {
  display:flex;
  align-items:center;
  gap:13px;
  min-width:225px
}
.step-number {
  font:11px var(--mono);
  color:#8da17a;
  border:1px solid #cfdac8;
  border-radius:50%;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  flex:none
}
.lesson-strip p {
  margin:0;
  display:flex;
  flex-direction:column;
  gap:3px
}
.lesson-strip strong {
  font-size:12px;
  font-weight:600
}
.lesson-strip small {
  font-size:10px;
  color:#7d857c
}
.step-connector {
  color:#b7c1b1;
  font-size:17px
}
.library-section {
  max-width:1280px;
  margin:auto;
  padding:100px 7vw 110px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:40px
}
.section-heading .eyebrow {
  margin-bottom:15px
}
.section-heading .eyebrow span {
  color:#b0b6ac
}
.section-heading h2 {
  font-size:40px;
  line-height:1.22;
  letter-spacing:-.055em;
  margin:0;
  font-weight:600
}
.heading-aside {
  color:#777f75;
  font-size:12px;
  line-height:1.9;
  margin:0 0 4px
}
.library-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line)
}
.filter-list {
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.filter-chip {
  border:1px solid transparent;
  background:transparent;
  border-radius:6px;
  padding:8px 11px;
  color:#838b81;
  font-size:11px;
  cursor:pointer;
  transition:.18s
}
.filter-chip span {
  margin-right:6px;
  font-size:13px;
  color:#99a389
}
.filter-chip:hover {
  background:#eef1e9;
  color:var(--ink)
}
.filter-chip.selected {
  background:var(--green);
  color:white
}
.filter-chip.selected span {
  color:var(--lime)
}
.search-box {
  height:37px;
  width:220px;
  border:1px solid #e0e4dc;
  border-radius:6px;
  background:#fff;
  display:flex;
  align-items:center;
  padding:0 10px;
  gap:8px;
  color:#8a9288;
  flex:none
}
.search-box>span:first-child {
  font-size:20px;
  transform:rotate(-20deg)
}
.search-box input {
  border:0;
  outline:0;
  min-width:0;
  width:100%;
  font-size:11px;
  background:transparent;
  color:var(--ink)
}
.search-box input::placeholder {
  color:#a0a69e
}
.search-box kbd {
  font:10px var(--mono);
  color:#a5aba2;
  background:#f4f5f1;
  border:1px solid #e7e9e3;
  border-radius:3px;
  padding:1px 5px
}
.library-layout {
  display:grid;
  grid-template-columns:minmax(240px,.72fr) minmax(0,1.6fr);
  gap:26px;
  padding-top:20px;
  align-items:start
}
.term-list {
  display:flex;
  flex-direction:column;
  gap:5px
}
.term-row {
  width:100%;
  display:grid;
  grid-template-columns:34px 1fr 20px;
  align-items:center;
  gap:10px;
  text-align:left;
  background:transparent;
  border:1px solid transparent;
  border-radius:7px;
  padding:12px 12px;
  cursor:pointer;
  transition:.18s
}
.term-row:hover {
  background:#f0f2ed
}
.term-row.selected {
  background:#edf2e9;
  border-color:#e3eadf
}
.term-index {
  font:10px var(--mono);
  color:#a4aa9f
}
.term-row-copy {
  display:flex;
  flex-direction:column;
  gap:0
}
.term-row-copy strong {
  font-size:12px;
  font-weight:600
}
.term-row-copy small {
  font-size:10px;
  color:#888f86
}
.row-arrow {
  color:#99a294;
  opacity:0;
  font-size:15px
}
.term-row:hover .row-arrow,.term-row.selected .row-arrow {
  opacity:1;
  color:var(--green)
}
.empty-state {
  padding:20px;
  color:#858b82;
  font-size:12px;
  line-height:1.8
}
.term-detail {
  background:var(--surface);
  border:1px solid #e7e9e3;
  border-radius:9px;
  padding:25px 27px 26px;
  min-height:580px;
  box-shadow:0 8px 25px rgba(40,55,42,.025)
}
.detail-topline {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.detail-number {
  font:9px var(--mono);
  letter-spacing:.1em;
  color:#a1a79e
}
.detail-category {
  font-size:10px;
  color:var(--green);
  background:#eef4eb;
  border-radius:20px;
  padding:4px 9px
}
.detail-title-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:18px
}
.detail-title-row h3 {
  margin:0;
  font:500 28px var(--mono);
  letter-spacing:-.06em;
  color:var(--green-dark)
}
.local-name {
  font-size:12px;
  color:#80887d
}
.detail-spark {
  width:37px;
  height:37px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f2f5e9;
  color:#a0b56d;
  font-size:17px
}
.detail-summary {
  font-size:13px;
  line-height:1.8;
  margin:14px 0 17px;
  max-width:620px
}
.detail-facts {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:16px 0;
  border-top:1px solid #eef0eb;
  border-bottom:1px solid #eef0eb
}
.fact-label {
  display:block;
  font:9px var(--mono);
  letter-spacing:.08em;
  color:#8c9687
}
.detail-facts p {
  font-size:11px;
  line-height:1.75;
  color:#727a71;
  margin:7px 0 0
}
.contrast-note {
  display:flex;
  align-items:flex-start;
  gap:9px;
  color:#69776a;
  font-size:10px;
  line-height:1.7;
  margin:12px 0 20px
}
.contrast-note>span:first-child {
  font-size:14px;
  color:#97aa83
}
.demo-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  margin-bottom:9px
}
.demo-heading>div {
  display:flex;
  flex-direction:column;
  gap:3px
}
.demo-heading strong {
  font-size:12px
}
.demo-live {
  font:9px var(--mono);
  letter-spacing:.08em;
  color:#99a298
}
.demo-live i {
  display:inline-block;
  width:5px;
  height:5px;
  background:#91b576;
  border-radius:50%;
  margin:0 5px 1px 0
}
.demo-canvas {
  min-height:180px;
  border-radius:6px;
  border:1px solid #e8ebe4;
  background:#f7f8f4;
  position:relative;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center
}
.fake-page,.drawer-page {
  position:relative;
  width:77%;
  height:145px;
  background:#fff;
  border:1px solid #edf0ea;
  border-radius:5px;
  padding:18px 19px;
  box-shadow:0 5px 15px rgba(37,51,38,.035)
}
.fake-page-bar {
  display:flex;
  gap:3px;
  position:absolute;
  top:9px;
  left:10px
}
.fake-page-bar i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#d6dcd2
}
.fake-avatar {
  width:25px;
  height:25px;
  border-radius:50%;
  background:#e6efdd;
  color:#55724d;
  display:grid;
  place-items:center;
  font-size:10px;
  font-weight:700
}
.fake-page .fake-avatar {
  position:absolute;
  right:15px;
  top:15px
}
.fake-lines {
  margin-top:17px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.fake-lines i {
  height:5px;
  border-radius:5px;
  background:#eef0ec;
  width:71%
}
.fake-lines i:nth-child(2) {
  width:53%
}
.fake-lines i:nth-child(3) {
  width:61%
}
.demo-action {
  position:absolute;
  right:14px;
  bottom:12px;
  border:0;
  background:var(--green);
  color:#fff;
  border-radius:4px;
  padding:6px 9px;
  font-size:9px;
  cursor:pointer
}
.demo-action span {
  padding-left:8px;
  color:#d9eb83
}
.demo-caption {
  position:absolute;
  left:0;
  right:0;
  bottom:3px;
  text-align:center;
  color:#9aa097;
  font-size:9px;
  margin:0
}
.centered-demo {
  background:radial-gradient(ellipse at center,#eef0e9 0, #f8f9f6 65%)
}
.mini-modal {
  z-index:1;
  width:min(280px,76%);
  background:#fff;
  border:1px solid #e8ebe5;
  border-radius:8px;
  padding:17px 19px 14px;
  box-shadow:0 12px 35px rgba(45,58,45,.12);
  display:flex;
  flex-direction:column;
  align-items:flex-start
}
.mini-icon {
  width:24px;
  height:24px;
  border-radius:7px;
  background:#edf3e7;
  display:grid;
  place-items:center;
  color:var(--green);
  font-size:12px;
  margin-bottom:9px
}
.mini-modal>strong {
  font-size:12px
}
.mini-modal>p {
  font-size:9px;
  color:#858d83;
  margin:4px 0 10px
}
.mini-modal input {
  width:100%;
  border:1px solid #e0e5dc;
  border-radius:4px;
  padding:7px;
  font-size:9px;
  color:#636b62;
  background:#fbfcfa
}
.mini-actions {
  display:flex;
  justify-content:flex-end;
  gap:6px;
  width:100%;
  margin-top:10px
}
.mini-actions button {
  border-radius:4px;
  padding:6px 9px;
  font-size:9px;
  cursor:pointer
}
.button-quiet {
  background:#fff;
  border:1px solid #e3e7df;
  color:#626a60
}
.button-primary {
  background:var(--green);
  border:1px solid var(--green);
  color:white
}
.button-danger {
  background:#a64b3c;
  border:1px solid #a64b3c;
  color:white
}
.alert-icon {
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fbefea;
  color:#bb6b4f;
  font-weight:700;
  font-size:12px;
  margin-bottom:10px
}
.drawer-demo {
  justify-content:flex-start;
  padding-left:18px
}
.drawer-page {
  width:58%;
  height:145px;
  padding:21px 14px
}
.drawer-page>strong {
  font-size:11px
}
.order-row {
  display:flex;
  justify-content:space-between;
  border-top:1px solid #f0f1ed;
  padding:8px 0 0;
  margin-top:9px;
  font-size:8px
}
.order-row small {
  color:#929a90;
  font-size:7px
}
.order-row.faded {
  opacity:.45;
  margin-top:7px
}
.drawer-demo .demo-action {
  bottom:15px;
  right:10px
}
.popover-demo {
  flex-direction:column;
  align-items:center;
  padding-top:22px
}
.profile-trigger {
  width:205px;
  border:1px solid #e6e9e2;
  background:#fff;
  border-radius:7px;
  padding:10px;
  display:flex;
  align-items:center;
  gap:9px;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(35,54,40,.04)
}
.profile-trigger>span:nth-child(2) {
  display:flex;
  flex-direction:column;
  flex:1
}
.profile-trigger strong {
  font-size:9px
}
.profile-trigger small {
  font-size:8px;
  color:#92998f
}
.profile-trigger>b {
  font-size:14px;
  color:#899289;
  font-weight:400
}
.popover-card {
  position:absolute;
  z-index:2;
  top:69px;
  width:205px;
  padding:12px;
  background:#fff;
  border:1px solid #e2e7df;
  border-radius:7px;
  box-shadow:0 9px 25px rgba(32,51,38,.12);
  display:flex;
  flex-direction:column
}
.popover-card[hidden] {
  display:none
}
.popover-card>strong {
  font-size:9px
}
.popover-card>small {
  font-size:8px;
  color:#899188;
  margin:1px 0 8px
}
.popover-card>button {
  display:flex;
  justify-content:space-between;
  border:0;
  border-top:1px solid #edf0eb;
  background:none;
  padding:8px 0 0;
  text-align:left;
  color:var(--green);
  font-size:8px;
  cursor:pointer
}
.tooltip-demo {
  flex-direction:column;
  gap:24px
}
.tooltip-target {
  position:relative;
  width:34px;
  height:34px;
  border:1px solid #dfe5db;
  background:#fff;
  border-radius:50%;
  color:var(--green);
  font-size:22px;
  cursor:help
}
.tooltip-bubble {
  position:absolute;
  left:50%;
  bottom:calc(100% + 8px);
  transform:translate(-50%,4px);
  opacity:0;
  pointer-events:none;
  white-space:nowrap;
  background:#27382b;
  color:#fff;
  border-radius:4px;
  padding:5px 8px;
  font:9px var(--sans);
  transition:.16s
}
.tooltip-bubble:after {
  content:"";
  position:absolute;
  left:calc(50% - 4px);
  top:100%;
  border:4px solid transparent;
  border-top-color:#27382b
}
.tooltip-target:hover .tooltip-bubble,.tooltip-target:focus-visible .tooltip-bubble {
  opacity:1;
  transform:translate(-50%,0)
}
.sheet-demo {
  padding:8px
}
.phone-frame {
  position:relative;
  width:112px;
  height:159px;
  background:#fff;
  border:3px solid #303830;
  border-radius:16px;
  box-shadow:0 5px 16px rgba(36,50,37,.14);
  padding:13px 8px 15px
}
.phone-status {
  display:flex;
  justify-content:space-between;
  font-size:5px;
  color:#51594f
}
.phone-content {
  display:flex;
  flex-direction:column;
  margin-top:20px
}
.phone-kicker {
  font:4px var(--mono);
  color:#8c9688
}
.phone-content>strong {
  font-size:9px;
  line-height:1.3;
  margin-top:5px
}
.phone-content p {
  font-size:6px;
  line-height:1.4;
  color:#8b9188;
  margin:4px 0
}
.phone-content .demo-action {
  position:static;
  align-self:flex-start;
  padding:4px 5px;
  font-size:6px;
  margin-top:5px
}
.phone-home {
  position:absolute;
  bottom:4px;
  left:42px;
  width:22px;
  height:2px;
  border-radius:4px;
  background:#aeb4aa
}
.sheet-demo .demo-caption {
  bottom:4px;
  left:auto;
  right:7%;
  width:40%;
  text-align:left;
  line-height:1.6
}
.prompt-card {
  margin-top:13px;
  padding:14px;
  background:#f1f4ec;
  border:1px solid #e7ece2;
  border-radius:6px
}
.prompt-card-head {
  display:flex;
  justify-content:space-between;
  align-items:center
}
.prompt-card-head .fact-label {
  color:#82917c
}
.copy-button {
  border:1px solid #cfdbca;
  background:#fff;
  border-radius:4px;
  color:var(--green);
  font-size:9px;
  padding:5px 8px;
  cursor:pointer
}
.copy-button:hover {
  background:#e7eee1
}
.prompt-card>p {
  font-size:11px;
  line-height:1.85;
  margin:10px 0 12px;
  color:#3d473e
}
.scenario-line {
  display:grid;
  grid-template-columns:60px 1fr;
  gap:8px;
  padding-top:10px;
  border-top:1px solid #dfe7d9;
  font-size:9px;
  line-height:1.7;
  color:#798277
}
.scenario-line span:first-child {
  color:#a2aa9e
}
.detail-empty {
  height:500px;
  display:grid;
  place-content:center;
  text-align:center;
  color:#99a095
}
.detail-empty>span {
  font-size:30px
}
.detail-empty p {
  font-size:12px
}
.toast-region {
  position:fixed;
  z-index:50;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  pointer-events:none
}
.toast-card {
  pointer-events:auto;
  display:flex;
  align-items:center;
  gap:9px;
  background:#253a2c;
  color:#fff;
  border:1px solid #39523f;
  border-radius:7px;
  padding:10px 13px;
  box-shadow:0 10px 28px rgba(25,41,29,.22);
  font-size:11px;
  animation:toast-in .2s ease-out
}
.toast-check {
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#d6e9c2;
  color:#35553d;
  font-size:10px
}
.toast-card button {
  border:0;
  background:transparent;
  color:#d5dfd3;
  font-size:17px;
  cursor:pointer;
  margin-left:10px
}
@keyframes toast-in {
  from {
    opacity:0;
    transform:translateY(9px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
.live-dialog {
  position:fixed;
  inset:0 0 0 auto;
  margin:0 0 0 auto;
  width:min(370px,90vw);
  height:100dvh;
  max-height:100dvh;
  border:0;
  padding:23px;
  background:#fff;
  box-shadow:-15px 0 40px rgba(30,43,32,.18)
}
.live-dialog::backdrop {
  background:rgba(29,39,30,.32);
  backdrop-filter:blur(1px)
}
.live-dialog[open] {
  animation:slide-in .22s ease-out
}
@keyframes slide-in {
  from {
    transform:translateX(30px);
    opacity:.7
  }
  to {
    transform:translateX(0);
    opacity:1
  }
}
.live-dialog-header {
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:23px
}
.live-dialog-header strong {
  font-size:14px;
  flex:1
}
.live-dialog-header button {
  border:0;
  background:#f1f3ee;
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:20px;
  color:#647063;
  cursor:pointer
}
.dialog-subtitle {
  font-size:11px;
  color:#7c847b;
  padding-bottom:17px;
  border-bottom:1px solid #edf0eb
}
.drawer-detail-row {
  display:flex;
  justify-content:space-between;
  padding:13px 0;
  border-bottom:1px solid #edf0eb;
  font-size:11px
}
.drawer-detail-row span {
  color:#818a7f
}
.drawer-detail-row strong {
  font-weight:500
}
.live-sheet {
  inset:auto 0 0;
  width:100%;
  height:auto;
  max-height:70dvh;
  border-radius:18px 18px 0 0;
  padding:8px 24px 32px;
  animation:none
}
.live-sheet[open] {
  animation:sheet-in .22s ease-out
}
@keyframes sheet-in {
  from {
    transform:translateY(50px);
    opacity:.6
  }
  to {
    transform:translateY(0);
    opacity:1
  }
}
.live-sheet .live-dialog-header {
  margin-bottom:3px
}
.sheet-grip {
  display:none
}
.live-sheet .sheet-grip {
  display:block;
  position:absolute;
  top:8px;
  left:calc(50% - 18px);
  width:36px;
  height:4px;
  border-radius:6px;
  background:#d5d9d1
}
.live-sheet .live-dialog-header {
  padding-top:13px
}
.share-options {
  display:flex;
  justify-content:space-around;
  padding:20px 0
}
.share-options button {
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:7px;
  color:var(--green);
  font-size:20px;
  cursor:pointer
}
.share-options button span {
  font-size:9px;
  color:#687267
}
.closing-note {
  background:#eaf0e4;
  padding:50px max(7vw,24px);
  display:flex;
  align-items:center;
  gap:24px
}
.closing-stamp {
  width:43px;
  height:43px;
  display:grid;
  place-items:center;
  border:1px solid #cbd8c3;
  border-radius:50%;
  color:#8da773;
  font-size:19px;
  flex:none
}
.closing-note .eyebrow {
  margin:0 0 7px;
  font-size:9px
}
.closing-note h2 {
  font-size:23px;
  letter-spacing:-.04em;
  margin:0;
  font-weight:600
}
.closing-note p:last-child {
  font-size:11px;
  color:#737d70;
  margin:6px 0 0
}
.closing-note>a {
  margin-left:auto;
  text-decoration:none;
  color:var(--green);
  border:1px solid #c5d4bd;
  border-radius:50%;
  width:34px;
  height:34px;
  display:grid;
  place-items:center
}
.closing-note>a:hover {
  background:#dbe7d4
}
footer {
  height:76px;
  padding:0 7vw;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#838b80
}
footer a {
  text-decoration:none;
  color:var(--ink);
  font:500 12px var(--mono)
}
footer a span {
  color:#9aa195;
  font:10px var(--sans)
}
footer p {
  font-size:10px
}
footer .footer-version {
  font:9px var(--mono);
  letter-spacing:.08em;
  color:#a0a69d
}
@media(max-width:900px) {
  .hero {
    gap:24px;
    padding-top:70px
  }
  .hero-art {
    transform:scale(.9)
  }
  .lesson-strip {
    gap:16px
  }
  .lesson-strip>div {
    min-width:0
  }
  .lesson-strip small {
    max-width:170px
  }
  .library-section {
    padding-top:75px
  }
  .library-layout {
    grid-template-columns:minmax(190px,.7fr) minmax(0,1.5fr);
    gap:15px
  }
  .term-detail {
    padding:20px
  }
  .filter-list {
    gap:2px
  }
  .filter-chip {
    padding:7px 8px
  }
  .heading-aside {
    max-width:260px
  }
}
@media(max-width:680px) {
  .topbar {
    height:64px;
    padding:0 20px
  }
  .topbar nav {
    gap:17px;
    margin:0
  }
  .nav-link {
    font-size:11px
  }
  .brand {
    font-size:15px
  }
  .brand small {
    display:none
  }
  .brand-mark {
    width:27px;
    height:27px
  }
  .topbar-cta {
    height:34px;
    padding:0 10px;
    gap:6px;
    font-size:10px
  }
  .hero {
    display:block;
    padding:62px 24px 34px;
    min-height:0
  }
  .hero h1 {
    font-size:43px
  }
  .hero-lede {
    font-size:13px
  }
  .hero-art {
    height:235px;
    margin-top:17px;
    transform:scale(.9)
  }
  .note-blur {
    left:4%;
    top:23px
  }
  .note-precise {
    right:0;
    bottom:20px
  }
  .art-orbit {
    width:255px;
    height:180px
  }
  .orbit-b {
    width:300px;
    height:215px
  }
  .lesson-strip {
    padding:20px 24px;
    align-items:flex-start;
    gap:12px;
    overflow:auto;
    justify-content:flex-start
  }
  .lesson-strip>div {
    gap:8px;
    min-width:158px;
    align-items:flex-start
  }
  .lesson-strip small {
    font-size:9px;
    max-width:130px
  }
  .lesson-strip strong {
    font-size:10px
  }
  .step-number {
    width:26px;
    height:26px;
    font-size:9px
  }
  .step-connector {
    display:none
  }
  .library-section {
    padding:70px 18px 72px
  }
  .section-heading {
    display:block;
    margin-bottom:25px
  }
  .section-heading h2 {
    font-size:34px
  }
  .heading-aside {
    margin-top:14px;
    font-size:11px
  }
  .library-toolbar {
    align-items:flex-start;
    flex-direction:column
  }
  .filter-list {
    width:100%;
    flex-wrap:nowrap;
    overflow-x:auto;
    padding-bottom:3px
  }
  .filter-chip {
    white-space:nowrap;
    flex:none;
    font-size:10px
  }
  .search-box {
    width:100%
  }
  .library-layout {
    display:flex;
    flex-direction:column;
    padding-top:12px;
    gap:12px
  }
  .term-list {
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px
  }
  .term-row {
    grid-template-columns:25px 1fr 12px;
    gap:6px;
    padding:10px 7px
  }
  .term-index {
    font-size:9px
  }
  .term-row-copy strong {
    font-size:10px
  }
  .term-row-copy small {
    font-size:9px
  }
  .row-arrow {
    font-size:12px
  }
  .term-detail {
    width:100%;
    padding:19px 15px;
    min-height:0
  }
  .detail-title-row h3 {
    font-size:24px
  }
  .detail-facts {
    gap:11px
  }
  .detail-facts p {
    font-size:10px
  }
  .demo-canvas {
    min-height:170px
  }
  .prompt-card {
    padding:12px
  }
  .prompt-card>p {
    font-size:10px
  }
  .closing-note {
    padding:35px 22px;
    gap:14px
  }
  .closing-stamp {
    width:35px;
    height:35px
  }
  .closing-note h2 {
    font-size:20px
  }
  .closing-note p:last-child {
    font-size:10px;
    line-height:1.8
  }
  .closing-note>a {
    flex:none
  }
  footer {
    padding:0 20px;
    height:auto;
    min-height:68px;
    flex-wrap:wrap;
    gap:0 12px
  }
  footer p {
    display:none
  }
  footer .footer-version {
    font-size:8px
  }
}
@media(max-width:390px) {
  .hero h1 {
    font-size:38px
  }
  .hero-art {
    margin-left:-12px;
    margin-right:-12px;
    transform:scale(.83)
  }
  .section-heading h2 {
    font-size:30px
  }
  .term-row {
    grid-template-columns:21px 1fr 10px
  }
  .term-row-copy strong {
    font-size:9px
  }
  .term-detail {
    padding:17px 12px
  }
  .detail-topline {
    gap:6px
  }
  .detail-number {
    font-size:8px
  }
  .detail-facts {
    grid-template-columns:1fr
  }
  .detail-facts>div+div {
    padding-top:8px;
    border-top:1px solid #f0f1ed
  }
  .scenario-line {
    grid-template-columns:48px 1fr
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
}

/* Case-first tutorial framework */
.hidden-section { display:none!important }
.skip-link { position:fixed; z-index:100; top:8px; left:8px; padding:8px 12px; border-radius:5px; background:#fff; color:var(--green); box-shadow:0 4px 15px #24332222; transform:translateY(-150%) }
.skip-link:focus { transform:translateY(0) }
.main-nav .nav-link { border:0; background:transparent; cursor:pointer; }
.main-nav .nav-link { padding:8px 0; }
.nav-count { color:#a2aa9e; font:10px var(--mono); margin-left:3px }
.topbar-cta:hover,.nav-link:hover { color:var(--green-dark) }
.analytics-disclosure { display:block; max-width:760px; margin:10px auto 0; color:#879083; font-size:10px; line-height:1.7 }
.analytics-disclosure a { color:#61775b; text-underline-offset:2px }
.hero-search { display:flex; align-items:center; gap:10px; max-width:530px; height:54px; margin-top:28px; padding:5px 6px 5px 15px; border:1px solid #dfe5dc; border-radius:9px; background:#fff; box-shadow:0 8px 26px rgba(29,48,35,.05); color:#90998d }
.hero-search>span { font-size:19px }
.hero-search input,.case-search input,.pattern-search input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:var(--ink); font-size:13px }
.hero-search input::placeholder,.case-search input::placeholder,.pattern-search input::placeholder { color:#a0a69d }
.hero-search button { height:40px; padding:0 15px; border:0; border-radius:6px; background:var(--green); color:white; cursor:pointer; font-size:12px; font-weight:600 }
.hero-search button:hover { background:var(--green-dark) }
.hero-suggestions { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:13px; color:#8b9388; font-size:11px }
.hero-suggestions button { padding:4px 9px; border:1px solid #e2e6de; border-radius:20px; background:#fff; color:#626c61; cursor:pointer; font-size:11px }
.hero-suggestions button:hover,.filter-chip:hover { border-color:#9fb28e; color:var(--green) }
#app-root { max-width:1120px; min-height:350px; margin:0 auto; padding:40px 0 62px }
.content-section { width:100% }
.section-heading { margin-bottom:22px }
.section-heading h2 { color:var(--ink) }
.section-heading>div>p:last-child { max-width:660px; color:#747d72; font-size:13px; margin:11px 0 0; line-height:1.8 }
.content-count { flex:none; padding:7px 10px; border:1px solid #e2e6de; border-radius:30px; color:#778174; font-size:10px; white-space:nowrap }
.family-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px }
.journey-entry { display:grid; gap:12px; margin:23px 0 10px; padding:17px 18px; border:1px solid #e4e8e0; border-radius:9px; background:#fbfcfa }
.journey-entry h3 { margin:0; color:#465443; font-size:13px; font-weight:600 }
.journey-entry p { margin:4px 0 0; color:#879084; font-size:10px }
.journey-chips { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px }
.journey-chip { display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 10px; border:1px solid #e5e9e2; border-radius:6px; background:#fff; color:#596657; text-align:left; cursor:pointer; font-size:10px }
.journey-chip:hover { border-color:#b6c9aa; background:#f6f9f3 }
.journey-chip small { flex:none; color:#929b8e; font-size:9px }
.family-card { position:relative; display:grid; grid-template-columns:38px 1fr; align-content:start; gap:9px 11px; min-height:155px; padding:15px 14px; text-align:left; border:1px solid #e4e8e0; border-radius:9px; background:#fff; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease }
.family-card:hover,.case-card:hover { transform:translateY(-2px); border-color:#c8d6c0; box-shadow:0 12px 30px rgba(29,48,35,.07) }
.family-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:#edf2e9; color:var(--green); font-size:18px }
.family-card-title { display:flex; flex-direction:column; gap:2px; padding-top:1px }
.family-card-title strong { font-size:13px; font-weight:600 }
.family-card-title small { color:#969d93; font-size:10px }
.family-description,.family-examples { grid-column:1/-1; color:#737d72; font-size:11px; line-height:1.7 }
.family-examples { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-top:7px; border-top:1px solid #f0f1ed; color:#9aa196; font-size:10px }
.family-arrow { position:absolute; top:20px; right:17px; color:#a2ac9b; font-size:14px }
.section-footer,.case-next { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:27px; padding-top:17px; border-top:1px solid var(--line); color:#8a9387; font-size:11px }
.text-link,.back-link { padding:0; border:0; background:none; color:var(--green); cursor:pointer; font:inherit; text-decoration:none }
.text-link:hover,.back-link:hover { text-decoration:underline }
.case-tools { display:grid; gap:11px; margin:17px 0 19px }
.case-search,.pattern-search { display:flex; align-items:center; gap:10px; height:46px; padding:0 13px; border:1px solid #e1e6dd; border-radius:7px; background:#fff; color:#9aa295 }
.case-search>span,.pattern-search>span { font-size:18px }
.case-path-filter { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#788174; font-size:10px }
.case-path-filter select { min-width:min(100%,320px); max-width:100%; padding:9px 30px 9px 11px; border:1px solid #e1e6dd; border-radius:6px; background:#fff; color:#465443; font:inherit }
.family-filters { display:flex; flex-wrap:wrap; gap:7px }
.filter-chip { padding:6px 10px; border:1px solid #e0e5dc; border-radius:20px; background:#fff; color:#727b70; cursor:pointer; font-size:10px }
.filter-chip.selected { border-color:#b6c9aa; background:#edf3e9; color:var(--green); font-weight:600 }
.case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px }
.content-pagination { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; padding:12px 2px 0; border-top:1px solid var(--line); color:#899287; font-size:10px }
.content-pagination>div { display:flex; align-items:center; gap:9px }
.content-pagination button { padding:6px 9px; border:1px solid #dce3d8; border-radius:5px; background:#fff; color:#566450; cursor:pointer; font:inherit }
.content-pagination button:hover:not(:disabled) { border-color:#aebe9f; background:#f3f7ef }
.content-pagination button:disabled { color:#b8bdb5; cursor:not-allowed }
.case-card { position:relative; display:flex; min-height:170px; flex-direction:column; align-items:flex-start; gap:8px; padding:14px 15px; border:1px solid #e4e8e0; border-radius:8px; background:#fff; text-align:left; cursor:pointer; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease }
.case-card-meta { display:flex; width:100%; justify-content:space-between; gap:5px; color:#8c9687; font-size:9px }
.case-card>strong { margin-top:3px; font-size:13px; font-weight:600 }
.case-card-phrase { color:#596657; font-size:12px; line-height:1.6 }
.case-card-patterns { margin-top:auto; padding-top:8px; border-top:1px solid #f0f2ee; color:#98a092; font-size:9px }
.case-card-arrow { position:absolute; right:15px; bottom:16px; color:#788b70 }
.empty-search { grid-column:1/-1; padding:36px; border:1px dashed #d8dfd4; border-radius:8px; text-align:center; color:#7d8779 }
.empty-search p { font-size:12px }
.back-link { margin-bottom:23px; font-size:11px }
.case-intro { position:relative; padding:26px 30px 29px; border-radius:10px; background:#edf2e9 }
.case-family-tag { position:absolute; top:22px; right:24px; color:#667b60; font-size:10px }
.case-intro .eyebrow { margin-bottom:12px; color:#7f8e78 }
.case-intro h2 { max-width:760px; margin:0; font-size:clamp(27px,4vw,38px); line-height:1.3; letter-spacing:-.045em; font-weight:600 }
.case-intro>p:last-child { max-width:750px; margin:13px 0 0; color:#667264; font-size:13px; line-height:1.8 }
.case-context { display:flex; gap:14px; margin:15px 0 34px; padding:12px 15px; border-left:2px solid #c2d1b8; background:#fff; color:#7a8476; font-size:11px }
.case-context strong { flex:none; color:#5e6c59 }
.case-context p { margin:0; line-height:1.7 }
.case-sources { display:grid; gap:8px; margin-top:26px; padding:15px 17px; border:1px solid #e2e8de; border-radius:8px; background:#fbfcfa; color:#566351; font-size:11px }
.case-sources>div { display:flex; flex-wrap:wrap; gap:7px 15px }
.case-sources a { color:var(--green); text-decoration:underline; text-underline-offset:2px }
.case-sources p { margin:0; color:#8a9387; font-size:10px; line-height:1.7 }
.case-decision-layout { display:grid; grid-template-columns:minmax(250px,.82fr) minmax(0,1.18fr); gap:25px; align-items:start }
.decision-questions,.recommendations-column { min-width:0 }
.decision-heading { display:flex; gap:12px; align-items:flex-start; margin:0 0 18px }
.decision-heading .step-number { margin-top:1px }
.decision-heading h3 { margin:0; font-size:15px; font-weight:600 }
.decision-heading p { margin:4px 0 0; color:#838c80; font-size:10px; line-height:1.7 }
.question-block { min-width:0; margin:0; padding:17px 0 0; border:0; border-top:1px solid var(--line) }
.question-block legend { padding:0; color:#485246; font-size:12px; font-weight:600 }
.answer-options { display:grid; gap:8px; margin-top:12px }
.answer-option { display:flex; width:100%; align-items:flex-start; gap:10px; padding:11px; border:1px solid #e3e7e0; border-radius:7px; background:#fff; text-align:left; cursor:pointer }
.answer-option:hover { border-color:#bdcdb5 }
.answer-option.selected { border-color:#91ad83; background:#f1f5ed; box-shadow:0 0 0 1px #91ad83 inset }
.answer-radio { width:15px; height:15px; margin-top:2px; flex:none; border:1px solid #b9c2b5; border-radius:50%; background:#fff }
.answer-option.selected .answer-radio { border:4px solid var(--green) }
.answer-option>span:last-child { display:grid; gap:3px }
.answer-option strong { color:#4f5b4c; font-size:11px; font-weight:600 }
.answer-option small { color:#92998f; font-size:9px; line-height:1.5 }
.reset-answer { margin-top:14px; padding:0; border:0; background:none; color:#889185; cursor:pointer; font-size:10px; text-decoration:underline; text-underline-offset:3px }
.recommendations-column { display:grid; gap:10px }
.results-heading { margin-bottom:7px }
.recommendation-card { padding:16px 17px; border:1px solid #e1e7de; border-radius:8px; background:#fff }
.recommendation-card.recommended { border-color:#c4d5bb; background:linear-gradient(120deg,#fbfdf9,#fff 70%) }
.recommendation-card.pending-recommendation { background:#fff }
.recommendation-label { display:flex; justify-content:space-between; align-items:center; gap:10px; color:#718667; font-size:9px }
.recommendation-label .text-link { font-size:9px }
.pattern-card-title { display:flex; justify-content:space-between; align-items:center; margin-top:12px }
.pattern-card-title h3 { margin:0; font:600 16px var(--mono); letter-spacing:-.035em }
.pattern-card-title>div>span { display:block; margin-top:2px; color:#818a7d; font-size:10px }
.pattern-stamp { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#edf2e9; color:var(--green); font-size:13px }
.pattern-summary,.recommendation-reason { margin:11px 0 0; color:#667064; font-size:11px; line-height:1.75 }
.recommendation-reason { padding:9px 10px; border-radius:5px; background:#f5f7f3; color:#576450 }
.pattern-alternatives,.pattern-combination { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:10px; color:#8c9588; font-size:9px }
.pattern-alternatives strong,.pattern-combination strong { margin-right:2px; font-weight:500 }
.other-conditions { padding:10px 12px; border:1px solid #e5e8e2; border-radius:7px; background:#fafbf9 }
.other-conditions summary { color:#687363; cursor:pointer; font-size:10px }
.other-conditions>div { display:grid; gap:8px; padding-top:12px }
.choose-condition-note { display:flex; gap:12px; align-items:flex-start; margin-top:24px; padding:16px; border:1px dashed #ced9c8; border-radius:8px; color:#75816f }
.choose-condition-note>span { font-size:17px }
.choose-condition-note strong { color:#55634f; font-size:11px }
.choose-condition-note p { margin:4px 0 0; font-size:10px; line-height:1.7 }
.try-pattern { margin-top:38px; padding-top:28px; border-top:1px solid var(--line) }
.demo-panel { overflow:hidden; border:1px solid #e2e7df; border-radius:8px; background:#fff }
.demo-panel-heading { display:flex; justify-content:space-between; align-items:center; padding:12px 15px; border-bottom:1px solid #edf0eb }
.demo-panel-heading>span:first-child { display:grid; gap:2px }
.demo-panel-heading strong { color:#465342; font:600 11px var(--mono) }
.demo-panel-heading small { color:#939b90; font-size:9px }
.demo-live { display:inline-flex; align-items:center; gap:6px; color:#929c8d; font:9px var(--mono); letter-spacing:.06em }
.demo-live i { width:6px; height:6px; border-radius:50%; background:#9abd76 }
.demo-stage { display:grid; align-content:center; gap:9px; min-height:136px; padding:18px; background:linear-gradient(135deg,#f9faf7,#fff) }
.demo-stage[data-lazy-demo="true"][data-demo-loaded="false"] { min-height:136px }
.demo-lazy-placeholder { display:grid; gap:8px; width:min(100%,340px); margin:auto }
.demo-lazy-placeholder span { display:block; height:10px; border-radius:5px; background:linear-gradient(90deg,#edf1e9 25%,#f7f8f5 50%,#edf1e9 75%); background-size:200% 100%; animation:demo-shimmer 1.5s ease-in-out infinite }
.demo-lazy-placeholder span:first-child { width:42%; height:13px }
.demo-lazy-placeholder span:last-child { width:72% }
@keyframes demo-shimmer { to { background-position:-200% 0 } }
.demo-date-input { display:grid; grid-template-columns:repeat(3,minmax(0,88px)); gap:8px; max-width:340px; margin:0; padding:0; border:0; color:#566450; font-size:10px }
.demo-date-input legend { grid-column:1/-1; margin-bottom:2px; font-weight:600 }
.demo-date-input label { display:grid; gap:4px; color:#758070; font-size:9px }
.demo-date-input input { width:100%; min-height:34px; padding:6px 8px; border:1px solid #dce3d8; border-radius:5px; background:#fff; font-size:11px }
.demo-date-range { display:flex; flex-wrap:wrap; gap:10px }
.demo-date-range .demo-control { width:min(100%,210px) }
.demo-character-count { color:#879182; font-size:9px }
.demo-table-scroll { width:100%; overflow-x:auto }
.demo-data-table { width:100%; border-collapse:collapse; color:#566450; font-size:9px; text-align:left }
.demo-data-table caption { padding:0 0 7px; color:#485644; font-size:10px; font-weight:600; text-align:left }
.demo-data-table th,.demo-data-table td { padding:7px 9px; border-bottom:1px solid #e9ede6; white-space:nowrap }
.demo-data-table thead th { background:#f1f4ee; font-weight:600 }
.demo-collection-list,.demo-task-list { display:grid; gap:7px; margin:0; padding:0; list-style:none }
.demo-collection-list li { display:grid; grid-template-columns:1fr auto; gap:4px 10px; padding:9px 10px; border:1px solid #e4e9e0; border-radius:6px; background:#fff; color:#596655; font-size:9px }
.demo-collection-list strong { font-size:10px }
.demo-collection-list span,.demo-collection-list small { color:#879182 }
.demo-collection-list small { grid-column:1/-1 }
.demo-pagination { display:grid; justify-items:center; gap:9px; color:#778273; font-size:9px }
.demo-pagination>div { display:flex; align-items:center; gap:5px }
.demo-pagination button { min-width:28px; height:28px; border:1px solid #dfe5db; border-radius:4px; background:#fff; color:#60705b; font-size:9px }
.demo-pagination button.selected { border-color:#91a984; background:#edf3e9; font-weight:600 }
.demo-pagination button:disabled { color:#b7beb3 }
.demo-step-list { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin:0; padding:0; list-style:none; counter-reset:step }
.demo-step-list li { position:relative; display:grid; justify-items:center; gap:6px; flex:1; color:#8b9487; text-align:center }
.demo-step-list li:not(:last-child)::after { position:absolute; top:13px; left:60%; width:80%; height:1px; background:#dce4d7; content:"" }
.demo-step-list li>span,.demo-task-list li>span:first-child { z-index:1; display:grid; place-items:center; width:27px; height:27px; border:1px solid #dbe2d7; border-radius:50%; background:#fff; font-size:9px }
.demo-step-list li.complete>span,.demo-task-list li>span.complete { border-color:#85a477; background:#edf3e9; color:#46643d }
.demo-step-list li.current>span,.demo-task-list li>span.current { border-color:#66865c; background:#66865c; color:#fff }
.demo-step-list li small { font-size:9px }
.demo-task-list li { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:9px; padding:7px 9px; border:1px solid #e5e9e2; border-radius:6px; background:#fff; color:#596655; font-size:10px }
.demo-task-list li small { color:#879182; font-size:9px }
.demo-breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:8px; color:#83907e; font-size:10px }
.demo-breadcrumb a { color:#54714d; text-decoration:underline }
.demo-status-line { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border:1px solid #e4e9e0; border-radius:6px; background:#fff; color:#53614f; font-size:10px }
.demo-status-tag { padding:4px 8px; border-radius:12px; background:#eef2e8; color:#58744d; font-size:9px; font-weight:600 }
.demo-summary-list { display:grid; margin:0; border-top:1px solid #e3e8df; color:#566450; font-size:9px }
.demo-summary-list>div { display:grid; grid-template-columns:minmax(85px,.7fr) 1.3fr; gap:8px; padding:8px 2px; border-bottom:1px solid #e3e8df }
.demo-summary-list dt { color:#818b7c }
.demo-summary-list dd { display:flex; justify-content:space-between; gap:8px; margin:0; font-weight:600 }
.demo-summary-list button { padding:0; border:0; background:none; color:#58744d; font-size:9px; text-decoration:underline }
.demo-stage button,.demo-stage a,.demo-dialog button { cursor:pointer }
.demo-control { display:grid; gap:6px; max-width:360px; color:#65705f; font-size:10px }
.demo-control input,.demo-control textarea,.demo-control select { width:100%; min-height:37px; padding:8px 10px; border:1px solid #dce3d8; border-radius:5px; background:#fff; color:#354132; outline-color:#94af85; font-size:11px }
.demo-control textarea { resize:vertical }
.demo-control progress { width:100%; height:8px; accent-color:var(--green) }
.demo-button,.demo-dialog-actions button { width:max-content; max-width:100%; padding:8px 12px; border:1px solid #dce3d8; border-radius:5px; background:#fff; color:#51604e; font-size:10px }
.demo-button.primary,.demo-dialog-actions .primary { border-color:var(--green); background:var(--green); color:#fff }
.demo-button.danger,.demo-dialog-actions .danger { border-color:#a95143; background:#a95143; color:#fff }
.demo-options { display:grid; gap:9px; width:max-content; max-width:100%; margin:0; padding:0; border:0; color:#586353; font-size:10px }
.demo-options legend { margin-bottom:7px; font-weight:600 }
.demo-options label { display:flex; align-items:center; gap:8px }
.demo-options small { color:#939a90; margin-left:4px }
.demo-check { display:flex; align-items:center; gap:9px; color:#586353; font-size:11px }
.demo-switch { position:relative; display:flex; max-width:360px; justify-content:space-between; align-items:center; gap:20px; padding:11px 12px; border:1px solid #e2e7df; border-radius:7px; background:#fff }
.demo-switch>span { display:grid; gap:2px }
.demo-switch strong { color:#53604e; font-size:11px }
.demo-switch small { color:#959c92; font-size:9px }
.demo-switch input { position:absolute; z-index:2; right:12px; width:38px; height:22px; opacity:0; cursor:pointer }
.demo-switch i { width:38px; height:22px; flex:none; border-radius:20px; background:#cbd2c7; transition:background .15s }
.demo-switch i::after { content:""; display:block; width:16px; height:16px; margin:3px; border-radius:50%; background:#fff; box-shadow:0 1px 3px #66705f55; transition:transform .15s }
.demo-switch input:checked+i { background:#60815a }
.demo-switch input:checked+i::after { transform:translateX(16px) }
.demo-segment { display:flex; width:max-content; padding:3px; border:1px solid #e3e7e0; border-radius:6px; background:#f0f2ee }
.demo-segment button,.demo-tabs [role=tab] { padding:7px 14px; border:0; border-radius:4px; background:transparent; color:#748071; font-size:10px }
.demo-segment button.selected,.demo-tabs [role=tab].selected { background:#fff; color:#3e5f3b; box-shadow:0 1px 4px #25362218 }
.demo-link { color:#426a42; font-size:11px; text-decoration:underline; text-underline-offset:3px }
.demo-tooltip-trigger { position:relative; width:max-content; padding:8px 12px; border:1px solid #dce3d8; border-radius:5px; background:#fff; color:#52634e; font-size:10px }
.demo-tooltip { position:absolute; z-index:2; left:50%; bottom:calc(100% + 8px); width:max-content; max-width:220px; padding:6px 8px; border-radius:4px; background:#29352b; color:#fff; opacity:0; pointer-events:none; transform:translate(-50%,4px); transition:opacity .12s ease,transform .12s ease; font-size:9px }
.demo-tooltip-trigger:hover .demo-tooltip,.demo-tooltip-trigger:focus-visible .demo-tooltip { opacity:1; transform:translate(-50%,0) }
.demo-result-list { display:grid; max-width:360px; overflow:hidden; border:1px solid #e3e7df; border-radius:6px; background:white }
.demo-result-list button { padding:8px 10px; border:0; border-bottom:1px solid #edf0eb; background:white; color:#63705d; text-align:left; font-size:10px }
.demo-result-list button:hover { background:#f3f6ef }
.demo-status,.demo-banner,.demo-error-summary { display:flex; gap:10px; align-items:center; max-width:500px; padding:12px; border:1px solid #dce8d7; border-radius:6px; background:#f5f8f2; color:#576b50; font-size:10px }
.demo-status>b { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#e1edd9; color:#4c7148 }
.demo-status span { display:grid; gap:2px }
.demo-status small { color:#85917f }
.demo-banner { justify-content:space-between; border-color:#efdfbc; background:#fffaf0; color:#816734 }
.demo-error { margin:-6px 0 0; color:#a74d43; font-size:10px }
.demo-error-summary { display:grid; justify-items:start; border-color:#edcfcb; background:#fff8f7; color:#86483f }
.demo-error-summary button { padding:0; border:0; background:none; color:#954b42; cursor:pointer; text-align:left; font-size:10px; text-decoration:underline }
.demo-tabs { max-width:460px; border:1px solid #e4e8e1; border-radius:6px; background:#fff }
.demo-tabs>div { display:flex; gap:4px; padding:7px; border-bottom:1px solid #ecefea }
.demo-tabs>p { padding:4px 12px 10px; color:#6d7867; font-size:10px }
.demo-accordion { max-width:440px; padding:11px 12px; border:1px solid #e1e6de; border-radius:5px; background:#fff; color:#5b6756; font-size:10px }
.demo-accordion summary { cursor:pointer; font-weight:600 }
.demo-accordion p { margin-bottom:0; color:#7e887a }
.demo-wait { display:flex; align-items:center; gap:10px; color:#71806a; font-size:10px }
.spinner { width:20px; height:20px; border:2px solid #dce5d6; border-top-color:#55784d; border-radius:50%; animation:demo-spin .8s linear infinite }
@keyframes demo-spin { to { transform:rotate(360deg) } }
.demo-skeleton { display:flex; gap:12px; max-width:360px; align-items:center }
.demo-skeleton>i { width:35px; height:35px; border-radius:50%; background:#e8ece5 }
.demo-skeleton>span { display:grid; gap:7px; flex:1 }
.demo-skeleton b { height:8px; border-radius:5px; background:#e8ece5 }
.demo-skeleton b:last-child { width:62% }
.demo-empty { display:grid; justify-items:center; gap:6px; padding:10px; text-align:center }
.demo-empty>span { color:#87a276; font-size:21px }
.demo-empty strong { color:#52614d; font-size:12px }
.demo-empty p { max-width:340px; margin:0 0 4px; color:#8b9487; font-size:10px }
.demo-caption { margin:0; color:#9aa196; font-size:9px }
.demo-floating { position:relative; z-index:2; display:grid; min-width:180px; max-width:260px; margin-top:8px; padding:7px; border:1px solid #e0e5dd; border-radius:7px; background:#fff; box-shadow:0 12px 30px #26352218 }
.demo-floating[hidden] { display:none }
.demo-floating button { padding:8px; border:0; border-radius:4px; background:#fff; color:#5b6757; text-align:left; font-size:10px }
.demo-floating button:hover { background:#f0f4ed }
.demo-floating strong { color:#4f604a; font-size:11px }
.demo-floating small { margin:2px 0 8px; color:#8b9487; font-size:9px }
.demo-dialog { width:min(430px,calc(100vw - 32px)); max-width:none; max-height:85dvh; margin:auto; padding:20px; border:1px solid #e0e5dd; border-radius:10px; background:#fff; color:var(--ink); box-shadow:0 24px 80px #18241a44 }
.demo-dialog::backdrop { background:#17231a66; backdrop-filter:blur(2px) }
.demo-dialog.demo-drawer { position:fixed; inset:0 0 0 auto; width:min(390px,calc(100vw - 20px)); height:100dvh; max-height:none; margin:0; border-radius:12px 0 0 12px }
.demo-dialog.demo-sheet { position:fixed; inset:auto 0 0; width:min(560px,100vw); margin:0 auto; border-radius:16px 16px 0 0 }
.demo-dialog-heading { display:flex; justify-content:space-between; align-items:center; gap:12px }
.demo-dialog-heading h3 { margin:0; color:#465342; font-size:14px }
.demo-dialog-heading button { width:28px; height:28px; border:0; border-radius:50%; background:#f0f2ed; color:#687363 }
.demo-dialog>p { color:#717c6e; font-size:11px; line-height:1.7 }
.demo-dialog-actions { display:flex; justify-content:flex-end; gap:8px; margin-top:15px }
.drawer-info { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:24px; font-size:11px }
.drawer-info span { color:#858e81 }
.drawer-info strong { color:#52614d }
.share-options { display:flex; gap:12px; margin-top:18px }
.share-options button { display:grid; gap:6px; justify-items:center; min-width:72px; padding:12px 8px; border:1px solid #e3e8e0; border-radius:7px; background:#fff; color:#63705d; font-size:16px }
.share-options button span { font-size:9px }
.prompt-builder { margin-top:18px; padding:17px; border:1px solid #dfe6db; border-radius:8px; background:#f7f9f5 }
.prompt-builder-heading { display:flex; justify-content:space-between; gap:12px; align-items:center }
.prompt-builder-heading h3 { margin:4px 0 0; color:#4b5947; font-size:13px }
.fact-label { color:#8c9687; font:9px var(--mono); letter-spacing:.06em }
.copy-button { padding:8px 12px; border:1px solid #52734b; border-radius:5px; background:#52734b; color:white; cursor:pointer; font-size:10px }
.copy-button:hover { background:#3e5f3a }
.prompt-hint { margin:8px 0; color:#90988d; font-size:9px }
.prompt-editor { display:block; width:100%; min-height:128px; resize:vertical; padding:11px; border:1px solid #e0e5dd; border-radius:5px; background:#fff; color:#556050; font:10px/1.8 var(--sans) }
.pattern-search { max-width:520px; margin:20px 0 }
.pattern-search kbd { padding:2px 6px; border:1px solid #e2e6df; border-radius:4px; color:#92998e; font:10px var(--mono) }
.pattern-layout { display:grid; grid-template-columns:minmax(250px,.72fr) minmax(0,1.28fr); min-height:610px; border:1px solid #e3e7e0; border-radius:8px; background:#fff }
.pattern-list { max-height:800px; overflow:auto; padding:7px; border-right:1px solid #e5e9e3 }
.pattern-list>.content-pagination { position:sticky; bottom:0; display:grid; gap:7px; margin-top:8px; padding:9px 3px 4px; background:#fff; box-shadow:0 -5px 10px #fff; }
.pattern-list>.content-pagination>div { justify-content:space-between; gap:5px }
.pattern-row { display:grid; grid-template-columns:29px minmax(0,1fr) 12px; align-items:center; gap:9px; width:100%; padding:10px 9px; border:0; border-radius:5px; background:transparent; text-align:left; cursor:pointer }
.pattern-row:hover { background:#f5f7f3 }
.pattern-row.selected { background:#edf3e9 }
.pattern-row-icon { display:grid; place-items:center; width:27px; height:27px; border-radius:7px; background:#f0f3ed; color:#66815f; font-size:12px }
.pattern-row>span:nth-child(2) { display:grid; gap:2px; min-width:0 }
.pattern-row strong { overflow:hidden; color:#4d594a; font:600 10px var(--mono); text-overflow:ellipsis; white-space:nowrap }
.pattern-row small { color:#929a8e; font-size:9px }
.row-arrow { color:#9ca596; font-size:11px }
.pattern-detail-panel { min-width:0; padding:25px; }
.pattern-detail .detail-topline { display:flex; justify-content:space-between; color:#8c9689; font:9px var(--mono); letter-spacing:.05em }
.detail-category { font-family:var(--sans); letter-spacing:0 }
.pattern-detail .detail-title-row { display:flex; justify-content:space-between; align-items:center; margin-top:22px }
.pattern-detail .detail-title-row h3 { margin:0; color:#354232; font:600 22px var(--mono); letter-spacing:-.04em }
.local-name { display:block; margin-top:5px; color:#808b7c; font-size:11px }
.detail-spark { color:#90a779; font-size:22px }
.detail-summary { color:#606d5d; font-size:12px; line-height:1.8 }
.pattern-detail .detail-facts { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; padding:15px; border:1px solid #edf0eb; border-radius:6px; background:#fafbf9 }
.detail-facts>div+div { padding-left:14px; border-left:1px solid #e5e9e2 }
.detail-facts p { margin:7px 0 0; color:#697465; font-size:10px; line-height:1.7 }
.pattern-sources { display:grid; gap:8px; margin:12px 0 16px; padding:11px 12px; border:1px solid #e7ebe4; border-radius:6px; background:#fbfcfa }
.pattern-sources>strong { color:#62705c; font-size:10px; font-weight:600 }
.pattern-sources p { margin:0; color:#778071; font-size:9px; line-height:1.65 }
.pattern-sources>div { display:flex; flex-wrap:wrap; gap:7px }
.pattern-sources a { color:#687b60; font-size:9px; line-height:1.6; text-decoration:none }
.pattern-sources a:hover { color:#405a3d; text-decoration:underline }
.contrast-note { display:flex; gap:9px; margin:14px 0 20px; padding:10px 12px; background:#f4f6f2; color:#65715e; font-size:10px; line-height:1.7 }
.contrast-note>span:first-child { color:#83a071; font-size:14px }
.demo-heading { display:flex; justify-content:space-between; align-items:center; margin:22px 0 10px }
.demo-heading>div { display:grid; gap:4px }
.demo-heading strong { color:#56624f; font-size:11px }
.pattern-use-cases { display:grid; gap:7px; margin-top:20px }
.related-case { display:flex; justify-content:space-between; gap:12px; padding:9px 10px; border:1px solid #e7ebe4; border-radius:5px; background:#fff; color:#64705e; cursor:pointer; text-align:left; font-size:10px }
.related-case:hover { border-color:#c3d1bc; background:#f8faf6 }
.related-case-pagination { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; color:#899287; font-size:10px }
.related-case-pagination>div { display:flex; gap:7px }
.related-case-pagination button { padding:5px 8px; border:1px solid #dce3d8; border-radius:5px; background:#fff; color:#566450; cursor:pointer; font:inherit }
.related-case-pagination button:disabled { color:#b8bdb5; cursor:not-allowed }
.pattern-detail .prompt-card { margin-top:20px; padding:15px; border:1px solid #e5e9e2; border-radius:6px; background:#f8faf7 }
.pattern-detail .prompt-card-head { display:flex; justify-content:space-between; align-items:center; gap:10px }
.pattern-detail .prompt-card>p { margin:11px 0 0; color:#65705f; font-size:10px; line-height:1.8 }
.detail-empty,.empty-state { padding:24px; color:#899287; font-size:11px; text-align:center }
.detail-empty>span { color:#91a482; font-size:25px }
.toast-region { position:fixed; z-index:50; right:24px; bottom:24px }
.toast-card { display:flex; align-items:center; gap:10px; max-width:min(420px,calc(100vw - 32px)); padding:11px 14px; border:1px solid #dce5d6; border-radius:7px; background:#fff; box-shadow:0 12px 36px #19271822; color:#53654e; font-size:11px }
.toast-check { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#eaf2e5; color:#52734b }
.toast-card button { margin-left:8px; border:0; background:none; color:#879181; cursor:pointer }

/* Everyday-language map: one familiar phrase can point to several patterns. */
.colloquial-entry { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-top:22px; padding:15px 17px; border:1px solid #e2e8dc; border-radius:8px; background:#f8faf6 }
.colloquial-entry h3 { margin:5px 0 4px; color:#465342; font-size:14px }
.colloquial-entry p { margin:0; color:#7b8578; font-size:10px; line-height:1.7 }
.colloquial-chips { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px }
.phrase-chip { padding:7px 10px; border:1px solid #dce5d6; border-radius:20px; background:#fff; color:#5b6b55; cursor:pointer; font-size:10px }
.phrase-chip:hover { border-color:#9db58f; background:#f0f5ec }
.colloquial-note { margin:0 0 13px; padding:9px 12px; border-left:2px solid #99b28b; background:#f6f8f3; color:#727e6e; font-size:10px; line-height:1.7 }
.colloquial-note span { margin-right:7px; color:#4c6944; font-weight:600 }
.colloquial-content .pattern-search { max-width:620px }
.colloquial-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px }
.colloquial-card { position:relative; display:flex; min-height:165px; flex-direction:column; align-items:stretch; gap:8px; padding:13px 14px 15px; border:1px solid #e4e8e0; border-radius:8px; background:#fff; color:inherit; cursor:pointer; text-align:left; transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease }
.colloquial-card:hover { transform:translateY(-2px); border-color:#c8d6c0; box-shadow:0 12px 30px rgba(29,48,35,.07) }
.colloquial-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px }
.colloquial-quote { color:#42513f; font-size:16px; font-weight:600 }
.colloquial-count { flex:none; color:#8b9685; font-size:9px }
.colloquial-card-copy { color:#6e796a; font-size:10px; line-height:1.7 }
.colloquial-aliases { color:#9aa294; font-size:9px; line-height:1.6 }
.colloquial-preview-names { margin-top:auto; padding-top:9px; border-top:1px solid #f0f2ee; color:#70816a; font-size:9px; line-height:1.65 }
.colloquial-card .case-card-arrow { bottom:13px; opacity:.6 }
.colloquial-detail-intro { position:relative; padding:15px 20px; border:1px solid #e1e8dc; border-radius:9px; background:#f3f7ef }
.colloquial-detail-intro h2 { margin:4px 0 7px; color:#394936; font-size:clamp(24px,3vw,32px); letter-spacing:-.04em }
.colloquial-detail-intro>p { max-width:780px; margin:7px 0 0; color:#657160; font-size:10px; line-height:1.6 }
.colloquial-alias-cloud { display:flex; flex-wrap:wrap; gap:6px }
.colloquial-alias-cloud span { padding:3px 7px; border:1px solid #e0e7dc; border-radius:20px; background:#fff; color:#83907c; font-size:9px }
.colloquial-question { display:flex; align-items:flex-start; gap:12px; margin-top:12px; padding:10px 12px; border-radius:6px; background:#fff; color:#596951; font-size:10px; line-height:1.65 }
.colloquial-question span { flex:none; color:#8b9786; font-size:9px }
.colloquial-results-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:15px; margin:20px 0 10px }
.colloquial-results-heading h3 { margin:3px 0; color:#465342; font-size:17px }
.colloquial-results-heading p:last-child { margin:0; color:#849080; font-size:10px; line-height:1.7 }
.colloquial-pattern-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px }
.colloquial-pattern-card { min-width:0; padding:11px; border:1px solid #e3e8e0; border-radius:8px; background:#fff }
.colloquial-pattern-heading { display:flex; align-items:center; gap:8px }
.colloquial-pattern-heading>div { min-width:0; flex:1 }
.colloquial-pattern-number { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#eef3e9; color:#68805f; font:9px var(--mono) }
.colloquial-pattern-heading .fact-label { font-size:8px }
.colloquial-pattern-heading h3 { margin:2px 0; color:#43513f; font-size:13px; line-height:1.4 }
.colloquial-pattern-heading small { color:#9aa294; font-size:9px }
.colloquial-pattern-heading .pattern-stamp { flex:none; color:#809474; font-size:17px }
.colloquial-demo-heading { margin-top:7px; }
.colloquial-demo-stage { min-height:122px; padding:10px; gap:7px; overflow:hidden; }
.colloquial-explanation { margin-top:9px; }
.colloquial-summary { padding:10px 11px; border-left:2px solid #c5d2bd; background:#f7f9f5 }
.colloquial-summary span { color:#819078; font-size:8px; font-weight:600 }
.colloquial-summary p { margin:5px 0 0; color:#596754; font-size:10px; line-height:1.75 }
.colloquial-facts { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:7px; padding:9px; border:1px solid #edf0eb; border-radius:6px; background:#fafbf9 }
.colloquial-facts>div:nth-child(even) { padding-left:11px; border-left:1px solid #e7ebe4 }
.colloquial-facts strong { color:#74806f; font-size:9px; font-weight:600 }
.colloquial-facts p { margin:5px 0 0; color:#687363; font-size:9px; line-height:1.7 }
.colloquial-prompt-preview { margin-top:8px; padding:8px 9px; border-left:2px solid #b9c9ae; background:#f7f9f5 }
.colloquial-prompt-preview>span { color:#819078; font-size:8px; font-weight:600 }
.colloquial-prompt-preview p { margin:5px 0 0; color:#5d6b58; font-size:9px; line-height:1.75 }
.colloquial-demo-heading { display:flex; justify-content:space-between; align-items:center; margin:8px 0 5px; color:#687363; font-size:9px }
.colloquial-demo-stage { border:1px solid #e8ece6; border-radius:6px; background:#fbfcfa }
.colloquial-card-actions { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:8px }
.colloquial-card-actions .text-link { font-size:9px }
.colloquial-related-cases { display:grid; grid-template-columns:minmax(180px,.6fr) minmax(0,1.4fr); gap:15px; align-items:start; margin-top:20px; padding:14px; border:1px solid #e4e8e0; border-radius:8px; background:#fafbf9 }
.colloquial-related-cases h3 { margin:5px 0 0; color:#4b5947; font-size:13px }
.colloquial-related-cases>div:last-child { display:grid; gap:7px }
.colloquial-meaning-note { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr); gap:14px; align-items:center; margin-top:10px; padding:12px; border:1px solid #e3e8e0; border-radius:8px; background:#fafbf9 }
.colloquial-meaning-note>div:first-child p { margin:7px 0 0; color:#687363; font-size:11px; line-height:1.8 }
.colloquial-meaning-note .colloquial-question { margin:0; border:1px solid #edf0eb }
.colloquial-card-details { margin-top:8px; border-top:1px solid #edf0eb; }
.colloquial-card-details summary,.colloquial-meaning-details summary { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:34px; color:#52664c; cursor:pointer; list-style:none; font-size:10px; font-weight:600; }
.colloquial-card-details summary::-webkit-details-marker,.colloquial-meaning-details summary::-webkit-details-marker { display:none }
.colloquial-card-details summary::after,.colloquial-meaning-details summary::after { content:"＋"; color:#84967b; font-size:13px; font-weight:400; }
.colloquial-card-details[open] summary::after,.colloquial-meaning-details[open] summary::after { content:"−" }
.colloquial-card-details summary small,.colloquial-meaning-details summary small { margin-left:auto; color:#9aa294; font-size:8px; font-weight:400; }
.colloquial-card-details summary:focus-visible,.colloquial-meaning-details summary:focus-visible { outline:2px solid #89a77a; outline-offset:2px; border-radius:3px }
.colloquial-meaning-details { margin-top:17px; padding:0 12px; border:1px solid #e3e8e0; border-radius:7px; background:#fafbf9; }
.colloquial-meaning-details summary { min-height:40px; }
.colloquial-meaning-details[open] { padding-bottom:10px }
.pattern-row strong { font-family:var(--sans) }
.pattern-detail .detail-title-row h3 { font-family:var(--sans); font-weight:600; letter-spacing:0 }
.pattern-detail .detail-title-row .local-name { font-size:10px }
.colloquial-card:focus-visible,.phrase-chip:focus-visible,.colloquial-card-actions button:focus-visible,.colloquial-related-cases button:focus-visible { outline:2px solid #89a77a; outline-offset:2px }

@media(max-width:1160px) {
  #app-root { width:calc(100% - 64px) }
  .family-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .journey-chips { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .colloquial-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:980px) {
  .colloquial-pattern-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media(max-width:760px) {
  #app-root { width:calc(100% - 40px) }
  #app-root { padding:34px 0 52px }
  .hero { min-height:0; padding:58px 24px 45px; grid-template-columns:1fr; gap:8px }
  .hero-art { height:225px; margin-top:6px }
  .lesson-strip { flex-wrap:wrap; justify-content:flex-start; padding:20px 24px; gap:15px }
  .lesson-strip>div { width:calc(50% - 20px) }
  .step-connector { display:none }
  .case-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .case-decision-layout { grid-template-columns:1fr; gap:28px }
  .pattern-layout { grid-template-columns:1fr }
  .pattern-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); max-height:360px; border-right:0; border-bottom:1px solid #e5e9e3 }
  .pattern-detail-panel { padding:20px }
  .colloquial-pattern-grid { grid-template-columns:1fr }
  .colloquial-related-cases,.colloquial-meaning-note { grid-template-columns:1fr }
}
@media(max-width:520px) {
  .topbar { padding:0 13px }
  .brand small { display:none }
  .topbar nav { max-width:calc(100vw - 182px); gap:3px; margin-left:8px; overflow-x:auto; scrollbar-width:none }
  .topbar nav::-webkit-scrollbar { display:none }
  .nav-link { flex:none; white-space:nowrap; font-size:9px!important }
  .topbar-cta { width:34px; justify-content:center; padding:0; border:0 }
  .journey-chip { align-items:flex-start; flex-direction:column; gap:4px }
  .topbar-cta span:first-child { display:none }
  .hero { padding-right:19px; padding-left:19px }
  .hero h1 { font-size:38px }
  .hero-lede { font-size:12px }
  .hero-search { height:49px; gap:6px; padding-left:10px }
  .hero-search input { font-size:11px }
  .hero-search button { padding:0 9px; font-size:10px }
  .hero-art { transform:scale(.84); margin-left:-20px; margin-right:-20px }
  .lesson-strip { padding:18px 19px }
  .lesson-strip>div { width:100% }
  #app-root { width:calc(100% - 32px) }
  .section-heading { align-items:flex-start; flex-direction:column; gap:12px; margin-bottom:22px }
  .section-heading h2 { font-size:29px }
  .section-heading>div>p:last-child { font-size:11px }
  .family-grid,.case-grid { grid-template-columns:1fr }
  .colloquial-grid { grid-template-columns:1fr }
  .colloquial-entry { align-items:flex-start; flex-direction:column; gap:13px; padding:16px }
  .colloquial-chips { justify-content:flex-start }
  .colloquial-results-heading { align-items:flex-start; flex-direction:column }
  .colloquial-detail-intro { padding:14px 13px }
  .colloquial-pattern-card { padding:10px }
  .colloquial-facts { gap:9px }
  .family-card { min-height:148px }
  .case-card { min-height:165px }
  .family-filters { flex-wrap:nowrap; overflow:auto; padding-bottom:3px }
  .filter-chip { flex:none }
  .case-intro { padding:22px 18px }
  .case-family-tag { position:static; display:block; margin-bottom:12px }
  .case-intro .eyebrow { margin-bottom:8px }
  .case-intro h2 { font-size:27px }
  .case-context { font-size:10px }
  .pattern-list { grid-template-columns:1fr 1fr; padding:5px }
  .pattern-row { gap:6px; padding:8px 5px }
  .pattern-row-icon { width:23px; height:23px }
  .pattern-row strong { font-size:9px }
  .pattern-row small { font-size:8px }
  .pattern-detail-panel { padding:15px 12px }
  .pattern-detail .detail-facts { grid-template-columns:1fr }
  .detail-facts>div+div { padding:10px 0 0; border-top:1px solid #e5e9e2; border-left:0 }
  .demo-stage { padding:13px 10px }
  .prompt-builder { padding:13px }
  .prompt-builder-heading { align-items:flex-start }
  .prompt-builder-heading .copy-button { padding:7px 8px; font-size:9px }
  .section-footer,.case-next { align-items:flex-start; flex-direction:column }
  .content-pagination { align-items:flex-start; flex-direction:column }
  footer { padding:0 16px }
}
/* Native system fonts keep the field guide fast and usable offline. */
:root {
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB",sans-serif
}
.fake-page-title {
  font-size:10px
}
.danger-trigger {
  background:#a64b3c
}
.live-dialog-header h2 {
  font-size:14px;
  font-weight:600;
  line-height:1.4;
  margin:0;
  flex:1
}
.live-modal,.live-alert {
  inset:0;
  margin:auto;
  width:min(390px,calc(100vw - 36px));
  height:max-content;
  max-height:88dvh;
  border:0;
  border-radius:12px;
  padding:24px;
  box-shadow:0 24px 80px rgba(23,36,25,.22)
}
.live-alert {
  width:min(360px,calc(100vw - 36px))
}
.live-modal[open],.live-alert[open] {
  animation:dialog-in .18s ease-out
}
@keyframes dialog-in {
  from {
    transform:translateY(8px) scale(.985);
    opacity:.6
  }
  to {
    transform:translateY(0) scale(1);
    opacity:1
  }
}
.dialog-field {
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:16px 0;
  color:#687267;
  font-size:11px
}
.dialog-field input {
  width:100%;
  border:1px solid #dfe5dc;
  border-radius:6px;
  padding:10px 11px;
  color:var(--ink);
  outline-color:#91ad7a
}
.dialog-actions {
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px
}
.dialog-actions button {
  border:1px solid #dfe5dc;
  background:#fff;
  border-radius:5px;
  padding:8px 12px;
  font-size:11px;
  cursor:pointer
}
.dialog-actions button.primary {
  border-color:var(--green);
  background:var(--green);
  color:#fff
}
.dialog-actions button.destructive {
  border-color:#a64b3c;
  background:#a64b3c;
  color:#fff
}

/* Content-author help */
.ai-rules { margin:0 0 12px; padding:15px 17px; border:1px solid #dfe7da; border-radius:8px; background:#f7f9f5 }
.ai-rules-heading { margin-bottom:10px }
.ai-rules-heading .fact-label { color:#72816d; font-size:8px }
.ai-rules-heading h3 { margin:4px 0 0; color:#42543d; font-size:14px }
.ai-rules ol { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 22px; margin:0; padding-left:20px; color:#687363; font-size:10px; line-height:1.75 }
.ai-rules li { padding-left:2px }
.ai-rules li strong { color:#4b6145; font-weight:600 }
.ai-rules code,.help-card code { padding:1px 4px; border-radius:3px; background:#f3f5f0; color:#51634b; font:9px var(--mono); overflow-wrap:anywhere }
.help-note { display:flex; flex-direction:column; gap:3px; margin:0 0 12px; padding:12px 14px; border-left:2px solid #99b28b; background:#f6f8f3; color:#657160; font-size:11px }
.help-note strong { color:#4c6944; font-weight:600 }
.help-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
.help-card { min-width:0; padding:15px 16px; border:1px solid #e3e8e0; border-radius:8px; background:#fff }
.help-card-heading { display:flex; align-items:center; gap:10px; margin-bottom:8px }
.help-number { display:grid; width:28px; height:28px; place-items:center; flex:none; border-radius:50%; background:#eef3e9; color:#68805f; font:10px var(--mono) }
.help-card-heading .fact-label { font-size:8px }
.help-card-heading h3 { margin:2px 0 0; color:#43513f; font-size:14px; line-height:1.4 }
.help-card>p { margin:0 0 8px; color:#687363; font-size:10px; line-height:1.75 }
.help-card>p.help-file-path { margin:8px 0 10px; color:#5f6c5a }
.help-card ul { display:grid; gap:5px; margin:9px 0 10px; padding-left:17px; color:#687363; font-size:10px; line-height:1.7 }
.help-details { margin-top:10px; border-top:1px solid #edf0eb; color:#687363; font-size:10px }
.help-details summary { padding:10px 0 0; color:#4e6a48; cursor:pointer; font-weight:600 }
.help-details[open] summary { margin-bottom:7px }
.help-detail-body { padding-bottom:2px }
.help-detail-body ul { margin:6px 0 9px }
.help-file-link { color:var(--green); font-size:10px; font-weight:600; text-decoration:none }
.help-file-link:hover { text-decoration:underline }
.help-relations { margin-top:12px; padding:15px 16px; border:1px solid #e3e8e0; border-radius:8px; background:#fff; color:#687363; font-size:10px; line-height:1.8 }
.help-relations h3 { margin:0 0 6px; color:#4b5947; font-size:13px }
.help-relations p { margin:4px 0 }
.help-references ul { display:grid; gap:5px; margin:7px 0 0; padding-left:18px }
.help-relations a { color:#56784d; text-decoration:underline; text-underline-offset:2px }
.help-relations strong { color:#4b6145 }
.help-workflow { display:grid; grid-template-columns:minmax(190px,.75fr) minmax(0,1.5fr) auto; align-items:center; gap:12px; margin-top:12px; padding:14px; border:1px solid #e3e8e0; border-radius:8px; background:#fafbf9 }
.help-workflow h3 { margin:4px 0 0; color:#4b5947; font-size:13px }
.help-workflow ol { display:grid; gap:4px; margin:0; padding-left:18px; color:#687363; font-size:10px; line-height:1.7 }
.help-contribute-link { white-space:nowrap; text-decoration:none }
.help-footnote { margin:9px 0 0; color:#8a9387; font-size:9px; line-height:1.7 }
@media(max-width:760px) {
  .ai-rules ol { grid-template-columns:1fr }
  .help-grid { grid-template-columns:1fr }
  .help-workflow { grid-template-columns:1fr; gap:8px }
}