.draft-bar {
  background: #2b2520; color: #ffffff;
  font-size: 13px; line-height: 1.6; text-align: center; padding: 8px 16px;
}
.draft-bar strong { font-weight: 700; margin-right: .6em; }
.draft-bar span { color: #e6ddd2; }
.art-sec { padding: 52px 0 60px; }
@media (min-width: 900px) { .art-sec { padding: 56px 0 64px; } }  
.kj-eyebrow {
  display: inline-block; margin: 0 0 16px; padding: 6px 16px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  font-family: var(--font-label); font-weight: var(--fl-w); font-size: 14px; line-height: 1.5; color: var(--ink);
}
.kj-pending {
  display: inline-block; margin: 0 0 14px 8px; padding: 5px 14px; border-radius: 999px;
  background: var(--surface); border: 1px dashed var(--muted);
  font-size: 13px; line-height: 1.5; color: var(--text);
}
.kj-title { font-family: var(--font-heading); font-weight: var(--fh-w); color: var(--text); margin: 0; letter-spacing: .01em; font-size: clamp(30px, 7.6vw, 62px); line-height: 1.32; }
.kj-title .morph {
  display: inline-block; color: var(--morph-color, var(--ink));
  font-family: var(--morph-font, inherit); font-weight: var(--morph-w, inherit);
  transition: opacity .3s;
}
.kj-sub { font-family: var(--font-label); font-weight: var(--fl-w); font-size: clamp(17px, 4.4vw, 24px); line-height: 1.6; margin: 18px 0 0; color: var(--text); }
.kj-hero-grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 960px) { .kj-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.kj-pick-label { margin: 26px 0 10px; font-size: 14px; color: var(--muted); line-height: 1.7; }
.kj-hero .mood-chips .chip { font-size: 14px; }
.kj-grid { display: grid; gap: 22px; }
@media (min-width: 960px) {
  .kj-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; }
  .kj-grid > .sec-head { margin-bottom: 0; position: sticky; top: 24px; }
}
.prose p { margin: 0 0 1.2em; font-size: 16px; line-height: 2; max-width: 38em; }
.prose p:last-child { margin-bottom: 0; }
.prose h3 { font-family: var(--font-heading); font-weight: var(--fh-w); font-size: clamp(21px, 5vw, 26px); line-height: 1.5; margin: 1.6em 0 .6em; color: var(--ink); }
.prose strong { font-weight: 700; }
.prose a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.prose ul { margin: 0 0 1.2em; padding-left: 1.3em; line-height: 1.95; font-size: 16px; max-width: 38em; }
.prose li { margin-bottom: .5em; }
.answer {
  margin: 30px 0 0; padding: 20px 22px; border-radius: 22px;
  background: var(--surface); border: 2px solid var(--ink);
}
.answer-label { display: inline-block; margin: 0 0 8px; padding: 2px 12px; border-radius: 999px; background: var(--ink); color: var(--bg); font-family: var(--font-label); font-weight: var(--fl-w); font-size: 13px; line-height: 1.7; }
.answer p { margin: 0; font-size: 16px; line-height: 1.95; }
.answer p + p { margin-top: .8em; }
.answer em { font-style: normal; font-weight: 700; color: var(--ink); }
.boss { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; align-items: start; margin: 34px 0; max-width: 46em; }
.boss-face { width: 64px; height: 64px; border-radius: 50%; background: #fef4e3; border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.boss-face img { width: 82%; height: 82%; object-fit: contain; }
.boss-bubble { position: relative; background: var(--surface); border: 2px solid var(--ink); border-radius: 24px; padding: 14px 20px 16px; box-shadow: var(--shadow-soft); }
.boss-bubble::before {
  content: ""; position: absolute; left: -11px; top: 22px; width: 18px; height: 18px;
  background: var(--surface); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}
.boss-tag { margin: 0 0 4px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 13px; color: var(--ink); }
.boss-text { margin: 0; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 18px; line-height: 1.7; color: var(--text); }
.boss-more { margin: 8px 0 0; font-size: 15.5px; line-height: 1.8; color: var(--text); }
.boss-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: var(--muted); }
@media (max-width: 560px) { .boss { grid-template-columns: minmax(0, 1fr); gap: 8px; } .boss-face { width: 44px; height: 44px; margin-left: 14px; } .boss-bubble { padding: 14px 16px 16px; border-radius: 20px; } .boss-bubble::before { display: none; } .boss-text { font-size: 16.5px; line-height: 1.6; } .boss-more { font-size: 14.5px; line-height: 1.75; } }
.fig { margin: 28px 0 0; }
.fig figcaption { margin-top: 10px; font-size: 13px; line-height: 1.7; color: var(--muted); }
.fig img { width: 100%; height: auto; border-radius: 22px; border: 1px solid var(--border); }
.vs { display: grid; gap: 16px; margin-top: 30px; }
@media (min-width: 760px) { .vs { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; } }
.vs-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 22px 20px; box-shadow: var(--shadow-soft); }
.vs-title { margin: 0 0 14px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 18px; line-height: 1.5; color: var(--ink); }
.vs-cloud { display: flex; flex-wrap: wrap; gap: 8px; min-height: 96px; align-content: flex-start; }
.vs-cloud span { padding: 6px 14px; border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 15px; line-height: 1.4; }
.vs-cloud span:nth-child(3n) { transform: rotate(-3deg); }
.vs-cloud span:nth-child(3n+1) { transform: rotate(2deg); }
.vs-note { margin: 14px 0 0; font-size: 15px; line-height: 1.85; }
.vs-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 96px; }
.vs-flow .arrow { color: var(--accent); }
.vs-flow .arrow svg { width: 30px; height: 30px; display: block; }
.vs-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px; border-radius: 999px; background: var(--m); color: #fff; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 17px; line-height: 1.3; }
.vs-chip img { width: 34px; height: 34px; border-radius: 50%; background: #fff; padding: 3px; }
.vs-flow .vs-outs { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-flow .vs-outs span { padding: 5px 13px; border-radius: 999px; background: var(--accent-soft); color: var(--text); font-size: 15px; line-height: 1.4; }
.mood-cards { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .mood-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .mood-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.mood-card {
  position: relative; border-radius: 26px; padding: 12px; overflow: hidden; isolation: isolate;
  background-color: var(--bg); background-image: var(--pattern-image); background-size: var(--pattern-size); background-position: var(--pattern-pos);
  border: 2px solid var(--m); box-shadow: var(--shadow-soft);
}
.mood-card .mc-photo { position: relative; }
.mood-card .mc-photo img.ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 16px; display: block; border: 0; }
.mood-card .mc-ico { position: absolute; left: 10px; bottom: -22px; width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 3px solid var(--m); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgb(60 40 20 / 16%); }
.mood-card .mc-ico img { width: 64%; height: 64%; object-fit: contain; }
.mc-body { margin-top: 8px; background: var(--surface); border-radius: 18px; padding: 32px 16px 16px; }
.mc-name { margin: 0; font-family: var(--font-heading); font-weight: var(--fh-w); font-size: 26px; line-height: 1.3; color: var(--ink); }
.mc-lab { margin: 12px 0 2px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.mc-def { margin: 8px 0 0; font-size: 15px; line-height: 1.75; color: var(--text); }
.mc-day { margin: 0; font-size: 15px; line-height: 1.75; color: var(--text); }
.mc-ex { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mc-ex .tag { font-size: 13px; }
.mc-cap { margin: 4px 2px 0; font-size: 11px; color: var(--muted); line-height: 1.4; }
.lr { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 860px) { .lr { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0; align-items: stretch; } }
.lr-panel {
  position: relative; border-radius: 28px; padding: 14px; border: 2px solid var(--m, var(--accent)); overflow: hidden; isolation: isolate;
  background-color: var(--bg); background-image: var(--pattern-image); background-size: var(--pattern-size); background-position: var(--pattern-pos);
}
.lr-panel .ph { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 18px; display: block; }
.lr-in { margin-top: 10px; background: var(--surface); border-radius: 18px; padding: 16px 18px 18px; color: var(--text); }
.lr-name { margin: 0; font-family: var(--font-heading); font-weight: var(--fh-w); font-size: 30px; line-height: 1.3; color: var(--ink); }
.lr-key { margin: 2px 0 10px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 16px; color: var(--text); }
.lr-in ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.85; }
.lr-vs { display: flex; align-items: center; justify-content: center; padding: 6px 0; }
@media (min-width: 860px) { .lr-vs { padding: 0 14px; } }
.lr-vs span { width: 56px; height: 56px; border-radius: 50%; background: #ffffff; color: #2b2520; border: 3px solid #2b2520; display: flex; align-items: center; justify-content: center; font-family: "Dela Gothic One", sans-serif; font-size: 18px; box-shadow: 0 6px 14px rgb(0 0 0 / 22%); }
.lr-pick { display: grid; gap: 10px; margin-top: 20px; }
@media (min-width: 860px) { .lr-pick { grid-template-columns: 1fr 1fr; gap: 18px; } }
.lr-pick p { margin: 0; padding: 14px 18px; border-radius: 18px; background: var(--surface); border: 1px solid var(--border); font-size: 15px; line-height: 1.8; color: var(--text); }
.lr-pick p strong { font-family: var(--font-label); font-weight: var(--fl-w); color: var(--ink); }
.lr-sample { margin: 0 0 18px; font-family: var(--font-heading); font-weight: var(--fh-w); font-size: clamp(40px, 12vw, 84px); line-height: 1.2; color: var(--ink); }
.chart { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 20px 18px 14px; box-shadow: var(--shadow-soft); }
.chart-title { margin: 0 0 4px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 17px; color: var(--ink); line-height: 1.5; }
.chart-sub { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.6; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .c-lbl { font-family: var(--font-label); font-weight: var(--fl-w); font-size: 17px; fill: var(--text); }
.chart .c-num { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 22px; fill: var(--text); }
.chart .c-pct { font-size: 15px; fill: var(--muted); }
.chart .c-track { fill: var(--surface-2); }
.chart .c-bar-a { fill: #8f86b8; }
.chart .c-bar-b { fill: var(--accent); }
.chart .c-axis { font-size: 14px; fill: var(--muted); }
.chart-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); line-height: 1.7; }
[data-mood="shippori"] .chart .c-bar-a { fill: #a79fcf; }
.dots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; max-width: 220px; }
.dots i { display: block; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.dots i.k2 { background: #8f86b8; }
.dots i.ex { background: transparent; border: 2px dashed var(--muted); }
.dots-key { display: grid; gap: 4px; margin-top: 12px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.dots-key span::before { content: ""; display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 7px; background: var(--accent); vertical-align: -1px; }
.dots-key .k2::before { background: #8f86b8; }
.dots-key .ex::before { background: transparent; border: 2px dashed var(--muted); width: 10px; height: 10px; }
.dots-key .k1::before { background: var(--accent); }
.kj-flow { margin-top: 30px; margin-bottom: 0; }
.kj-flow .jf-box strong { font-size: 20px; }
.kj-flow .jf-box b { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 1.5em; color: var(--ink); margin-right: 2px; }
.tabs { margin-top: 28px; }
.tab-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.kj-tab {
  display: inline-flex; align-items: center; min-height: 48px; padding: 8px 20px; border-radius: 999px;
  background: var(--surface); color: var(--text); border: 2px solid var(--accent);
  font-family: var(--font-label); font-weight: var(--fl-w); font-size: 16px; line-height: 1.3; cursor: pointer;
  transition: translate .25s var(--ease-pop), scale .25s var(--ease-pop), background-color .2s, color .2s;
}
.kj-tab:hover { translate: 0 -2px; }
.kj-tab[aria-selected="true"] { background: var(--accent); color: var(--accent-text); scale: 1.04; }
.tab-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 22px 20px; box-shadow: var(--shadow-soft); }
.tab-panel[hidden] { display: none; }
.tab-panel.is-in { animation: faqIn .45s var(--ease-pop); }
.tp-grid { display: grid; gap: 20px; }
@media (min-width: 860px) { .tp-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 36px; align-items: start; } }
.tp-head { margin: 0 0 8px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 21px; line-height: 1.5; color: var(--ink); }
.tp-sub { margin: 0 0 14px; font-size: 15px; line-height: 1.9; }
.tp-list { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.9; }
.tp-score { display: grid; gap: 4px; justify-items: start; }
.tp-score .big { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: clamp(54px, 12vw, 76px); line-height: 1.05; color: var(--ink); }
.tp-score .big small { font-size: .38em; margin-left: .15em; color: var(--text); }
.tp-score .of { font-size: 14px; color: var(--muted); line-height: 1.6; }
.tp-vis { margin-top: 16px; }
.rtable { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 22px; overflow: hidden; margin: 24px 0 0; font-size: 15px; box-shadow: var(--shadow-soft); }
.rtable th, .rtable td { padding: 13px 16px; text-align: left; line-height: 1.6; border-bottom: 1px solid var(--border); }
.rtable tr:last-child td { border-bottom: 0; }
.rtable thead th { background: var(--surface-2); font-family: var(--font-label); font-weight: var(--fl-w); font-size: 14px; color: var(--text); }
.rtable td.n { font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; white-space: nowrap; }
.rtable tr.best td { background: var(--accent-soft); font-weight: 700; }
.table-scroll { overflow-x: auto; }
.kuse { display: grid; gap: 14px; margin-top: 22px; }
@media (min-width: 860px) { .kuse { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
.kuse-card { background: var(--surface); border: 1px solid var(--border); border-radius: 24px; padding: 18px 20px; box-shadow: var(--shadow-soft); }
.kuse-card h3 { margin: 0 0 8px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 18px; line-height: 1.5; color: var(--ink); }
.kuse-card p { margin: 0; font-size: 15px; line-height: 1.9; }
.kuse-card ul { margin: 0; padding-left: 1.2em; font-size: 15px; line-height: 1.9; }
.bar8 { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; margin: 12px 0 4px; }
.bar8 i { display: block; height: 22px; border-radius: 6px; background: var(--surface-2); }
.bar8 i.on { background: var(--accent); }
.bar8-lab { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.limits { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: lim; }
@media (min-width: 860px) { .limits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } }
.limits li { counter-increment: lim; position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 14px 16px 14px 56px; font-size: 15px; line-height: 1.85; }
.limits li::before { content: counter(lim); position: absolute; left: 14px; top: 13px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-family: "M PLUS Rounded 1c", sans-serif; font-weight: 800; font-size: 15px; }
.closing .lead { margin-left: auto; margin-right: auto; }
.art-foot-note { margin: 0 0 8px; font-size: 13px; color: var(--muted); line-height: 1.7; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .tab-panel.is-in { animation: none; } .kj-tab { transition: none; } }
.kj-eight .chip { cursor: default; }
.kj-eight .chip:hover { translate: none; }
html[data-tone="2"] .stars { display: none; }
html[data-tone="2"] body { background: #eef2f6; }
html[data-tone="2"] [data-mood] {
  --bg: #eef2f6; --surface: #ffffff; --surface-2: #e3eaf1; --accent: #2f4a7d; --accent-soft: #dbe4f1; --accent-text: #ffffff; --border: #ccd6e1;
  --text: #1b2a44; --muted: #4b5a72; --ink: #1b2a44;
  --pattern-color: #dfe6ee;
  --pattern-image: repeating-linear-gradient(90deg, var(--pattern-color) 0 1px, transparent 1px 32px), repeating-linear-gradient(0deg, var(--pattern-color) 0 1px, transparent 1px 32px);
  --pattern-size: auto; --pattern-pos: 0 0;
}
html[data-tone="2"] [data-mood].kj-hero { --bg: #d6e2ee; --pattern-color: #c5d4e3; }
html[data-tone="2"] .chart .c-bar-a, html[data-tone="2"] [data-mood] .chart .c-bar-a { fill: #9db0cc; }
html[data-tone="2"] .dots i.k2, html[data-tone="2"] .dots-key .k2::before { background: #9db0cc; }
html[data-tone="2"] .mood-card { box-shadow: none; }
.kj-lead { margin: 18px 0 0; max-width: 34em; font-size: clamp(16px, 4vw, 19px); line-height: 1.9; color: var(--text); }
.kj-reader { margin: 16px 0 0; font-size: 16px; line-height: 1.8; color: var(--text); }
.kj-picked { margin: 14px 0 0; font-size: 16px; line-height: 1.8; color: var(--text); min-height: 1.8em; }
.kj-picked strong { color: var(--ink); font-size: 1.15em; margin-right: .1em; }
.kj-note { margin-bottom: 22px; }
.mood-card { transition: translate .25s var(--ease-pop), box-shadow .25s; }
.mood-card.is-picked { translate: 0 -6px; box-shadow: 0 0 0 4px var(--m), var(--shadow-soft); }
.again { margin: 22px auto 0; max-width: 34em; font-size: 15px; line-height: 1.9; color: var(--text); }
.again a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .mood-card { transition: none; } }
.h3 { font-size: clamp(21px, 5vw, 26px); line-height: 1.5; margin: 0; font-weight: var(--fh-w); color: var(--ink); }
.kdemo { margin-top: 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 26px; padding: 22px 20px; box-shadow: var(--shadow-soft); }
.demo-lab { margin: 0 0 14px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 18px; line-height: 1.5; color: var(--ink); }
.demo-cols { display: grid; gap: 22px; }
@media (min-width: 860px) { .demo-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.demo-shops { display: grid; gap: 12px; }
.demo-shop { border: 2px solid var(--m, var(--accent)); border-radius: 20px; padding: 14px 16px 16px; background: var(--bg); }
.ds-name { margin: 0; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 18px; line-height: 1.5; color: var(--ink); }
.ds-tags { margin: 6px 0 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.ds-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.ds-btn { min-height: 48px; padding: 10px 24px; font-size: 16px; }
.ds-btn-sub { background: var(--surface); color: var(--text); border: 2px solid var(--accent); box-shadow: none; }
.demo-say { margin: 0; font-size: 15px; line-height: 1.85; color: var(--text); min-height: 3.7em; }
.dm-title { margin: 0 0 10px; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 16px; color: var(--ink); }
.dm-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.dm-list li { display: grid; grid-template-columns: 5.2em minmax(0, 1fr) 4.6em; gap: 10px; align-items: center; font-size: 14px; line-height: 1.4; }
.dm-name { color: var(--text); }
.dm-track { position: relative; height: 16px; border-radius: 8px; background: var(--surface-2); overflow: hidden; }
.dm-zero { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: var(--muted); }
.dm-bar { position: absolute; top: 0; bottom: 0; width: 0; left: 50%; transition: width .3s var(--ease-pop), left .3s var(--ease-pop); }
.dm-bar.up { background: var(--accent); }
.dm-bar.down { background: var(--muted); }
.dm-word { color: var(--text); font-size: 13px; text-align: right; }
.draw-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
@media (min-width: 640px) { .draw-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.draw-item { border: 2px solid var(--m, var(--accent)); border-radius: 18px; padding: 12px 14px; background: var(--bg); display: grid; gap: 6px; justify-items: start; }
.di-name { font-family: var(--font-label); font-weight: var(--fl-w); font-size: 16px; line-height: 1.5; color: var(--ink); }
.kdemo .demo-note { margin: 14px 0 0; text-align: left; }
@media (prefers-reduced-motion: reduce) { .dm-bar { transition: none; } }
.crumbs { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 6px; }
.crumbs li + li::before { content: "\203A"; margin-right: 6px; }
.crumbs a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.kj-def { margin: 20px 0 0; max-width: 34em; font-size: 15px; line-height: 1.85; color: var(--text); }
.kj-def strong { color: var(--ink); font-weight: 700; }
.kj-meta { margin: 10px 0 0; padding: 0; font-size: 13px; line-height: 1.7; color: var(--muted); display: flex; flex-wrap: wrap; gap: 0 16px; }
:where(main) img { height: auto; }
.kdemo .ds-btn { border: 0; }
[data-mood] .ds-btn.ds-btn-sub, .kdemo .ds-btn.ds-btn-sub {
  background-color: var(--surface); background-image: none; color: var(--text);
  border: 2px solid var(--accent); box-shadow: none; animation: none;
}
.demo-say + .ds-btn, .demo-say + .demo-note { margin-top: 12px; }
.kj-title .nw { white-space: nowrap; }
.kj-title .kj-tail { font-size: .58em; margin-left: .15em; }
@media (min-width: 960px) { .kj-title .kj-tail { font-size: .62em; } }
.cta-block .btn { text-align: center; }
.art-head { margin: 0 0 18px; }
.art-head .crumbs { margin: 0; }
.art-head .crumbs ol { align-items: center; gap: 0 10px; }
.art-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--text); }
.art-brand img { height: 40px; width: auto; flex-shrink: 0; }
.art-brand span { font-family: var(--font-heading); font-weight: var(--fh-w); font-size: 24px; line-height: 1.2; }
.crumbs a.art-brand { text-decoration: none; }
@media (min-width: 960px) { .art-brand img { height: 48px; } .art-brand span { font-size: 28px; } }
:where(p, li, summary, figcaption, .tag, .demo-say, .vs-note) { text-wrap: pretty; }
:where(h1, h2, h3, .kj-title, .ds-name, .di-name, .lr-key, .lr li, .mech-name, .mech-text, .kj-picked, .again-title, .omakase-name, .chart-title, .jf-box) { text-wrap: balance; }
.closing { padding: 84px 0 92px; }
@media (min-width: 900px) { .closing { padding: 80px 0 88px; } }
.omakase { margin: 22px 0 0; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: center; background: var(--surface); border: 3px solid var(--accent); border-radius: 26px; padding: 18px 20px; box-shadow: var(--shadow-soft); }
.omakase-ico { width: 76px; height: 76px; border-radius: 50%; background: #fff; border: 3px solid var(--accent); display: flex; align-items: center; justify-content: center; }
.omakase-ico img { width: 62%; }
.omakase-lab { margin: 0; display: inline-block; padding: 2px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-text, #fff); font-family: var(--font-label); font-weight: var(--fl-w); font-size: 13px; line-height: 1.7; }
.omakase-name { margin: 6px 0 0; font-family: var(--font-heading); font-weight: var(--fh-w); font-size: clamp(22px, 5.6vw, 30px); line-height: 1.35; color: var(--ink); }
.omakase-body { margin: 6px 0 0; font-size: 15px; line-height: 1.85; color: var(--text); }
@media (max-width: 480px) { .omakase { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 16px; } .omakase-ico { width: 56px; height: 56px; } }
@media (min-width: 900px) { .omakase { grid-template-columns: 96px minmax(0, 1fr); gap: 24px; padding: 22px 28px; max-width: 760px; } .omakase-ico { width: 96px; height: 96px; } }
.h3-icons { display: inline-flex; gap: 6px; margin-right: 10px; vertical-align: -.35em; }
.h3-icons img { width: 1.5em; height: 1.5em; object-fit: contain; }
.mech { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 860px) { .mech { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.mech-item { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 14px; align-items: center; background: var(--surface); border: 2px solid var(--border); border-radius: 22px; padding: 18px 18px 18px 18px; }
@media (min-width: 860px) { .mech-item { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 22px 20px; } }
.mech-num { position: absolute; top: -12px; left: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--bg); font-family: var(--font-label); font-weight: var(--fl-w); font-size: 16px; line-height: 32px; text-align: center; }
.mech-ico { width: 56px; height: 56px; border-radius: 50%; background: #fff; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; }
.mech-ico img { width: 62%; height: auto; }
.mech-ico-moods { width: auto; min-width: 56px; border-radius: 999px; padding: 0 10px; gap: 2px; justify-self: start; }
.mech-ico-moods img { width: 30px; }
.mech-name { margin: 0; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 17px; line-height: 1.5; color: var(--ink); }
.mech-text { margin: 4px 0 0; font-size: 15px; line-height: 1.8; color: var(--text); }
.mech-after { margin: 22px 0 0; max-width: 40em; font-size: 15px; line-height: 1.9; color: var(--text); }
.again-card { margin: 26px auto 0; max-width: 34em; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center; text-align: left; background: var(--surface); border: 2px solid var(--ink); border-radius: 22px; padding: 16px 20px; }
.again-ico { width: 56px; height: 56px; border-radius: 50%; background: #fef4e3; border: 2px solid var(--ink); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.again-ico img { height: 70%; width: auto; }
.again-title { margin: 0; font-family: var(--font-label); font-weight: var(--fl-w); font-size: 17px; line-height: 1.5; color: var(--ink); }
.again-list { list-style: none; margin: 6px 0 0; padding: 0; font-size: 14.5px; line-height: 1.8; color: var(--text); }
.again-list strong { font-weight: 700; }
.mech-after { text-wrap: balance; }
@media (max-width: 859px) {
  .mech-item { grid-template-columns: 72px minmax(0, 1fr); }
  .mech-ico { justify-self: center; }
  .mech-ico-moods { width: 72px; min-width: 0; padding: 0 2px; gap: 0; justify-self: center; justify-content: center; }
  .mech-ico-moods img { width: 21px; }
}
.omakase { display: block; max-width: none; padding: 18px 20px 20px; }
.omakase-top { display: flex; align-items: center; gap: 14px; }
.omakase-ico { flex: none; width: 64px; height: 64px; }
.omakase-head { min-width: 0; }
.omakase-name { margin: 4px 0 0; }
.omakase-body { margin: 12px 0 0; font-size: 16px; line-height: 1.9; max-width: 40em; }
@media (max-width: 480px) { .omakase { padding: 16px 16px 18px; } .omakase-ico { width: 52px; height: 52px; } .omakase-top { gap: 12px; } .omakase-body { margin-top: 10px; font-size: 15.5px; line-height: 1.85; } }
@media (min-width: 900px) { .omakase { padding: 24px 30px 26px; max-width: 820px; } .omakase-ico { width: 84px; height: 84px; } .omakase-top { gap: 22px; } }
.kj-gap-a { margin-top: 44px; }
.kj-gap-b { margin-top: 56px; }
@media (max-width: 959px) {
  .kj-grid { gap: 12px; }
  .kj-grid > .sec-head { margin-bottom: 0; }
  .kj-gap-a { margin-top: 26px; }
  .kj-gap-b { margin-top: 34px; }
}
@media (max-width: 899px) {
  .art-sec { padding: 42px 0 48px; }
  .art-sec .sec-head { margin-bottom: 16px; }
  .art-sec .answer { margin-top: 20px; }
  .art-sec .boss { margin: 22px 0; }
  .art-sec .cta-block { margin-top: 20px; }
  .art-sec .kdemo { margin-top: 20px; }
  .art-sec .mech { margin-top: 20px; }
  .art-sec .mech-after { margin-top: 14px; }
  .art-sec .steps { margin-top: 18px !important; }
  .closing { padding: 64px 0 72px; }
}
@media (min-width: 900px) { .art-sec .sec-head { margin-bottom: 28px; } }
@media (max-width: 959px) { .art-sec .kj-grid > .sec-head { margin-bottom: 0; } }
.ds-name, .di-name { word-break: keep-all; overflow-wrap: anywhere; }
.again-list strong { margin-right: .6em; }