.hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}.hub-card{padding:16px;background:#111c36;border:1px solid #344264;border-radius:22px;overflow:hidden}.hub-card img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:14px}.hub-card a{color:#b4d9ff;text-decoration:none}.hub-card p{color:#b9c4d9;line-height:1.8}.hub-shortcuts{display:flex;justify-content:space-around;gap:16px;margin:30px 0}.hub-shortcuts a{display:grid;text-align:center;gap:12px;color:inherit;text-decoration:none}.hub-shortcuts i{display:grid;place-items:center;border-radius:50%;width:90px;height:90px;background:linear-gradient(135deg,#6146b3,#176c8e);font-size:36px;font-style:normal}.hub-detail{max-width:850px;margin:auto}.hub-cover{width:100%;max-height:340px;object-fit:cover;border-radius:24px}.hub-body{white-space:pre-wrap;line-height:2;font-size:18px;margin:24px 0}.hub-detail button{margin:15px 5px}.hub-compare{position:relative;aspect-ratio:3/2}.hub-compare img{position:absolute;width:100%;height:100%;object-fit:cover}.hub-compare{touch-action:pan-y;user-select:none;cursor:ew-resize;overflow:hidden;border-radius:16px}.hub-compare img{inset:0;pointer-events:none}.hub-compare .hub-after{clip-path:inset(0 50% 0 0)}.hub-divider{position:absolute;left:50%;top:0;bottom:0;width:3px;background:#16a9f7;box-shadow:0 0 8px #087bd0;transform:translateX(-50%);pointer-events:none}.hub-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:3px solid #fff;background:#049de8;color:white;font-size:23px}.hub-compare-label{display:block;margin:12px 0}#hubRange{width:100%;min-height:48px;direction:ltr}#bottom{display:flex!important;position:fixed;bottom:0;left:0;right:0;z-index:40;justify-content:space-around;background:#0c1733f5;border-top:1px solid #445477;padding:10px 8px max(12px,env(safe-area-inset-bottom))}#bottom button{display:grid;gap:4px;justify-items:center;background:transparent;border:0;color:#b6c8e5;min-height:45px}#bottom button.active{color:#78caff}#bottom i{font-size:23px;font-style:normal}body{padding-bottom:90px}@media(max-width:1100px){.hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.hub-grid{gap:10px}.hub-card{padding:10px}.hub-card h3{font-size:15px}.hub-card p{font-size:12px}.hub-shortcuts i{width:65px;height:65px}.hub-shortcuts a{font-size:12px}.hub-body{font-size:16px}}

#photoCompare{width:100%;min-height:48px;direction:ltr}.hub-detail input[type=file]{display:block;margin:20px 0;max-width:100%}.hub-detail label{display:block;margin:16px 0}

.hub-range{display:block;width:100%;min-height:44px;direction:ltr}.hub-comparison .hub-compare img{height:100%;border-radius:0}.compare-before,.compare-after{position:absolute;bottom:10px;padding:4px 10px;border-radius:8px;background:#0008;color:#fff;pointer-events:none;font-size:12px}.compare-before{right:10px}.compare-after{left:10px}.hub-card .primary{display:block;margin-top:16px;text-align:center}.hub-shortcuts{flex-wrap:wrap}
.studio-layout{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:24px;align-items:start}.studio-layout form{display:grid;gap:12px;padding:20px;border:1px solid #aab5c555;border-radius:20px}.studio-layout label{display:grid;gap:6px}.studio-layout input,.studio-layout select,.studio-layout textarea{width:100%;box-sizing:border-box;min-height:44px}.studio-layout button{min-height:44px}.studio-layout canvas{width:100%;height:auto;display:block;touch-action:none;border-radius:12px;background:white}.studio-layout canvas:focus-visible{outline:3px solid #09f}@media(max-width:700px){.studio-layout{grid-template-columns:1fr}.studio-layout>div{grid-row:1}.studio-layout canvas{max-height:none}}
.studio-layout button{background:#087fc2;color:#fff!important;border:1px solid #087fc2;border-radius:12px;padding:12px;font-weight:600}.studio-layout button:hover{background:#065f94}.studio-layout select,.studio-layout textarea{border:1px solid #9bafc6;border-radius:9px;padding:10px;background:#fff;color:#18324c}.studio-layout input[type=color]{padding:3px;border:1px solid #9bafc6;border-radius:9px}.studio-layout input[type=file]{font-size:14px}.reference-layout .hub-card>a:not(.primary){color:#0869a3}.reference-layout .hub-card .primary{background:#087fc2;color:#fff;padding:12px;border-radius:12px}