/* Shared visual language. Keep the compact embedded tutorial layout intact. */
body.md {
  --fg: #203b31; --fg-muted: #68766d; --bg: #f8f9f5; --bg-soft: #f0f3ed;
  --surface: #fff; --border: #dfe6dd; --accent: #246549; --accent-dk: #174b35;
  --accent-soft: #e4efdb; --link: #246549;
  background: var(--bg);
}
html { scroll-behavior: smooth; scroll-padding-top: 155px; }
body.md :is(a, button, input, select):focus-visible { outline: 3px solid #4a8b62; outline-offset: 4px; }
.idxHead { background: #fff; }
.idxHeadInner, .idxMenuInner, .idxToolsInner, .idxBody, .siteFooterInner { max-width: 1160px; }
.idxHeadInner { padding-top: 22px; padding-bottom: 20px; }
.idxHeadMain { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.idxBrand { margin: 0; }
.idxHead p { font-size: 13px; letter-spacing: .04em; }
.idxMenu { background: #fff; }
.idxMenuInner { padding-top: 9px; padding-bottom: 9px; }
.idxMenuLink { border-radius: 6px; padding-inline: 16px; }
.idxMenuLink.is-here { background: #edf3e7; }
.learnHero { max-width: 1160px; margin: 0 auto; padding: 60px 20px 54px; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 48px; }
.heroEyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .16em; color: var(--accent); }
.heroEyebrow i { width: 7px; height: 7px; background: #6a9050; border-radius: 50%; box-shadow: 0 0 0 4px #e6eddf; }
.heroCopy h2 { font-size: clamp(34px, 4vw, 53px); font-weight: 750; line-height: 1.3; letter-spacing: -.04em; margin: 23px 0 20px; }
.heroCopy h2 span { color: #337653; position: relative; }
.heroCopy h2 span::after { content: ''; position: absolute; height: 8px; background: #dcebbd; bottom: 0; left: 0; right: 0; z-index: -1; transform: rotate(-1deg); }
.heroCopy > p { font-size: 15px; color: var(--fg-muted); line-height: 1.9; }
.heroActions { display: flex; gap: 23px; align-items: center; margin: 28px 0; }
.heroPrimary, .heroSecondary { font-size: 13px; font-weight: 650; text-decoration: none; display: inline-flex; align-items: center; gap: 20px; transition: transform .2s, box-shadow .2s; }
.heroPrimary { padding: 13px 21px; color: #fff; background: #245d43; border-radius: 9px; box-shadow: 0 5px 12px #245d4314; }
.heroPrimary:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 9px 20px #245d4330; text-decoration: none; }
.heroSecondary { color: var(--fg); }
.heroSecondary:hover { color: var(--accent); text-decoration: none; transform: translateY(-2px); }
.heroStats { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; font-size: 11px; color: var(--fg-muted); }
.heroStats span + span { border-left: 1px solid #d8dfd3; padding-left: 18px; }
.heroStats b { color: var(--fg); font-size: 18px; font-weight: 650; padding-right: 3px; }
.heroStudio { position: relative; height: 355px; border: 1px solid #dce5d2; border-radius: 24px; background-color: #ecf1e3; background-image: radial-gradient(#b9c8ae 1px, transparent 1px); background-size: 18px 18px; isolation: isolate; }
.studioLabel { position: absolute; left: 24px; right: 24px; top: 19px; display: flex; justify-content: space-between; font-size: 10px; font-weight: 650; color: #5c7654; letter-spacing: .05em; }
.studioLabel span:last-child { font-size: 8px; letter-spacing: .13em; }
.studioOrbit { position: absolute; width: 265px; height: 265px; border: 1px solid #cbd9bd; border-radius: 50%; left: 50%; top: 48%; transform: translate(-50%, -50%); box-shadow: 0 0 0 30px #eef3e750; }
.studioPhone { position: absolute; right: 52px; top: 54px; width: 150px; height: 253px; border: 5px solid #304a3c; border-radius: 25px; background: #fcfcf6; box-shadow: 12px 18px 24px #34523a22, inset 0 0 0 2px #fff; transform: rotate(9deg); }
.phoneCamera { width: 45px; height: 10px; background: #304a3c; border-radius: 0 0 9px 9px; margin: 0 auto; }
.phoneScreen { padding: 15px 10px; text-align: center; }
.phoneScreen > span { font-size: 8px; color: #6b7d68; }
.phoneFlower { font-size: 75px; line-height: 1.1; color: #759658; margin: 9px 0; animation: flowerTurn 18s linear infinite; }
.phoneScreen b { display: block; font-size: 16px; }
.phoneScreen small { display: block; font-size: 8px; margin-top: 5px; color: #7c8974; }
.phoneButton { background: #dce9bb; margin-top: 16px; padding: 7px; border-radius: 7px; font-size: 9px; font-weight: 650; }
.phoneHome { width: 40px; height: 3px; background: #304a3c; border-radius: 4px; margin: 1px auto; }
.studioBlocks { position: absolute; left: 22px; top: 118px; transform: rotate(-7deg); animation: blockFloat 6s ease-in-out infinite; filter: drop-shadow(0 9px 8px #3c4d3020); }
.codeBlock { position: relative; font-size: 11px; padding: 12px 15px; border-radius: 7px; width: max-content; color: white; font-weight: 500; }
.codeBlock::after { content: ''; position: absolute; bottom: -5px; left: 18px; width: 22px; height: 8px; background: inherit; border-radius: 0 0 3px 3px; }
.codeBlock b { margin: 0 5px; background: #ffffff24; padding: 3px 5px; border-radius: 3px; font-weight: 500; }
.eventBlock { background: #b48a40; z-index: 3; }
.actionBlock { background: #55845e; margin-left: 13px; z-index: 2; }
.textBlock { background: #bd7461; margin-left: 28px; }
.studioNote { position: absolute; left: 25px; bottom: 44px; background: #fffdf4; border: 1px solid #e4e4ce; padding: 8px 13px; border-radius: 8px; font-size: 11px; transform: rotate(-4deg); box-shadow: 0 4px 10px #354d3010; }
.studioNote span { color: #b58d42; margin-right: 7px; }
.studioSpark { position: absolute; right: 21px; top: 50px; color: #94ac66; font-size: 31px; }
.studioCaption { position: absolute; bottom: 15px; right: 22px; font-size: 8px; letter-spacing: .12em; color: #69815c; }
.catalogIntro { max-width: 1160px; padding: 25px 20px 23px; margin: auto; display: flex; align-items: end; justify-content: space-between; gap: 20px; border-top: 1px solid var(--border); }
.catalogIntro h2 { margin: 5px 0 0; font-size: 24px; letter-spacing: -.03em; }
.catalogIntro p { margin: 0 0 4px; font-size: 12px; color: var(--fg-muted); }
.idxTools { background: #f8f9f5ed; backdrop-filter: blur(18px); }
.idxToolsInner { gap: 14px; padding-block: 16px; }
.catalogSearch { display: flex; flex: 1; align-items: center; gap: 10px; padding: 0 14px; background: #fff; border: 1px solid var(--border); border-radius: 9px; min-width: 0; transition: box-shadow .2s, border-color .2s; }
.catalogSearch:focus-within { border-color: #6a966f; box-shadow: 0 0 0 4px #4a805513; }
.catalogSearch svg { width: 19px; height: 19px; flex: none; color: #7b887b; }
.catalogSearch .idxSearch { background: transparent; border: 0; padding: 11px 0; font-size: 13px; outline: none; box-shadow: none; }
.catalogSearch .idxSearch:focus-visible { outline: none; }
.catalogSearch kbd { border: 1px solid var(--border); border-radius: 4px; padding: 0 7px; font-size: 11px; color: #879082; }
.catalogLevel { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--fg-muted); }
.catalogLevel select { font: inherit; color: var(--fg); background: #fff; padding: 11px 28px 11px 12px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; }
.idxFilters { gap: 7px; max-height: 34px; }
.idxChip { background: transparent; border-color: transparent; padding: 5px 13px; }
.idxChip:hover { background: #eaf0e3; border-color: transparent; }
.idxChip.on { background: #284f3b; border-color: #284f3b; }
.idxFilterToggle { background: transparent; border-color: var(--border); }
.catalogSummary { display: flex; align-items: center; gap: 12px; padding-top: 19px; font-size: 12px; color: var(--fg-muted); }
.catalogSummary button { border: 0; padding: 4px 8px; border-radius: 4px; background: #e4eddd; color: #245d43; font: inherit; cursor: pointer; }
.catalogHint { margin-left: auto; font-size: 11px; }
.idxGroup { margin-top: 31px; }
.idxGroupHead { align-items: center; margin-bottom: 17px; }
.groupNumber { font-size: 11px; font-weight: 600; color: #7c9077; font-variant-numeric: tabular-nums; border: 1px solid #d9e1d2; padding: 2px 7px; border-radius: 5px; }
.idxGroupHead h2 { font-size: 19px; }
.idxGroupHead .idxCount { margin-left: auto; }
.idxGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.idxCard { background: #fff; border-color: #e1e6dd; border-radius: 14px; box-shadow: 0 3px 4px #203b3103; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.idxCard:hover { border-color: #9eb696; transform: translateY(-5px); box-shadow: 0 12px 28px #203b3112; }
.idxThumb { background: #edf1e5; border: 0; box-shadow: none; aspect-ratio: 16 / 10; }
.tutorialIndex .idxThumb { margin: 9px 9px 0; border-radius: 8px; }
.idxThumb img { transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.idxCard:hover .idxThumb img { transform: scale(1.045); }
.idxCardBody { padding: 16px; display: flex; flex-direction: column; }
.idxCardTitle b { font-size: 16px; }
.idxCardDesc { margin-top: 3px; font-size: 12px; -webkit-line-clamp: 2; min-height: 3.2em; }
.idxTags { margin-top: auto; }
.idxTag { border-radius: 5px; color: #687664; background: #f1f4ed; padding: 2px 7px; }
.cardExplore { display: flex; justify-content: space-between; margin-top: 16px; padding-top: 11px; border-top: 1px solid #eef0e9; font-size: 11px; font-weight: 600; color: #54754c; }
.cardExplore > span { transition: transform .2s; }
.idxCard:hover .cardExplore > span { transform: translate(2px,-2px); }
.idxEmpty { padding: 60px 20px; }
.idxEmpty b { display: block; font-size: 20px; color: var(--fg); }
.idxEmpty p { font-size: 13px; }
.emptySymbol { display: block; font-size: 42px; color: #87a17a; }
.siteFooter { margin-top: 70px; background: #203e30; padding-block: 36px; }
.siteFooterLegal { opacity: .8; }
.siteFooterLegal ul { font-size: 11px; }
body.md .tutorialAppBar, .howtoTopbar { background: #fffffff0; backdrop-filter: blur(18px); }
body.md .tutorialSidebar { background: #f4f7ef; }
body.md .tutorialSidebarIntro h1 { letter-spacing: -.035em; }
body.md .tutorialJourney { box-shadow: 0 5px 20px #29432f06; }
body.md .tutorialContentPage { animation: contentArrive .3s ease-out; }
.howtoArticle { box-shadow: 0 12px 40px #23402b06; }
.howtoIndexHead { background: #f0f5e8; }
.howtoIndexNote { border-radius: 12px; }
@keyframes blockFloat { 0%,100% { transform: translateY(0) rotate(-7deg); } 50% { transform: translateY(-9px) rotate(-5deg); } }
@keyframes flowerTurn { to { transform: rotate(360deg); } }
@keyframes contentArrive { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (min-width: 701px) {
  .heroCopy { animation: contentArrive .65s ease-out; }
  .heroStudio { animation: contentArrive .85s ease-out; }
}
@media (max-width: 1000px) {
  .learnHero { gap: 25px; padding-block: 40px; }
  .heroStudio { height: 330px; }
  .studioPhone { right: 27px; }
  .studioBlocks { left: 12px; }
  .idxGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .heroStats { gap: 10px; }
  .heroStats span + span { padding-left: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.md *, body.md *::before, body.md *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Primary surface: the 280–700px editor sidebar. Wide hero is progressive enhancement. */
.sidebarWelcome { display: none; }
@media (max-width: 700px) {
  .idxHeadInner { display: block; padding: 12px 14px; }
  .idxHeadMain { display: block; }
  .idxHead p { display: none; }
  .idxLogo { height: 28px; }
  .idxHead h1 { font-size: 16px; }
  .idxMenuInner { padding: 6px 8px; gap: 2px; }
  .idxMenuLink { padding: 7px 9px; font-size: 12px; }
  .idxMenuSpark { width: 12px; }
  .idxMenuLink { gap: 4px; }
  .learnHero { display: block; margin: 12px; padding: 12px; border: 1px solid #dce7d2; border-radius: 12px; background: #edf3e5; }
  .heroStudio, .heroCopy > .heroEyebrow, .heroCopy > h2, .heroCopy > p, .heroStats, .heroSecondary { display: none; }
  .sidebarWelcome { display: flex; gap: 10px; align-items: center; }
  .sidebarWelcomeIcon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; background: #dfeacb; color: #60844b; border-radius: 10px; font-size: 27px; }
  .sidebarWelcome b { display: block; font-size: 14px; }
  .sidebarWelcome div > span { display: block; font-size: 10px; color: #728166; margin-top: 1px; }
  .heroActions { margin: 9px 0 0 44px; }
  .heroPrimary { padding: 0; background: transparent; box-shadow: none; color: #2d6746; font-size: 11px; }
  .heroPrimary:hover { color: #174b35; box-shadow: none; transform: none; }
  .catalogIntro { display: none; }
  .idxToolsInner { display: flex; padding: 10px 12px; gap: 8px; }
  .catalogSearch { flex-basis: 50%; }
  .catalogSearch .idxSearch { flex-basis: 0; font-size: 12px; }
  .catalogLevel select { padding-block: 10px; }
  .idxFilters:not(.expanded) { overflow-x: auto; scrollbar-width: none; }
  .idxFilters::-webkit-scrollbar { display: none; }
  .idxChip { min-height: 32px; }
  .idxFilterToggle { min-height: 32px; font-size: 11px; padding-inline: 8px; }
  .idxBody { padding: 0 12px 18px; }
  .catalogSummary { padding-top: 12px; font-size: 11px; }
  .idxGroup, .howtoIndex .idxGroup { margin-top: 18px; }
  .idxGroupHead { gap: 8px; margin-bottom: 10px; }
  .idxGroupHead h2, .howtoIndex .idxGroupHead h2 { font-size: 15px; }
  .idxGrid { display: flex; flex-direction: column; gap: 8px; }
  .idxCard { display: grid; grid-template-columns: 82px minmax(0,1fr); border-radius: 11px; }
  .idxCard:hover { transform: translateY(-1px); box-shadow: 0 4px 10px #203b3110; }
  .tutorialIndex .idxThumb, .howtoIndex .idxThumb { margin: 8px 0 8px 8px; width: 74px; height: 78px; aspect-ratio: auto; border: 0; border-radius: 7px; }
  .idxCardBody, .howtoCard .idxCardBody { padding: 9px 11px; }
  .idxCardTitle { margin-bottom: 3px; }
  .idxCardTitle b, .howtoCard .idxCardTitle b { font-size: 13px; }
  .idxCardDesc, .howtoCard .idxCardDesc { font-size: 11px; margin: 0 0 5px; min-height: 0; line-height: 1.55; -webkit-line-clamp: 2; }
  .idxTags { flex-wrap: nowrap; overflow: hidden; gap: 4px; }
  .idxTag { flex: none; font-size: 9px; padding: 1px 5px; }
  .cardExplore { display: none; }
  .howtoThumb { padding: 5px; }
  .howtoCategory { display: none; }
  .howtoIndexNote { padding: 9px 11px; font-size: 11px; margin-top: 12px; }
  .howtoIndex .idxFilters { flex-basis: 100%; }
  .siteFooter { padding: 22px 12px; margin-top: 20px; }
  .siteFooterInner { gap: 14px; }
  .siteFooterBrand h2 { font-size: 14px; margin-bottom: 8px; }
  .siteFooterBrand img { max-width: 140px; }
  .siteFooterFollow img { width: 56px; height: 56px; }
  .siteFooterLegal ul { font-size: 10px; }
}

@media (min-width: 701px) {
  .learnHero { padding-block: 32px; }
  body.md .heroCopy h2 { margin: 18px 0; font-size: clamp(32px, 3.5vw, 48px); }
  .heroStudio { height: 330px; }
  .catalogIntro { padding-block: 18px; }
}
@media (max-width: 700px) {
  .catalogSearch kbd, .catalogHint { display: none; }
  .catalogLevel { font-size: 0; gap: 0; }
  .catalogLevel select { font-size: 11px; padding-inline: 6px; max-width: 94px; }
  body.md .idxGroupHead h2 { margin: 0; }
  .idxHeadInner { padding-block: 10px; }
  .learnHero { padding-block: 10px; margin-block: 9px; }
  .idxFilterBar { margin-top: 0; }
}

@media (max-width: 700px) {
  .tutorialIndex .heroActions { margin-top: 5px; }
  .tutorialIndex .idxCard:active { background: #f1f6ea; border-color: #87a679; }
  .tutorialIndex .idxSearch { text-overflow: ellipsis; }
  .howtoIndex .idxToolsInner { display: flex; }
  .howtoIndex .idxFilters { margin-top: 0; }
}
@media (min-width: 701px) {
  .idxHeadInner { padding-block: 14px; }
  body.md .heroCopy h2 { font-size: clamp(32px, 3.3vw, 44px); line-height: 1.25; margin: 14px 0; }
  .heroCopy > p { margin: 12px 0; font-size: 14px; }
  .heroActions { margin-block: 20px; }
  body.md .catalogIntro h2 { margin: 5px 0 0; font-size: 22px; }
  .idxToolsInner { padding-block: 12px; gap: 10px; }
}