/* Documentation and interactive review surface, isolated from the top page. */
.ds-page{background:var(--paper);color:var(--ink)}
.ds-top{background:var(--ink);color:var(--paper);padding:26px 4.5vw;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line)}
.ds-logo{font:400 25px/1 var(--display);letter-spacing:-.06em}.ds-top>a:last-child{font-size:12px;padding:12px 0}
.ds-intro{background:var(--ink);color:var(--paper);display:grid;grid-template-columns:1.15fr 1fr;gap:7vw;padding:65px 4.5vw 75px;align-items:center}
.ds-intro h1{font:700 clamp(30px,3.5vw,58px)/1.5 var(--sans);letter-spacing:.01em;margin:18px 0 24px}
.ds-intro p{font-size:13px;line-height:2.1;color:#cbc9c0;max-width:39em}
.ds-intro .ds-version{font:600 14px BarlowCondensed,Arial,sans-serif;letter-spacing:.06em;color:var(--accent)}
.ds-intro figure{margin:0;min-width:0}.ds-intro img{width:100%;height:330px;object-fit:cover;object-position:62% 55%;display:block}.ds-intro figcaption{font-size:10px;color:var(--muted);margin-top:12px}
.ds-shell{display:grid;grid-template-columns:190px minmax(0,1fr);gap:5vw;max-width:1600px;margin:auto;padding:0 4.5vw}
.ds-nav{align-self:start;position:sticky;top:24px;padding:50px 0;display:flex;flex-direction:column;gap:2px}.ds-nav a{display:flex;gap:16px;font-size:12px;min-height:44px;align-items:center;border-bottom:1px solid #d1cfc4}.ds-nav span{font:600 12px BarlowCondensed,Arial;color:#68675e}.ds-nav a:hover{border-color:var(--ink)}
.ds-section{padding:70px 0;border-bottom:1px solid #c5c3b8;scroll-margin-top:24px}.ds-section h2{font-size:28px;line-height:1.6;margin:0 0 20px}.ds-section h3{font-size:18px;line-height:1.7;margin:0 0 12px}.ds-lead{font-size:14px;line-height:2.1;max-width:58em;color:#505047;margin-bottom:32px}.ds-overline{font:600 14px BarlowCondensed,Arial;color:#646357;margin-bottom:14px}
.ds-principles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.ds-principles>div{border-top:2px solid var(--ink);padding-top:20px}.ds-principles p{font-size:12px;line-height:2;color:#505047}
.ds-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:28px}.ds-color{height:105px;border:1px solid #b9b7ac}.ds-swatch b,.ds-swatch code{display:block;font-size:12px;margin-top:12px}.ds-swatch p{font-size:11px;line-height:1.8;margin-top:8px;color:#505047}
.ds-table-wrap{overflow:auto}.ds-table{width:100%;border-collapse:collapse;font-size:12px;line-height:1.9;text-align:left}.ds-table th{font-size:11px;color:#5b5a50;padding:13px 14px 13px 0;border-bottom:2px solid var(--ink);vertical-align:top;white-space:nowrap}.ds-table td{padding:18px 18px 18px 0;border-bottom:1px solid #cbc9bf;vertical-align:top}.ds-table td:first-child{font-weight:700;min-width:110px}.ds-table code{font-size:11px;overflow-wrap:anywhere}
.ds-type{padding:30px 0;border-top:1px solid #cbc9bf}.ds-type small{display:block;font-size:11px;color:#666459;margin-bottom:18px}.ds-type .ds-display{font:400 clamp(32px,5.1vw,80px)/.95 var(--display);letter-spacing:-.055em}.ds-type .ds-japanese{font-size:clamp(24px,3vw,40px);line-height:1.6;font-weight:700}.ds-type .ds-condensed{font:600 22px/1.2 BarlowCondensed,Arial}.ds-body-sample{font-size:14px;line-height:2.3;max-width:42em}
.ds-spacing{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin:24px 0}.ds-spacing i{height:var(--space);display:block;background:#a79c83;margin-bottom:15px}.ds-spacing span{font:600 14px BarlowCondensed,Arial}.ds-note{border-left:2px solid #9d9076;padding:3px 0 3px 18px;font-size:12px;line-height:2;color:#57564c;margin-top:24px}.ds-layout{display:grid;grid-template-columns:1.2fr 1fr;gap:8%;padding:24px;background:#ddd9ce;margin:25px 0}.ds-layout>div{min-height:130px;background:#bcb6a7;padding:20px;font-size:12px}.ds-layout>div:last-child{background:#f0eee7;line-height:2}
.ds-controls{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:18px 20px;background:#e3e0d6;margin-bottom:30px}.ds-controls label{font-size:12px;display:flex;align-items:center;gap:10px}.ds-controls select{font:inherit;background:var(--paper);border:1px solid #8a877a;padding:9px}.ds-controls button,.ds-replay{font-size:12px;background:transparent;border-bottom:1px solid currentColor;min-height:44px;padding:10px 0}.ds-controls output{font-size:11px;color:#57564c}
.ds-demo{margin:38px 0 55px}.ds-demo-heading{display:flex;justify-content:space-between;gap:25px;align-items:start;margin-bottom:16px}.ds-demo-heading h3{margin-bottom:5px}.ds-demo-heading p{font-size:12px;line-height:1.9;color:#57564c}.ds-replay{flex:none;white-space:nowrap}
.ds-compare{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#55564e;border:1px solid #55564e}.ds-pane{background:var(--ink);color:var(--paper);padding:24px;min-width:0}.ds-pane-label{font-size:11px;color:#bebcb2;margin-bottom:25px;display:flex;justify-content:space-between;gap:15px}.ds-pane-label span{font:600 13px BarlowCondensed,Arial}.ds-demo-stage{min-height:125px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:24px}.ds-demo-stage .button{width:100%;min-width:0;gap:15px;padding:0 20px;font-size:12px;margin:0}.ds-demo-stage .underlined-link{width:100%;font-size:12px}.ds-demo-stage .desktop-nav{margin:0;gap:25px;display:flex;flex-wrap:wrap}.ds-demo-stage .desktop-nav a{font-size:12px}.ds-demo-stage button.underlined-link{background:transparent;text-align:left}
.ds-demo-meta{display:flex;gap:12px 26px;flex-wrap:wrap;padding:15px 0;font-size:11px;line-height:1.9;color:#5c5a50}.ds-demo-meta strong{font-weight:700;color:var(--ink)}
.ds-car-sample{display:block;width:100%;background:none;color:inherit;text-align:left;padding:0;border:0}.ds-car-sample .ds-photo-frame{overflow:hidden;display:block;width:100%;aspect-ratio:1.6}.ds-car-sample img{width:100%;height:100%;object-fit:cover;display:block}.ds-car-sample>span:last-child{display:block;margin-top:16px;font:600 20px BarlowCondensed,Arial}.ds-car-sample:focus-visible{outline-offset:5px}
.ds-row-sample{display:grid;width:100%;grid-template-columns:minmax(0,1fr) 24px;gap:16px;background:none;text-align:left;border-block:1px solid var(--line);padding:24px 10px;font-size:13px;line-height:1.9}.ds-row-sample small{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.ds-row-sample>span:last-child{align-self:center;font:24px Arial}.ds-row-current>span:last-child{transition:transform .3s var(--ease)}.ds-row-current:hover>span:last-child,.ds-row-current.is-demo>span:last-child{transform:translateX(5px)}
.ds-current.is-demo.button-primary{background:var(--accent)}.ds-current.is-demo.button-outline{background:var(--paper);color:var(--ink)}.ds-current.is-demo.button>span,.ds-current.is-demo.underlined-link>span{transform:translateX(5px)}.ds-current-nav.is-demo{opacity:.65}
.ds-timing{display:grid;grid-template-columns:90px 1fr 110px;gap:20px;align-items:center;border-top:1px solid #cbc9bf;padding:20px 0;font-size:12px}.ds-timing i{display:block;height:9px;width:var(--length);background:var(--ink)}.ds-timing b{font:600 17px BarlowCondensed,Arial}.ds-priority{display:inline-block;border:1px solid #8a8374;padding:2px 8px;font-size:11px;white-space:nowrap}.ds-priority.high{background:var(--ink);color:var(--paper);border-color:var(--ink)}.ds-end{padding:40px 4.5vw;background:var(--ink);color:var(--muted);font-size:11px;line-height:2;display:flex;justify-content:space-between;gap:25px}.ds-end a{text-decoration:underline;text-underline-offset:4px}
@media(min-width:1600px){.ds-intro img{height:400px}}
@media(max-width:1100px){.ds-shell{grid-template-columns:140px minmax(0,1fr);gap:4vw}.ds-principles{grid-template-columns:1fr}.ds-swatches{grid-template-columns:repeat(3,1fr)}.ds-compare{grid-template-columns:1fr}.ds-pane{padding:24px}.ds-demo-stage{min-height:95px}.ds-intro{gap:4vw}.ds-intro img{height:290px}}
@media(max-width:767px){.ds-top{padding:20px 24px}.ds-logo{font-size:20px}.ds-top>a:last-child{font-size:10px}.ds-intro{display:block;padding:35px 24px 45px}.ds-intro h1{font-size:30px}.ds-intro p{font-size:12px}.ds-intro figure{margin-top:30px}.ds-intro img{height:210px}.ds-shell{display:block;padding:0 24px}.ds-nav{position:static;display:grid;grid-template-columns:1fr 1fr;padding:22px 0;gap:0 20px}.ds-nav a{font-size:11px;gap:10px}.ds-section{padding:40px 0}.ds-section h2{font-size:24px}.ds-lead{font-size:12px}.ds-swatches{grid-template-columns:repeat(2,1fr);gap:22px 16px}.ds-color{height:90px}.ds-type .ds-display{font-size:9vw}.ds-table{font-size:11px;min-width:520px}.ds-table-wrap{margin-right:-24px;padding-right:24px}.ds-spacing{gap:8px}.ds-layout{padding:16px;gap:16px;grid-template-columns:1fr}.ds-layout>div{min-height:80px}.ds-demo-heading{gap:12px}.ds-demo-heading h3{font-size:16px}.ds-demo-heading p{font-size:11px}.ds-replay{font-size:11px}.ds-pane{padding:20px}.ds-demo-stage .button{font-size:11px;padding:0 16px}.ds-controls{padding:16px}.ds-controls label{flex-wrap:wrap}.ds-timing{grid-template-columns:68px 1fr 80px;gap:12px;font-size:11px}.ds-end{display:block;padding:28px 24px}.ds-end>a{display:inline-block;margin-top:18px}.ds-note{font-size:11px}.ds-demo{margin-bottom:40px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.ds-controls output{display:block;flex-basis:100%;min-width:0;min-height:1.9em;line-height:1.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-demo-stage .desktop-nav .speed-nav:is(:hover,:focus-visible,.is-demo){opacity:1}
.ds-controls,.ds-replay{display:none}
.ds-enhanced .ds-controls{display:flex}
.ds-enhanced .ds-replay{display:block}
.ds-state-rules{margin:25px 0 35px;padding:24px;background:#e3e0d6}
.ds-state-rules p{font-size:12px;line-height:2;margin:8px 0}
@media(max-width:767px){.ds-demo-heading{display:block}.ds-demo-heading .ds-replay{margin-left:auto;margin-top:8px}.ds-table-wrap:focus-visible{outline:2px solid #746750;outline-offset:3px}}
.ds-current.is-demo.underlined-link>span{transform:translateX(6px)}
@media(max-width:767px){.ds-table-wrap::before{content:'表は横にスクロールできます →';display:block;font-size:10px;line-height:1.8;color:#686459;margin-bottom:10px}}