/* Match the homepage's coral masthead, paper background and ink borders. */
main{max-width:1180px;padding:26px 32px 44px}
.topbar{margin:0!important;padding:16px 20px;gap:16px}
.topbar .brand{font-size:25px!important;white-space:nowrap}
.topbar .brand:before{width:32px;height:32px;font-size:24px}
.lang{display:inline-flex;gap:3px;align-items:center;flex-shrink:0}
.lang a{padding:8px 12px;text-decoration:none;font-size:13px}
header{padding:38px 0 28px;border-bottom:1px solid #aaa69d;margin-bottom:28px}
h1{font-size:34px!important;font-weight:850;line-height:1.35;margin:12px 0}
header p{max-width:760px;margin:0;font-size:14px;color:var(--lab-muted)}
.badge{color:#4d6048;font-size:12px}
.panel{padding:26px!important}
.drop{padding:38px 20px;background:#fff!important}
.drop h2{font-size:22px;line-height:1.4}
.drop p{font-size:14px;color:var(--lab-muted)}
.drop label{background:var(--lab-purple);color:#fff!important;border:2px solid var(--lab-ink);border-radius:4px;box-shadow:2px 2px 0 var(--lab-ink);font-weight:800}
.drop label:hover{background:var(--lab-yellow);color:var(--lab-ink)!important}
.drop:focus-within{outline:3px solid var(--lab-purple)}
.settings{padding:24px 0}.settings input{accent-color:var(--lab-purple)}
.settings label{font-weight:750;font-size:14px}.settings output{font-size:14px}
button.btn,.download{min-height:44px;font-size:14px}
.download{background:var(--lab-yellow);color:var(--lab-ink);border:2px solid var(--lab-ink);border-radius:4px;box-shadow:2px 2px 0 var(--lab-ink);font-weight:750}
.download:hover{background:#fff9dd}
.result{border:2px solid var(--lab-ink);border-radius:4px;background:#fff;box-shadow:2px 2px 0 var(--lab-ink)}
.result img{background:var(--lab-paper);border:1px solid #b9b6ad;border-radius:3px}
.result strong{font-size:15px}.result p{color:var(--lab-muted)}.result p.error{color:#b42318}
#status{color:var(--lab-muted);font-size:14px}
.info{gap:18px;padding:28px 0}
.info>div{padding:18px;background:var(--lab-card);border:2px solid var(--lab-ink);border-radius:5px;box-shadow:3px 3px 0 var(--lab-ink)}
.info>div:first-child{background:#ffe372}.info>div:nth-child(2){background:#e4d8fb}.info>div:nth-child(3){background:#f9dcd6}
.info h3{margin:0 0 10px;font-size:16px}.info p{margin:0;font-size:13px;color:#474741}
footer{border-top:1px solid #aaa69d;color:var(--lab-muted)}footer a{color:var(--lab-purple)}
::selection{background:var(--lab-yellow);color:var(--lab-ink)}
@media(max-width:600px){main{padding:18px 20px 32px}.topbar{padding:12px!important;gap:8px}.topbar .brand{font-size:17px!important}.topbar .brand:before{width:24px;height:24px;font-size:18px;margin-right:6px}.lang a{padding:7px 8px;font-size:11px}header{padding:28px 0 22px;margin-bottom:22px}h1{font-size:28px!important}.panel{padding:16px!important}.drop{padding:28px 12px}.drop h2{font-size:20px}.info{gap:16px}}
@media(max-width:360px){main{padding-left:12px;padding-right:12px}.topbar .brand{font-size:15px!important}.lang a{padding:7px 5px}}
.hoop-drop{overflow:hidden;position:relative;padding:28px 20px 22px}.hoop-drop.drag{background:#fff9dd!important;border-color:#6234d8!important}.hoop-scene{position:relative;width:min(320px,100%);height:230px;margin:12px auto 0}.basket{display:block;width:100%;height:100%}.board-label{position:absolute;top:34px;left:0;width:100%;font-size:15px;font-weight:850;color:#191919}.shot-file{position:absolute;top:100px;left:calc(50% - 22px);width:44px;height:52px;opacity:0}.shot-file svg{display:block;width:100%;height:100%}.hoop-drop.drag .shot-file{opacity:1;transform:translate(-75px,55px) rotate(-18deg)}.hoop-drop.shooting .shot-file{animation:hoop-shot 200ms ease-out forwards}.hoop-drop.shooting .basket{animation:hoop-net 200ms ease-out}.hoop-hint{margin:14px 0 0;font-size:12px!important;min-height:20px}.hoop-drop[data-busy="true"] label{opacity:.5;cursor:wait}
@keyframes hoop-shot{0%{opacity:1;transform:translate(-100px,65px) rotate(-20deg)}45%{opacity:1;transform:translate(0,-45px) rotate(6deg)}80%{opacity:1;transform:translate(0,40px) scale(.8)}100%{opacity:0;transform:translate(0,85px) scale(.6)}}
@keyframes hoop-net{0%,60%,100%{transform:scale(1)}80%{transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.hoop-drop.shooting .shot-file,.hoop-drop.shooting .basket{animation:none}.hoop-drop.drag .shot-file{transform:none}}
@media(max-width:600px){.hoop-drop{padding:24px 12px 18px}.hoop-drop>p{font-size:12px}.hoop-scene{height:210px;width:292px;max-width:100%}.board-label{top:31px}.shot-file{top:90px}}
.seo-guide{margin:0 0 28px;padding:24px;background:var(--lab-card);border:2px solid var(--lab-ink);border-radius:5px;box-shadow:3px 3px 0 var(--lab-ink)}.seo-guide h2{font-size:21px;line-height:1.45;margin:26px 0 16px;text-wrap:balance}.seo-guide h2:first-child{margin-top:0}.seo-guide ol{padding-left:24px;font-size:14px;line-height:1.9;color:var(--lab-muted)}.faq details{border-top:1px solid #d1cec5;padding:14px 0}.faq details:last-child{border-bottom:1px solid #d1cec5}.faq summary{font-size:15px;font-weight:750;cursor:pointer;line-height:1.6}.faq p{margin:10px 0 0;font-size:14px;color:var(--lab-muted);max-width:850px}.faq summary:focus-visible{outline:3px solid var(--lab-purple);outline-offset:4px}.related-tools{display:flex;flex-wrap:wrap;gap:10px}.related-tools a{padding:10px 14px;color:var(--lab-purple);border:1px solid #b9b6ad;border-radius:4px;font-size:14px;text-decoration:none}.related-tools a:hover{background:var(--lab-yellow)}@media(max-width:600px){.seo-guide{padding:18px 16px}.seo-guide h2{font-size:19px}.faq summary{font-size:14px}}