@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=DM+Sans:wght@400;600;700;800&family=Noto+Sans+JP:wght@400;600;700;800&display=swap');
:root { color-scheme:light; --paper:#eeeae2; --surface:#faf8f2; --ink:#192620; --muted:#617066; --line:#cbd1c6; --mint:#b9ff52; --violet:#8175ef; font-family:'DM Sans','Noto Sans JP',sans-serif; font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 12% 0%,#f9f3e8,transparent 43%),var(--paper); }
button,input { font:inherit; }
button { cursor:pointer; }
button:disabled,input:disabled { cursor:not-allowed; opacity:.45; }
a { color:inherit; }
h1,h2,h3,p { margin-top:0; }
button:focus-visible,a:focus-visible,input:focus-visible,pre:focus-visible { outline:3px solid var(--violet); outline-offset:4px; }
.page { max-width:1660px; margin-inline:auto; padding:36px clamp(18px,3.4vw,54px); }
.hero { padding:5px 6px 34px; }
.eyebrow { display:flex; align-items:center; gap:12px; margin:0; color:#007d69; font:500 11px 'DM Mono',monospace; letter-spacing:.1em; }
.brand-mark { position:relative; width:20px; height:20px; flex:none; border:2px solid var(--violet); border-radius:6px; }
.brand-mark::after { content:''; position:absolute; left:7px; top:7px; width:14px; height:14px; border-radius:5px; background:var(--mint); z-index:-1; }
h1 { margin:24px 0 22px; font-size:clamp(40px,5vw,83px); line-height:1.03; letter-spacing:0; font-weight:800; }
h1>span { color:var(--violet); }
.hero-bottom { display:flex; justify-content:space-between; align-items:end; gap:25px; }
.lead { margin:0; font-size:clamp(17px,1.5vw,22px); font-weight:600; line-height:1.65; }
.quiet-button { flex:none; min-height:42px; padding:0 16px; border:1px solid var(--ink); border-radius:10px; background:var(--surface); color:var(--ink); font-size:11px; font-weight:800; transition:translate .18s,box-shadow .18s; }
.quiet-button:hover { translate:0 -2px; box-shadow:0 4px 0 #19262025; }
.lab,.code-section,.guide { overflow:clip; border:1px solid var(--line); border-radius:25px; background:var(--surface); box-shadow:0 14px 36px #19262008; }
.lab { container:studio / inline-size; }
.section-heading { display:flex; align-items:center; gap:16px; padding:20px 25px; border-bottom:1px solid var(--line); }
.section-symbol { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:14px; background:#ff755e; color:white; font-size:26px; font-weight:700; }
.section-symbol.violet { background:var(--violet); font-size:18px; }
.section-symbol.dark-symbol { background:var(--ink); color:var(--mint); }
.kicker { margin:0 0 7px; color:#00816a; font:500 11px 'DM Mono',monospace; letter-spacing:.09em; }
.section-heading h2 { margin:0; font-size:clamp(18px,1.8vw,27px); line-height:1.35; }
.chip { margin-left:auto; padding:8px 11px; border-radius:100px; background:#e7ede3; color:#4d6651; font:500 10px 'DM Mono',monospace; white-space:nowrap; }
.chip.dark { color:#d0dac7; background:#314439; }
.lab-grid { display:grid; grid-template-columns:275px minmax(0,1fr); }
.controls { background:#f3f1e9; border-right:1px solid var(--line); }
.control-section { padding:22px 19px; border-bottom:1px solid var(--line); }
.control-section:last-child { border-bottom:0; }
.control-section h3 { margin:0 0 15px; font-size:16px; font-weight:800; }
.pattern-list { display:grid; gap:7px; }
.pattern-list button { display:flex; align-items:center; gap:10px; width:100%; min-height:62px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fcfaf4; color:var(--ink); text-align:left; transition:translate .18s,border-color .18s; }
.pattern-list button:hover { border-color:#748b73; translate:2px 0; }
.pattern-list button[aria-pressed=true] { border-color:var(--ink); background:var(--ink); color:white; }
.pattern-list strong { display:block; font-size:13px; }
.pattern-list small { display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.4; }
.pattern-list button[aria-pressed=true] small { color:#bdcdbb; }
.pattern-icon { display:grid; place-items:center; width:33px; height:33px; flex:none; border-radius:8px; background:#e6ece1; color:var(--ink); line-height:1; }
.pattern-icon svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pattern-icon .grip-icon { fill:currentColor; stroke:none; }
.pattern-list button[aria-pressed=true] .pattern-icon { background:var(--mint); }
.preset-list { display:flex; gap:5px; margin-bottom:20px; }
.preset-list button { flex:1; min-height:33px; padding:4px; border:1px solid var(--line); border-radius:7px; background:#fffdf5; font-size:10px; color:var(--ink); font-weight:700; transition:background .18s; }
.preset-list button:hover { background:#e4ecdc; }
.preset-list button[aria-pressed=true] { background:#d3edb7; border-color:#78965f; }
.range-control { display:block; margin-bottom:19px; font-size:12px; font-weight:700; }
.range-control>span { display:flex; justify-content:space-between; gap:10px; margin-bottom:11px; }
output { color:#665ad0; font:500 11px 'DM Mono',monospace; }
input[type=range] { width:100%; margin:0; accent-color:var(--violet); }
.control-note { margin:11px 0 0; color:var(--muted); font-size:10px; line-height:1.8; }
.segmented { position:relative; display:flex; padding:4px; border:1px solid var(--line); border-radius:10px; background:#e7ebe3; }
.segmented button { position:relative; z-index:1; flex:1; min-height:34px; padding:0 10px; border:0; border-radius:7px; background:transparent; color:#526154; font-size:11px; font-weight:800; white-space:nowrap; }
.segmented button:hover { color:var(--ink); }
.segmented button[aria-pressed=true] { background:#fff; color:#554cbe; box-shadow:0 2px 5px #23342415; }
@supports (anchor-name:--selection) {
  .segmented { anchor-scope:--selection; }
  .segmented button[aria-pressed=true] { anchor-name:--selection; background:transparent; box-shadow:none; }
  .segmented::before { content:''; position:absolute; position-anchor:--selection; top:anchor(top); left:anchor(left); width:anchor-size(width); height:anchor-size(height); border-radius:7px; background:white; box-shadow:0 2px 5px #23342415; transition:top .2s,left .2s,width .2s,height .2s; }
}
.color-row { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.swatch { width:31px; height:31px; border:2px solid #fff; border-radius:50%; background:var(--swatch); box-shadow:0 0 0 1px var(--line); transition:scale .18s; }
.swatch:hover { scale:1.12; }
.swatch[aria-pressed=true] { box-shadow:0 0 0 2px var(--ink); }
.custom-color { display:flex; align-items:center; gap:7px; margin-left:auto; font-size:10px; }
input[type=color] { width:30px; height:30px; padding:2px; border:1px solid var(--line); border-radius:6px; background:white; cursor:pointer; }
.workspace { min-width:0; display:flex; flex-direction:column; background:#e1e8df; }
.workspace-toolbar { display:flex; align-items:center; gap:11px; padding:10px 17px; min-height:46px; border-bottom:1px solid #bac8ba; color:#536b59; background:#d1dbce; font:500 10px 'DM Mono',monospace; }
.window-dots { display:flex; gap:5px; flex:none; }
.window-dots i { width:8px; height:8px; border-radius:50%; background:#ff7362; }
.window-dots i:nth-child(2) { background:#ffc975; }
.window-dots i:nth-child(3) { background:#54c998; }
.preview-settings { display:flex; justify-content:space-between; align-items:end; gap:14px; padding:24px 28px 0; }
.stage-wrap { padding:24px 28px; flex:1; }
#sampleHost { height:100%; }
.workspace-footer { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:18px 25px; border-top:1px solid var(--line); color:var(--muted); font-size:10px; }
.workspace-footer i { display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#60834f; }
.drag-position { padding:20px 28px; border-top:1px solid var(--line); }
.drag-position h3 { font-size:13px; }
.drag-position label { display:flex; align-items:center; gap:15px; margin-top:15px; font-size:11px; }
.drag-position input { flex:1; width:auto; }
.code-section,.guide { margin-top:24px; }
.code-grid { display:grid; grid-template-columns:360px minmax(0,1fr); }
.code-copy { padding:30px; }
.code-copy h3 { font-size:25px; line-height:1.4; }
.code-copy p { color:var(--muted); font-size:12px; line-height:1.9; }
.primary-button { width:100%; min-height:47px; margin-top:8px; padding:10px; border:1px solid #78965f; border-radius:10px; background:var(--mint); color:var(--ink); font-size:12px; font-weight:800; transition:translate .18s,box-shadow .18s; }
.primary-button:hover { translate:0 -2px; box-shadow:0 4px 0 #7091423b; }
.code-warning { margin-top:26px; padding-top:18px; border-top:1px solid var(--line); }
.code-panel { min-width:0; padding:28px; background:#1e2d25; color:#f5f8ee; }
.code-head { display:flex; justify-content:space-between; align-items:center; gap:15px; }
.code-head .kicker { color:var(--mint); }
.code-panel>p { color:#b9cbb3; font-size:11px; line-height:1.7; margin:18px 0 12px; }
.code-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px 8px 18px; border:1px solid #50684e; border-bottom:0; border-radius:11px 11px 0 0; background:#334d36; color:#b3c7a7; font:500 11px 'DM Mono',monospace; }
.code-toolbar button { min-height:34px; padding:0 12px; border:0; border-radius:7px; background:#f8faf0; color:#213721; font-size:11px; font-weight:800; }
.code-toolbar button:hover { background:var(--mint); }
pre { height:335px; margin:0; padding:20px; overflow:auto; border:1px solid #50684e; border-radius:0 0 11px 11px; background:#142119; color:#c4e4b3; font:400 11px/1.65 'DM Mono',monospace; white-space:pre; tab-size:2; }
.steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); }
.steps article { padding:28px; border-right:1px solid var(--line); }
.steps article:last-child { border-right:0; }
.steps article>span { color:#007d69; font:500 11px 'DM Mono',monospace; }
.steps h3 { margin:15px 0 12px; font-size:18px; }
.steps p,.guide-note { margin:0; color:var(--muted); font-size:12px; line-height:1.9; }
.matrix-note { display:flex; align-items:center; gap:30px; margin:0 28px; padding:22px; border:1px solid var(--line); border-radius:12px; background:#eaf0e3; }
.matrix-note code { flex:none; font:500 18px 'DM Mono',monospace; color:#23502b; }
.matrix-note p { margin:0; font-size:12px; line-height:1.8; color:var(--muted); }
.guide-note { padding:24px 28px 12px; }
.sources { margin:0; padding:0 28px 25px; font-size:11px; line-height:1.8; color:var(--muted); }
.page-footer { display:flex; justify-content:space-between; gap:15px; padding:27px 7px 0; color:var(--muted); font:500 10px 'DM Mono',monospace; }
.toast { position:fixed; left:50%; bottom:25px; z-index:10; translate:-50% 8px; max-width:calc(100% - 32px); margin:0; padding:12px 18px; border:1px solid #4d7043; border-radius:10px; color:#f4ffe9; background:#203b23; font-size:12px; opacity:0; pointer-events:none; transition:opacity .2s,translate .2s; }
.toast[data-visible=true] { opacity:1; translate:-50% 0; }
[hidden] { display:none!important; }
@container studio (width < 970px) {
  .lab-grid { display:flex; flex-direction:column; }
  .workspace { order:0; }
  .controls { order:1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-right:0; border-top:1px solid var(--line); }
  .control-section { border-right:1px solid var(--line); }
}
@container studio (width < 560px) {
  .controls { display:block; }
  .pattern-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pattern-list button { flex-direction:column; align-items:start; padding:8px; }
  .pattern-list strong { font-size:11px; }
  .pattern-list small { font-size:10px; }
  .preview-settings { padding:16px 13px 0; flex-wrap:wrap; align-items:start; }
  .preview-settings .kicker { font-size:10px; }
  .segmented button { padding-inline:8px; font-size:10px; }
  .stage-wrap { padding:16px 12px; }
  .workspace-toolbar .chip { display:none; }
  .workspace-footer { flex-direction:column; align-items:start; padding:15px; }
  .control-section { border-right:0; }
}
@media (width < 850px) {
  .page { padding:26px 17px; }
  .hero-bottom { flex-direction:column; align-items:start; gap:17px; }
  .code-grid,.steps { grid-template-columns:1fr; }
  .steps article { border-right:0; border-bottom:1px solid var(--line); }
  .matrix-note { flex-direction:column; align-items:start; gap:14px; }
}
@media (width < 520px) {
  .page { padding:23px 13px; }
  h1 { font-size:42px; overflow-wrap:anywhere; }
  .eyebrow { font-size:10px; line-height:1.6; }
  .lead { font-size:17px; }
  .section-heading { gap:12px; padding:16px; }
  .section-heading>.chip { display:none; }
  .section-symbol { width:40px; height:40px; border-radius:11px; }
  .code-copy,.code-panel { padding:23px; }
  .code-head { flex-direction:column; align-items:start; }
  .page-footer { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto!important; }
  .segmented::before,.quiet-button,.pattern-list button,.primary-button,.swatch,.toast { transition:none; }
}