:root {
  color-scheme: light;
  --paper: #f3efe5;
  --panel: #fffdf8;
  --soft: #e5e8e1;
  --soft-2: #f0f1eb;
  --ink: #121611;
  --muted: #677069;
  --line: #cdd1c8;
  --lime: #a9ff2c;
  --coral: #ff6b57;
  --blue: #6875f5;
  --green: #078f70;
  --yellow: #ffd568;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Noto Sans JP", sans-serif;
  --preview-panel-height: auto;
  --preview-width: 64%;
  --demo-base: 18px;
  --demo-step-4: 62px;
  --demo-space-l: 48px;
}

* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: radial-gradient(circle at 0 0, rgb(104 117 245 / 8%), transparent 31%), radial-gradient(circle at 100% 0, rgb(255 107 87 / 8%), transparent 35%), var(--paper); font-family: var(--sans); }
button, input, select { font: inherit; }
button { color: inherit; }
button, input[type="range"], select { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.page { width: min(1600px, calc(100% - 64px)); margin: 0 auto; padding: 32px 0 44px; }
.hero { min-height: 210px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; padding: 0 12px 28px; }
.eyebrow, .control-kicker, .section-heading p, .sub-heading p, .code-heading p, .token-heading p, .page-footer p { margin: 0; color: var(--green); font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.eyebrow { display: flex; align-items: center; gap: 10px; }
.eyebrow i { position: relative; width: 17px; height: 17px; border: 2px solid var(--blue); border-radius: 5px; }
.eyebrow i::after { content: ""; position: absolute; inset: 5px -7px -7px 5px; z-index: -1; border-radius: 4px; background: var(--lime); }
h1 { margin: 8px 0 4px; font-size: clamp(64px, 6.4vw, 96px); line-height: .94; letter-spacing: 0; }
.lead { margin: 16px 0 0; color: var(--muted); font-size: 21px; font-weight: 800; }
.lead strong { color: var(--ink); }
.hero-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding-bottom: 2px; }
.support-chip, .top-button { min-height: 46px; border: 1px solid var(--line); border-radius: 14px; padding: 0 18px; background: var(--panel); font-size: 12px; font-weight: 800; }
.support-chip { display: inline-grid; place-items: center; color: var(--green); background: #e4fff7; }
.top-button.dark { color: white; background: var(--ink); border-color: var(--ink); }

.builder-shell, .curve-panel, .code-panel, .token-panel { overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: var(--panel); }
.section-heading { display: flex; align-items: center; gap: 16px; min-height: 92px; padding: 16px 24px; border-bottom: 1px solid var(--line); }
.section-number { flex: 0 0 50px; height: 50px; display: grid; place-items: center; border-radius: 15px; color: white; background: var(--coral); font-family: var(--mono); font-size: 13px; font-weight: 700; }
.section-heading h2, .sub-heading h2, .code-heading h2, .token-heading h2 { margin: 2px 0 0; font-size: 27px; line-height: 1.15; letter-spacing: 0; }
.heading-metrics { margin-left: auto; display: flex; gap: 8px; }
.heading-metrics span { padding: 10px 13px; border-radius: 999px; background: var(--soft-2); color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.heading-metrics i { margin-right: 4px; color: var(--blue); font-style: normal; font-size: 14px; }

.builder { display: grid; grid-template-columns: 330px minmax(0, 1fr); background: var(--soft); }
.controls { position: relative; z-index: 2; min-width: 0; background: #f8f6ee; border-right: 1px solid var(--line); }
.control-section { padding: 20px 20px 22px; border-bottom: 1px solid var(--line); }
.control-section:last-child { border-bottom: 0; }
.control-section h3 { margin: 5px 0 14px; font-size: 18px; line-height: 1.2; }
.preset-list { display: grid; gap: 7px; }
.preset-list button { min-height: 44px; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); text-align: left; }
.preset-list button > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 8px; background: var(--lime); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.preset-list button b { font-size: 12px; }
.preset-list button small { color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.preset-list button[aria-pressed="true"] { color: white; background: var(--ink); border-color: var(--ink); }
.preset-list button[aria-pressed="true"] small { color: #b9c0b9; }
.control-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.control-title p { margin: 0; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.control-title h3 { margin: 4px 0 0; font-size: 14px; }
.control-title output { color: var(--blue); font-family: var(--mono); font-size: 10px; font-weight: 700; white-space: nowrap; }
.control-help { min-height: 2.8em; margin: 8px 0 13px; color: var(--muted); font-size: 11px; line-height: 1.4; font-weight: 700; }
.number-pair { display: grid; grid-template-columns: 1fr 20px 1fr; align-items: end; gap: 7px; margin-top: 14px; }
.number-pair > b { padding-bottom: 9px; text-align: center; color: var(--muted); }
.number-pair label { position: relative; display: block; }
.number-pair label > span, .range-pair label > span { display: block; margin-bottom: 5px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.number-pair input { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 10px; padding: 0 30px 0 10px; background: white; font-family: var(--mono); font-size: 12px; font-weight: 700; }
.number-pair label i { position: absolute; right: 9px; bottom: 12px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-style: normal; }
.range-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 13px; }
.range-pair label { min-width: 0; }
input[type="range"] { width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; }
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient(90deg, var(--blue), #b7bec0); }
input[type="range"]::-webkit-slider-thumb { width: 15px; height: 15px; margin-top: -5.5px; appearance: none; border: 0; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 2px #f8f6ee; }
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: #b7bec0; }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 999px; background: var(--blue); }
input[type="range"]::-moz-range-thumb { width: 15px; height: 15px; border: 0; border-radius: 50%; background: var(--blue); }

.preview-panel { height: var(--preview-panel-height); min-height: 720px; display: grid; grid-template-rows: 48px minmax(0, 1fr) 74px; min-width: 0; padding: 16px; }
.browser-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-width: 0; padding: 0 14px; border: 1px solid #bfc4bc; border-bottom: 0; border-radius: 18px 18px 0 0; background: #d7dbd3; }
.browser-address { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; font-weight: 700; }
.browser-address i { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.browser-address i:nth-child(2) { background: var(--yellow); }
.browser-address i:nth-child(3) { background: #55c99f; }
.browser-address span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser-actions { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 9px; font-weight: 700; }
.browser-actions span, .browser-actions strong { padding: 7px 10px; border-radius: 999px; color: white; background: var(--green); }
.browser-actions strong { background: var(--blue); }
.browser-actions i { font-style: normal; }

.preview-stage { position: relative; overflow: hidden; min-height: 0; border-inline: 1px solid #bfc4bc; background-color: #faf9f3; background-image: linear-gradient(rgb(18 22 17 / 5%) 1px, transparent 1px), linear-gradient(90deg, rgb(18 22 17 / 5%) 1px, transparent 1px); background-size: 28px 28px; }
.viewport-track { position: absolute; inset: 16px 18px auto; height: 30px; display: flex; align-items: center; justify-content: space-between; border-top: 2px solid var(--ink); color: var(--muted); font-family: var(--mono); font-size: 9px; font-weight: 700; }
.viewport-track span { position: relative; padding-top: 6px; }
.viewport-track span::before { content: ""; position: absolute; top: -7px; width: 2px; height: 9px; background: var(--ink); }
.viewport-track span:first-child::before { left: 0; }
.viewport-track span:last-child::before { right: 0; }
.site-preview { position: absolute; top: 70px; bottom: 42px; left: 50%; width: var(--preview-width); min-width: 300px; max-width: calc(100% - 90px); overflow: hidden; transform: translateX(-50%); border: 2px solid var(--ink); border-radius: 22px; background: #fffaf0; box-shadow: 14px 16px 0 rgb(18 22 17 / 12%); transition: width .16s ease; }
.demo-header { position: relative; z-index: 4; min-height: var(--demo-space-l); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-inline: calc(var(--demo-space-l) * .7); border-bottom: 2px solid var(--ink); font-family: var(--mono); font-size: max(10px, calc(var(--demo-base) * .55)); font-weight: 700; }
.demo-header a { color: inherit; text-decoration: none; }
.demo-header nav { display: flex; gap: calc(var(--demo-space-l) * .45); }
.demo-content { position: relative; z-index: 3; width: min(72%, 880px); padding: var(--demo-space-l) calc(var(--demo-space-l) * .7); }
.demo-kicker { margin: 0 0 calc(var(--demo-space-l) * .36); color: #ec503d; font-family: var(--mono); font-size: max(10px, calc(var(--demo-base) * .58)); font-weight: 700; letter-spacing: .12em; }
.demo-content h3 { margin: 0; font-size: var(--demo-step-4); line-height: .88; letter-spacing: 0; text-transform: uppercase; }
.demo-body { max-width: 38ch; margin: calc(var(--demo-space-l) * .45) 0 0; font-size: var(--demo-base); line-height: 1.55; font-weight: 600; }
.demo-actions { display: flex; align-items: center; gap: calc(var(--demo-space-l) * .6); margin-top: calc(var(--demo-space-l) * .52); font-size: max(11px, calc(var(--demo-base) * .72)); font-weight: 800; }
.demo-actions span { padding: calc(var(--demo-space-l) * .22) calc(var(--demo-space-l) * .36); border-radius: 999px; background: var(--lime); border: 2px solid var(--ink); }
.demo-actions i { font-family: var(--mono); font-size: .8em; font-style: normal; }
.demo-art { position: absolute; inset: auto -7% -18% auto; width: 48%; aspect-ratio: 1; }
.demo-art span { position: absolute; border: 3px solid var(--ink); border-radius: 50%; }
.demo-art span:nth-child(1) { inset: 0; background: var(--blue); }
.demo-art span:nth-child(2) { inset: 20%; background: var(--coral); }
.demo-art span:nth-child(3) { inset: 39%; background: var(--yellow); }
body[data-preset="product"] .site-preview { background: #eff7f4; }
body[data-preset="product"] .demo-art span:nth-child(1) { border-radius: 24%; background: var(--green); }
body[data-preset="campaign"] .site-preview { color: white; background: var(--blue); }
body[data-preset="campaign"] .demo-header { border-color: white; }
body[data-preset="campaign"] .demo-kicker { color: var(--lime); }
body[data-preset="campaign"] .demo-art span:nth-child(1) { background: var(--lime); }
body[data-preset="dashboard"] .site-preview { background: #e8ece7; }
body[data-preset="dashboard"] .demo-content { width: 68%; }
body[data-preset="dashboard"] .demo-art span { border-radius: 0; }
.resize-handle { position: absolute; top: 50%; left: calc(50% + var(--preview-width) / 2); z-index: 8; width: 42px; height: 58px; display: grid; place-items: center; transform: translate(-50%, -50%); border: 2px solid var(--ink); border-radius: 16px; background: var(--lime); box-shadow: 0 5px 0 rgb(18 22 17 / 16%); touch-action: none; transition: left .16s ease; }
.resize-handle::before { content: "↔"; font-family: var(--mono); font-size: 15px; font-weight: 700; }
.resize-handle i { display: none; }
body.is-resizing { cursor: ew-resize; user-select: none; }
body.is-resizing .site-preview, body.is-resizing .resize-handle { transition: none; }
.preview-footer { display: flex; align-items: center; gap: 0; min-width: 0; padding: 0 14px; border: 1px solid var(--ink); border-radius: 0 0 18px 18px; color: white; background: var(--ink); }
.preview-footer > div { flex: 0 0 auto; min-width: 102px; padding: 0 18px; border-right: 1px solid #394039; }
.preview-footer > div:first-child { padding-left: 0; }
.preview-footer span { display: block; color: #8f9990; font-family: var(--mono); font-size: 8px; font-weight: 700; }
.preview-footer b { display: block; color: var(--lime); font-family: var(--mono); font-size: 12px; }
.preview-footer i { font-style: normal; }
.preview-footer p { min-width: 0; margin: 0 0 0 auto; color: #b7beb7; font-size: 10px; font-weight: 700; text-align: right; }

.analysis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; }
.curve-panel, .code-panel { min-height: 550px; padding: 24px; }
.sub-heading, .code-heading, .token-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.sub-heading label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 700; }
.sub-heading select { min-height: 38px; border: 1px solid var(--line); border-radius: 10px; padding: 0 30px 0 10px; background: var(--soft-2); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.curve-legend { display: flex; gap: 18px; margin: 25px 0 7px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.curve-legend span { display: flex; align-items: center; gap: 6px; }
.curve-legend i { width: 18px; height: 4px; border-radius: 99px; background: var(--muted); }
.curve-legend i.fluid { background: var(--blue); }
.curve-legend i.max { background: var(--coral); }
#curveChart { width: 100%; height: auto; display: block; overflow: visible; }
#chartGrid line { stroke: #d4d8d0; stroke-width: 1; }
#curvePath { fill: none; stroke: var(--blue); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#currentGuide { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 5; }
#currentPoint { fill: var(--lime); stroke: var(--ink); stroke-width: 3; }
#chartLabels text { fill: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; }
#chartLabels text.value-label { fill: var(--ink); font-size: 12px; }
.curve-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 9px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.curve-readout span { display: flex; justify-content: space-between; gap: 10px; }
.curve-readout b { color: var(--ink); font-family: var(--mono); }
.curve-readout code { grid-column: 1 / -1; overflow: hidden; padding: 10px 12px; border-radius: 9px; color: var(--green); background: var(--soft-2); font-family: var(--mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.code-heading button { min-height: 40px; border: 0; border-radius: 11px; padding: 0 14px; color: white; background: var(--ink); font-size: 11px; font-weight: 800; }
.code-tabs { display: flex; align-items: end; margin-top: 25px; }
.code-tabs button { min-width: 78px; min-height: 42px; border: 1px solid var(--line); border-bottom: 0; background: var(--soft-2); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.code-tabs button:first-child { border-radius: 10px 0 0 0; }
.code-tabs button:last-child { border-radius: 0 10px 0 0; }
.code-tabs button[aria-selected="true"] { color: var(--ink); background: var(--lime); border-color: var(--ink); }
.code-panel pre { height: 365px; overflow: auto; margin: 0; padding: 20px; border-radius: 0 14px 14px; color: #eef5ed; background: #121611; }
.code-panel code { font-family: var(--mono); font-size: 10px; line-height: 1.65; }
.code-note { display: flex; align-items: center; gap: 8px; min-height: 38px; margin-top: 10px; padding: 7px 10px; border-radius: 9px; background: var(--soft-2); }
.code-note i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 5px rgb(7 143 112 / 12%); }
.code-note p { margin: 0; color: var(--muted); font-size: 10px; font-weight: 700; }

.token-panel { margin-top: 18px; padding: 24px; }
.token-heading { align-items: center; }
.token-switch { display: flex; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft-2); }
.token-switch button { min-height: 34px; border: 0; border-radius: 9px; padding: 0 15px; background: transparent; font-family: var(--mono); font-size: 10px; font-weight: 700; }
.token-switch button[aria-pressed="true"] { color: white; background: var(--ink); }
.token-table-wrap { overflow-x: auto; margin-top: 22px; }
.token-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.token-table th { padding: 10px 12px; color: var(--muted); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; text-align: left; }
.token-table td { padding: 12px; border-bottom: 1px solid #e4e6df; }
.token-table tr:last-child td { border-bottom: 0; }
.token-table td:first-child { color: var(--green); font-family: var(--mono); font-weight: 700; }
.token-table td:nth-child(2), .token-table td:nth-child(3), .token-table td:nth-child(4) { font-family: var(--mono); font-weight: 700; white-space: nowrap; }
.token-table td:nth-child(3) { color: var(--blue); }
.token-table code { display: block; padding: 7px 9px; border-radius: 8px; background: var(--soft-2); font-family: var(--mono); font-size: 10px; white-space: nowrap; }
.token-table tr[hidden] { display: none; }

.page-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 28px 8px 0; }
.page-footer div { display: flex; align-items: center; gap: 22px; color: var(--muted); font-family: var(--mono); font-size: 10px; font-weight: 700; }
.page-footer a { color: inherit; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 50; max-width: min(360px, calc(100% - 32px)); padding: 13px 17px; border-radius: 12px; color: white; background: var(--ink); font-size: 12px; font-weight: 800; box-shadow: 0 12px 36px rgb(18 22 17 / 25%); opacity: 0; transform: translateY(15px); pointer-events: none; transition: .2s ease; }
.toast.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 1180px) {
  .page { width: min(100% - 32px, 1080px); }
  .builder { grid-template-columns: 285px minmax(0, 1fr); }
  .preview-footer > div { min-width: 88px; padding-inline: 12px; }
  .preview-footer p { display: none; }
  .site-preview { max-width: calc(100% - 64px); }
  .analysis-grid { grid-template-columns: 1fr; }
  .curve-panel, .code-panel { min-height: 0; }
}

@media (max-width: 780px) {
  .page { width: calc(100% - 20px); padding-top: 16px; }
  .hero { min-height: 0; display: block; padding: 0 0 18px; }
  h1 { margin-top: 7px; font-size: clamp(42px, 13vw, 60px); }
  .lead { margin-top: 11px; font-size: 14px; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; }
  .support-chip { grid-column: 1 / -1; }
  .support-chip, .top-button { min-height: 42px; padding-inline: 10px; font-size: 10px; }
  .builder-shell, .curve-panel, .code-panel, .token-panel { border-radius: 20px; }
  .section-heading { min-height: 76px; gap: 10px; padding: 12px; }
  .section-number { flex-basis: 42px; height: 42px; border-radius: 12px; }
  .section-heading h2, .sub-heading h2, .code-heading h2, .token-heading h2 { font-size: 20px; }
  .heading-metrics { display: none; }
  .builder { display: block; }
  .controls { border-right: 0; border-bottom: 1px solid var(--line); }
  .control-section { padding: 17px 14px 18px; }
  .preset-list { grid-template-columns: 1fr 1fr; }
  .preset-list button { grid-template-columns: 25px 1fr; }
  .preset-list button small { grid-column: 2; }
  .preview-panel { height: auto; min-height: 0; grid-template-rows: 44px 620px auto; padding: 10px; }
  .browser-bar { padding-inline: 10px; }
  .browser-actions span { display: none; }
  .preview-stage { overflow-x: auto; overflow-y: hidden; }
  .viewport-track { width: 600px; }
  .site-preview { left: 300px; width: var(--preview-mobile-width); min-width: 300px; max-width: 570px; }
  .resize-handle { left: var(--preview-mobile-handle); }
  .preview-footer { min-height: 92px; display: grid; grid-template-columns: repeat(2, 1fr); padding: 10px 8px; }
  .preview-footer > div { min-width: 0; padding: 5px 10px; border-right: 0; }
  .preview-footer > div:first-child { padding-left: 10px; }
  .analysis-grid { gap: 12px; margin-top: 12px; }
  .curve-panel, .code-panel, .token-panel { padding: 16px 12px; }
  .sub-heading, .code-heading, .token-heading { gap: 12px; }
  .sub-heading { display: block; }
  .sub-heading label { margin-top: 14px; justify-content: space-between; }
  .curve-legend { margin-top: 18px; }
  .curve-readout { grid-template-columns: 1fr; }
  .curve-readout code { grid-column: 1; }
  .code-heading button { min-height: 38px; padding-inline: 10px; font-size: 10px; }
  .code-tabs button { min-width: 68px; }
  .code-panel pre { height: 380px; padding: 14px; }
  .token-heading { display: block; }
  .token-switch { width: fit-content; margin-top: 16px; }
  .token-table { min-width: 780px; }
  .page-footer { align-items: flex-start; padding-top: 22px; }
  .page-footer div { align-items: flex-end; flex-direction: column; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}