:root{color-scheme:dark;font:14px system-ui;color:#e4ebe7;background:#101b24}*{box-sizing:border-box}body{height:100dvh;margin:0;padding:18px 24px;display:flex;flex-direction:column;gap:12px}header{display:flex;justify-content:space-between;align-items:center}small{font-size:10px;letter-spacing:2px;color:#9badb4}h1{font-size:24px;margin:4px 0}p{margin:0;color:#9badb4;font-size:12px}a{color:#e5bd7a;text-decoration:none}main{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:10px}article{border:1px solid #354651;border-radius:8px;background:#182731;display:flex;flex-direction:column;align-items:center;min-height:0;padding:8px}h2{margin:0 0 5px;font-size:13px;font-weight:600;width:100%;display:flex;justify-content:space-between}h2 a{font-size:10px;font-weight:400}.pair{display:flex;justify-content:center;gap:14px;flex:1;min-height:0;width:100%;align-items:center}.picture{display:flex;flex-direction:column;align-items:center;min-height:0;max-height:100%;width:46%}canvas{aspect-ratio:1;max-height:calc(100% - 17px);max-width:100%;width:auto;height:135px;object-fit:contain}span{font-size:10px;color:#9badb4;margin-top:2px}.new span{color:#e5bd7a}article p{font-size:10px;text-align:center;margin-top:5px;min-height:26px}footer{font-size:11px;color:#9badb4}@media(max-height:800px){body{padding:10px 18px;gap:8px}h1{font-size:20px}main{gap:6px}article{padding:6px}article p{font-size:9px;min-height:22px}canvas{height:95px}.pair{gap:8px}}@media(max-width:800px){main{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr))}h1{font-size:17px}.pair{gap:4px}article p{display:none}}

:root .focused main{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr}
.focused article{padding:18px 12px;justify-content:center}
.focused h2{font-size:17px;margin-bottom:16px}
.focused .pair{flex:0 1 auto;margin:auto 0 20px;gap:12px}
.focused .picture canvas{width:100%;height:auto;max-height:280px;max-width:280px}
.focused article p{font-size:12px;min-height:0;line-height:1.5}
.focused .detail-label{margin-top:auto;padding-top:36px;font-size:11px;color:#8ea5ad}
.angle-strip{display:flex;justify-content:space-evenly;gap:8px;width:100%;margin-top:14px}
.sample{display:flex;flex-direction:column;align-items:center;min-width:0}
.sample canvas{width:60px;height:60px;max-height:none}
.focused footer{margin-top:4px}
@media(max-height:800px){.focused article{padding:12px 8px}.focused h2{font-size:15px;margin-bottom:8px}.focused .detail-label{padding-top:20px}.focused article p{font-size:10px}}
@media(max-width:900px){.focused .pair{gap:6px}.focused .sample canvas{width:44px;height:44px}.focused .detail-label{font-size:9px}.focused article p{display:block}.focused h2{font-size:13px}.focused footer{font-size:9px}}

.all-designs{margin-left:16px;white-space:nowrap}header>div{margin-right:auto}.remaining main{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}.remaining canvas{height:160px}.remaining article p{min-height:16px}.remaining .pair{gap:20px}@media(max-height:800px){.remaining canvas{height:115px}.remaining article p{min-height:16px}}@media(max-width:900px){header>a{font-size:10px}.remaining article p{display:block;font-size:9px}.remaining .pair{gap:8px}.remaining canvas{height:110px}}