:root{font-family:system-ui,sans-serif;color:#141313;background:#ecebe8}*{box-sizing:border-box}body{margin:0}header{padding:18px 24px;background:white;display:flex;gap:24px;align-items:center;justify-content:space-between;border-bottom:1px solid #d5d3ce}strong{font-size:18px}small{display:block;color:#68645f;margin-top:5px;font-size:12px}nav,.links,.controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}button,select{font:inherit;border:1px solid #ccc9c2;border-radius:8px;padding:9px 12px;background:white;color:#141313;cursor:pointer}button[aria-pressed=true]{background:#141313;color:white;border-color:#141313}a{color:inherit;font-size:13px}.links{gap:16px}.controls{padding:16px 24px;font-size:13px}.controls label{display:flex;align-items:center;gap:8px}#status{margin-left:auto;color:#68645f}main{padding:0 24px 24px;display:grid;gap:24px;align-items:start}main.grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1500px;margin:auto}main.single{grid-template-columns:minmax(0,650px);justify-content:center}main.compare{grid-template-columns:repeat(2,minmax(0,1fr));max-width:1500px;margin:auto}figure{margin:0;min-width:0}figcaption{font-size:13px;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}.frame{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#141313;box-shadow:0 1px 8px #0002}iframe{position:absolute;top:0;left:0;width:1080px;height:1350px;border:0;transform-origin:top left;pointer-events:none}.note{font-size:12px;color:#68645f;margin:0 24px 24px;text-align:center}button:disabled{opacity:.35;cursor:default}@media(max-width:900px){header{align-items:flex-start;flex-direction:column;gap:14px}main.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){main.grid{grid-template-columns:1fr}.controls{gap:6px}#status{width:100%;margin:4px 0}}