.design-note{padding:9px 24px;border-bottom:1px solid #bbb;font:12px/1.5 Arial,'Yu Gothic',sans-serif;display:flex;gap:22px;background:#fafafa;color:#333}.design-note span{margin-right:auto}.design-note a{color:inherit;white-space:nowrap}
html[data-design] .inverse-panel{margin-top:0}
html[data-design] .plot-title{flex-wrap:wrap}
html[data-design] #experiment{display:flex;flex-direction:column}
html[data-design] .inverse-panel{order:2;margin-top:28px}
html[data-design] .workspace{order:1}
html[data-design] #experiment>details{order:3}

/* 1 — a graphing workbench: compact controls and a large working area. */
html[data-design="1"] body{font-size:13px}
html[data-design="1"] header,html[data-design="1"] main,html[data-design="1"] footer{max-width:1600px}
html[data-design="1"] header{padding:17px 24px;border-bottom:1px solid #aaa}
html[data-design="1"] h1{font-size:18px}
html[data-design="1"] main{padding:0 24px}
html[data-design="1"] .workspace{grid-template-columns:230px minmax(0,1fr);gap:24px}
html[data-design="1"] aside{background:#f7f7f7;border:1px solid #ddd;padding:14px 16px}
html[data-design="1"] .species-control{padding:9px 0}
html[data-design="1"] .results{display:flex;flex-direction:column}
html[data-design="1"] .results>.plot{order:0;margin-top:0;border:0;padding-top:0}
html[data-design="1"] .comparison{order:1;border-top:1px solid #ddd;padding-top:14px;margin-top:10px}
html[data-design="1"] .color-field{height:90px}
html[data-design="1"] .color-field>div{width:62px;height:62px}
html[data-design="1"] .plot-grid{order:2}
html[data-design="1"] #gamut{order:3}
html[data-design="1"] .inverse-panel{border:0;border-top:1px solid #bbb;padding:16px 0}

/* 2 — an interactive science article: one reading column. */
html[data-design="2"] header,html[data-design="2"] main,html[data-design="2"] footer{max-width:900px}
html[data-design="2"] header{display:block;padding-top:36px;padding-bottom:25px}
html[data-design="2"] h1{font-size:28px;font-weight:500;letter-spacing:-.6px;margin-bottom:8px}
html[data-design="2"] .workspace{display:flex;flex-direction:column;gap:26px}
html[data-design="2"] .results{order:0}
html[data-design="2"] aside{order:1;border:0;border-top:1px solid #aaa;padding:20px 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 24px}
html[data-design="2"] aside>h2,html[data-design="2"] aside>h3,html[data-design="2"] aside>.control,html[data-design="2"] aside>.hint,html[data-design="2"] aside>.actions{grid-column:1/-1}
html[data-design="2"] aside>.control{max-width:420px;width:100%}
html[data-design="2"] .color-field{height:125px}
html[data-design="2"] .color-field>div{width:80px;height:80px}
html[data-design="2"] .plot{padding-top:22px;margin-top:24px}
html[data-design="2"] .inverse-panel{padding:20px 0;border:0;border-top:1px solid #aaa}
html[data-design="2"] button{border:0;border-bottom:1px solid #777;padding-left:0;padding-right:0;margin-right:14px;background:white}
html[data-design="2"] .species-control h4{font-size:14px}

/* 3 — a data report: chart and compact controls, with serif headings. */
html[data-design="3"] body{background:#f8f8f8}
html[data-design="3"] header,html[data-design="3"] main,html[data-design="3"] footer{max-width:1200px;background:#fff}
html[data-design="3"] header{border-top:5px solid #222;margin-top:22px;padding-top:22px;padding-bottom:24px}
html[data-design="3"] h1{font:600 30px/1.3 Georgia,'Yu Mincho',serif}
html[data-design="3"] .workspace{grid-template-columns:minmax(0,1fr) 240px;gap:32px}
html[data-design="3"] aside{grid-column:2;grid-row:1;border-right:0;border-left:1px solid #ccc;padding:0 0 20px 20px}
html[data-design="3"] .results{grid-column:1;grid-row:1}
html[data-design="3"] .results>.plot h2{font:600 20px Georgia,'Yu Mincho',serif}
html[data-design="3"] .color-field{height:100px}
html[data-design="3"] .color-field>div{width:64px;height:64px}
html[data-design="3"] .inverse-panel{background:#fafafa;border:0;border-top:1px solid #bbb;border-bottom:1px solid #bbb}
html[data-design="3"] .plot-grid{grid-template-columns:1fr;gap:0}
html[data-design="3"] #chromaticity{max-width:520px}

/* 4 — a reference sheet: dense rows and strong table rules. */
html[data-design="4"] body{font-family:Arial,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;font-size:13px}
html[data-design="4"] header,html[data-design="4"] main,html[data-design="4"] footer{max-width:1100px}
html[data-design="4"] header{border-bottom:3px double #111;padding-top:20px;padding-bottom:14px}
html[data-design="4"] h1{font-size:25px;font-weight:400}
html[data-design="4"] .workspace{display:flex;flex-direction:column;gap:18px}
html[data-design="4"] aside{border:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 20px}
html[data-design="4"] aside>h2,html[data-design="4"] aside>h3,html[data-design="4"] aside>.control,html[data-design="4"] aside>.hint,html[data-design="4"] aside>.actions{grid-column:1/-1}
html[data-design="4"] aside>h3{margin-top:4px}
html[data-design="4"] aside>.control{max-width:460px;width:100%;margin-top:0}
html[data-design="4"] .species-control{border-top:0;border-bottom:1px solid #111;padding:8px 0}
html[data-design="4"] .species-control h4 span{display:block;margin-left:0}
html[data-design="4"] button{font-family:inherit;padding:4px 10px;font-size:12px;border-color:#555}
html[data-design="4"] .comparison{border-top:3px double #111;padding-top:14px}
html[data-design="4"] .color-field{height:75px}
html[data-design="4"] .color-field>div{width:50px;height:50px}
html[data-design="4"] .caption,html[data-design="4"] input,html[data-design="4"] svg text{font-family:inherit}
html[data-design="4"] .plot{margin-top:12px;padding-top:10px;border-color:#777}
html[data-design="4"] h2{font-weight:600}
html[data-design="4"] .inverse-panel{border:0;border-top:3px double #111;padding:12px 0}

/* 5 — a public information tool: large labels and explicit sections. */
html[data-design="5"] header,html[data-design="5"] main,html[data-design="5"] footer{max-width:1050px}
html[data-design="5"] header{display:block;border-bottom:5px solid #111;padding-top:30px;padding-bottom:22px}
html[data-design="5"] h1{font-size:32px;font-weight:700;margin-bottom:8px;letter-spacing:-.5px}
html[data-design="5"] h2{font-size:19px}
html[data-design="5"] .workspace{grid-template-columns:250px minmax(0,1fr);gap:32px}
html[data-design="5"] .species-control h4{font-size:16px}
html[data-design="5"] .species-control .control label{font-size:13px}
html[data-design="5"] .species-control{padding:14px 0}
html[data-design="5"] button{border:2px solid #111;font-weight:600;padding:8px 12px}
html[data-design="5"] input[type=range]{height:4px;background:#999}
html[data-design="5"] input[type=range]::-webkit-slider-thumb{height:22px;width:14px}
html[data-design="5"] .plot-grid{grid-template-columns:1fr;gap:0}
html[data-design="5"] .color-field{height:110px}
html[data-design="5"] .color-field>div{width:70px;height:70px}
html[data-design="5"] .inverse-panel{border:0;border-top:3px solid #111;padding:20px 0}
html[data-design="5"] summary{font-size:14px;font-weight:600}

@media(max-width:850px){html[data-design="1"] .workspace{grid-template-columns:190px minmax(0,1fr);gap:18px}html[data-design="3"] .workspace{grid-template-columns:minmax(0,1fr) 190px;gap:18px}html[data-design="5"] .workspace{grid-template-columns:210px minmax(0,1fr);gap:20px}html[data-design="2"] aside,html[data-design="4"] aside{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.design-note{padding:8px 16px;gap:12px;flex-wrap:wrap}.design-note span{width:100%}html[data-design] header{margin-top:0;padding:20px}html[data-design] h1{font-size:25px}html[data-design] .workspace{display:flex;flex-direction:column;gap:20px}html[data-design] .workspace aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding:12px 0;border:0;border-bottom:1px solid #bbb}html[data-design] aside>.control,html[data-design] aside>h2,html[data-design] aside>h3,html[data-design] aside>.hint,html[data-design] aside>.actions{grid-column:1/-1}html[data-design="1"] .workspace aside{padding:12px}html[data-design="2"] .results{order:0}html[data-design="2"] aside{order:1}html[data-design="3"] .results{order:0}html[data-design="3"] aside{order:1}html[data-design="5"] .results{order:0}html[data-design="5"] aside{order:1}html[data-design] main{padding:0 20px}html[data-design] .plot-grid{grid-template-columns:1fr}}

/* Design 4: controls and results share the working viewport. */
html[data-design="4"] header,html[data-design="4"] main,html[data-design="4"] footer{max-width:1420px}
html[data-design="4"] header{padding-top:12px;padding-bottom:10px}
html[data-design="4"] #experiment{padding-top:14px}
html[data-design="4"] .workspace{display:grid;grid-template-columns:320px minmax(0,1fr);gap:26px;align-items:start}
html[data-design="4"] aside{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
html[data-design="4"] aside>h2{margin-bottom:2px}
html[data-design="4"] aside>h3{margin:6px 0 3px}
html[data-design="4"] aside>.control{margin:0 0 6px}
html[data-design="4"] input[type=range]{margin-top:10px;margin-bottom:5px}
html[data-design="4"] aside>.hint{margin:3px 0;line-height:1.45}
html[data-design="4"] .species-control{padding:6px 0;border-bottom:0}
html[data-design="4"] .species-control h4{margin:0}
html[data-design="4"] .species-control h4 span{display:inline;margin-left:4px}
html[data-design="4"] .species-control .control{margin:3px 0}
html[data-design="4"] .calculated-width{margin:3px 0;font-size:10px}
html[data-design="4"] .actions{margin-top:10px}
html[data-design="4"] .results{min-width:0;position:sticky;top:12px}
html[data-design="4"] .comparison{padding-top:8px;gap:4px 16px}
html[data-design="4"] .color-field{height:64px}
html[data-design="4"] .color-field>div{width:46px;height:46px}
html[data-design="4"] .caption{margin-top:4px}
html[data-design="4"] .plot{padding-top:7px;margin-top:8px}
html[data-design="4"] .plot h2{margin-bottom:4px}
html[data-design="4"] .plot-grid{grid-template-columns:1fr 1fr;gap:18px}
.mobile-result{display:none}
@media(max-width:960px){
html[data-design="4"] .workspace{grid-template-columns:280px minmax(0,1fr);gap:18px}
html[data-design="4"] main{padding:0 20px}
html[data-design="4"] .plot-grid{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
html[data-design="4"] .workspace{display:flex;flex-direction:column;gap:14px}
html[data-design="4"] .workspace aside{width:100%;padding-top:0}
html[data-design="4"] .results{position:static;width:100%}
html[data-design="4"] .mobile-result{display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:2;width:100%;padding:10px 0;background:#fff;border-bottom:1px solid #777}
#mobile-color{width:54px;height:24px;border:1px solid #bbb;margin-left:auto}
html[data-design="4"] header{display:flex;padding:12px 20px}
}

html[data-design="4"] .width-detail{border:0;padding:0;margin:4px 0;font-size:10px;color:#555}
html[data-design="4"] .width-detail small{font-size:10px}
html[data-design="4"] #chromaticity{height:170px}

html[data-design="4"] .inverse-panel{order:0;margin:0 0 16px;padding:8px 0;border-top:0;border-bottom:1px solid #777}
html[data-design="4"] .search-controls{flex-wrap:nowrap;gap:10px;min-height:32px}
html[data-design="4"] .search-controls label{white-space:nowrap}
#found-swatch{display:inline-block;width:40px;height:30px;border:1px solid #aaa;flex-shrink:0;background:repeating-linear-gradient(135deg,#fff 0 4px,#eee 4px 5px)}
html[data-design="4"] #search-status{font-size:11px;width:auto}
@media(max-width:600px){html[data-design="4"] h1{font-size:22px}html[data-design="4"] .search-controls{gap:7px;font-size:11px}html[data-design="4"] .search-controls button{padding:4px 6px}html[data-design="4"] .search-controls input[type=color],html[data-design="4"] #found-swatch{width:30px;height:28px}html[data-design="4"] #search-status{font-size:10px;min-width:0}}
/* A single outline, matching the result swatch at both breakpoints. */
html[data-design="4"] .search-controls input[type=color]{appearance:none;-webkit-appearance:none;box-sizing:border-box;width:40px;height:30px;padding:0;border:1px solid #aaa;border-radius:0;flex-shrink:0;overflow:hidden;background:transparent}
html[data-design="4"] .search-controls input[type=color]::-webkit-color-swatch-wrapper{padding:0}
html[data-design="4"] .search-controls input[type=color]::-webkit-color-swatch{border:0;border-radius:0}
html[data-design="4"] .search-controls input[type=color]::-moz-color-swatch{border:0;border-radius:0}
@media(max-width:600px){html[data-design="4"] .search-controls input[type=color]{width:30px;height:28px}}

html[data-design="4"] .plot-grid{grid-template-columns:minmax(0,1fr)}

/* Align the search with its results in the two-column layout. */
html[data-design="4"] .comparison{border-top:0;padding-top:0}
@media(min-width:761px){
 html[data-design="4"] .workspace{grid-template-areas:"parameters search" "parameters results";grid-template-rows:auto 1fr;row-gap:12px}
 html[data-design="4"] .workspace>aside{grid-area:parameters}
 html[data-design="4"] .workspace>.inverse-panel{grid-area:search;margin:0;padding:0 0 10px}
 html[data-design="4"] .workspace>.results{grid-area:results}
 html[data-design="4"] .search-controls{flex-wrap:wrap}
}
@media(max-width:760px){
 html[data-design="4"] .workspace>.inverse-panel{order:-1;width:100%;margin:0}
}

/* Desktop sizing: browser zoom at 75% yields the former 100% scale. */
@media(min-width:1280px){html[data-design="4"] body{zoom:1.3333333333}}

html[data-design="4"] .controls-column{min-width:0;display:flex;flex-direction:column;gap:16px}
html[data-design="4"] .controls-column>.inverse-panel{margin:0;padding:0 0 12px}
html[data-design="4"] .controls-column>aside{width:100%}
@media(min-width:761px){
 html[data-design="4"] .workspace{grid-template-columns:clamp(360px,40%,460px) minmax(0,1fr);grid-template-areas:"controls results";grid-template-rows:auto;align-items:stretch}
 html[data-design="4"] .controls-column{grid-area:controls}
 html[data-design="4"] .workspace>.results{grid-area:results;position:static;align-self:stretch;display:flex;flex-direction:column}
 html[data-design="4"] .color-field{height:180px}
 html[data-design="4"] .color-field>div{width:114px;max-width:80%;aspect-ratio:1;height:auto}
 html[data-design="4"] .results>.plot{flex:1;display:flex;flex-direction:column}
 html[data-design="4"] #spectrum{flex:1;height:0;min-height:160px}
}
@media(max-width:760px){
 html[data-design="4"] .controls-column{width:100%}
 html[data-design="4"] #spectrum{height:240px}
 html[data-design="4"] .search-controls{flex-wrap:wrap}
}