:root { color-scheme:light; font:16px/1.55 system-ui,"PingFang SC",sans-serif; color:#202621; background:#f4f3ee; }
* { box-sizing:border-box; }
body { margin:0; }
.wrap { max-width:1700px; margin:auto; padding-inline:clamp(15px,3vw,48px); }
.top { border-bottom:1px solid #c5c9bc; }
.top .wrap,.toolbar,.panel-title,.selectors { display:flex; align-items:center; gap:12px; justify-content:space-between; }
.top .wrap { min-height:64px; }
a { display:inline-flex; align-items:center; min-height:44px; color:inherit; border-radius:4px; padding:2px 8px; text-underline-offset:4px; }
main { padding-block:27px 48px; }
h1,h2,p { margin:0; }
h1 { font-size:clamp(34px,4.6vw,54px); letter-spacing:-.045em; line-height:1.18; }
.heading p { margin:8px 0 14px; color:#505a50; }
.toolbar { padding-bottom:14px; border-bottom:1px solid #a9b2a5; flex-wrap:wrap; gap:6px; }
.switch { padding:3px; border:1px solid #b9c2b3; border-radius:6px; display:inline-flex; margin:0; }
.switch legend,.switch input { position:absolute; width:1px; height:1px; clip-path:inset(50%); }
.switch label { position:relative; display:inline-flex; align-items:center; min-height:44px; padding-inline:16px; border-radius:4px; cursor:pointer; }
.switch label:has(:checked) { background:#25342a; color:white; }
.panels { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(14px,1.8vw,28px); row-gap:22px; }
.panel { min-width:0; }
.panel-head { padding:13px 0 10px; }
.panel-title h2 { font-size:clamp(17px,1.8vw,24px); font-weight:640; letter-spacing:-.035em; }
.panel-title .full,.toolbar>a,.top a { font-size:14px; }
.selectors { justify-content:start; gap:12px; margin-top:2px; flex-wrap:wrap; }
.selectors label { display:flex; align-items:center; gap:5px; font-size:13px; color:#4a564c; }
select { color:#212d24; font:inherit; min-height:44px; padding-inline:6px; background:#fffef9; border:1px solid #b9c2b3; border-radius:4px; }
.viewport { position:relative; width:100%; height:360px; overflow:hidden; outline:1px solid #bfc6b8; background:#eeefe7; }
iframe { display:block; border:0; position:absolute; top:0; left:0; width:1080px; height:680px; transform-origin:0 0; }
a:focus-visible,select:focus-visible,.switch label:has(:focus-visible) { outline:3px solid #9d5026; outline-offset:2px; }
@media(hover:hover) and (pointer:fine) {
  a:hover,.switch label:not(:has(:checked)):hover,select:hover { background:#e4e7dc; }
  .switch label:has(:checked):hover { background:#354b3b; }
}
a:active,select:active,.switch label:active { box-shadow:inset 0 0 0 2px #9b7452; }
@media(max-width:850px) {
  .panels { grid-template-columns:minmax(0,1fr); }
  .panel-head { padding-top:10px; }
}
@media(max-width:440px) {
  .selectors { gap:7px; }
  .switch label { padding-inline:11px; }
  main { padding-top:18px; }
}

.presets {display:flex; align-items:center; flex-wrap:wrap; gap:5px;}
.presets button {min-height:44px; font:inherit; font-size:14px; border:1px solid #b9c2b3; border-radius:4px; padding-inline:10px; background:#fffef9; color:#26352a; cursor:pointer;}
.presets button:focus-visible {outline:3px solid #9d5026; outline-offset:2px;}
.presets button:active {box-shadow:inset 0 0 0 2px #9b7452;}
@media(hover:hover) and (pointer:fine) {.presets button:hover {background:#e4e7dc;}}

.top nav { display:flex; flex-wrap:wrap; gap:4px 12px; }
@media(max-width:600px){.top .wrap{flex-wrap:wrap;gap:0;padding-block:5px}}