#finder.mechanical-finder{position:relative;container-type:inline-size;padding:0;border:0;border-radius:10px;overflow:hidden;width:min(100%,800px);margin:0 auto 48px;background:#001225;box-shadow:0 24px 60px #06172340;color:#fff5e5;isolation:isolate;aspect-ratio:2/3}
#finder .dial-art{display:block;width:100%;height:auto;margin:0}
#finder .dial-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
#finder .guide-dial{position:absolute;left:8%;top:11.4%;width:84%;height:54.7%;margin:0}
#finder .dial-choice{position:absolute;width:39%;height:39%;padding:0;background:transparent;border:0;border-radius:14%;cursor:pointer;z-index:2;transition:background .3s,box-shadow .3s}
#finder .dial-nw{left:9%;top:9%;border-top-left-radius:95%}
#finder .dial-ne{right:9%;top:9%;border-top-right-radius:95%}
#finder .dial-sw{left:9%;bottom:6%;border-bottom-left-radius:95%}
#finder .dial-se{right:9%;bottom:6%;border-bottom-right-radius:95%}
#finder .dial-choice.selected{background:radial-gradient(ellipse at center,#ffd07012,transparent 75%);box-shadow:inset 0 0 14px #ffd27177,0 0 12px #e8a42b66}
#finder .dial-choice:focus-visible,#finder #pointer-handle:focus-visible,#finder .button:focus-visible{outline:3px solid #fff2be;outline-offset:2px}
#finder .dial-pointer{position:absolute;left:32%;top:34.4%;width:36%;height:36%;z-index:4;pointer-events:none;transition:transform .5s cubic-bezier(.2,.8,.2,1);transform:rotate(-45deg)}
#finder #pointer-handle{position:absolute;left:39%;top:-10%;width:22%;height:60%;border:0;padding:0;background:transparent;touch-action:none;cursor:grab;pointer-events:auto;filter:drop-shadow(2px 3px 2px #000a)}
#finder #pointer-handle:before{content:'';position:absolute;inset:0;background:linear-gradient(100deg,#73521d 3%,#fceba7 22%,#a16916 30%,#ffd974 48%,#fff1ba 54%,#ac7222 71%,#eabe54 88%,#6d450a);clip-path:polygon(50% 0,97% 32%,72% 49%,62% 100%,38% 100%,28% 49%,3% 32%)}
#finder #pointer-handle:after{content:'';position:absolute;left:11%;top:24%;width:78%;aspect-ratio:1;border:2px solid #fff0a7;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff5b5,#ffc645 35%,#bd811e 55%,#68440d 66%,#ffd56a 70%,#946116 80%);box-shadow:0 0 0 2px #7a4e10,0 0 0 3px #f8cc67}
#finder .dial-hub{position:absolute;left:45.5%;top:47.9%;width:9%;height:9%;border:2px solid #e9bb53;border-radius:50%;background:conic-gradient(#815713,#f9d769,#c08a25,#ffea91,#825612);box-shadow:0 0 0 2px #684711,0 0 0 4px #e9c364;z-index:5;pointer-events:none}
#finder .dragging{transition:none}#finder .dragging #pointer-handle{cursor:grabbing}
#finder .dial-guides{position:absolute;left:6%;top:66%;width:88%;height:9%;display:grid;grid-template-columns:1fr 1fr;gap:3%;margin:0}
#finder .dial-guides>div{border-radius:10%;transition:.3s;background:transparent;border:0;padding:0}
#finder .dial-guides>div.selected{background:#ffc44c17;box-shadow:inset 0 0 18px #ffd35d99,0 0 18px #efb43e88;outline:1px solid #ffda87}
#finder .dial-advice{position:absolute;left:9%;top:77.3%;width:82%;height:13.1%;max-width:none;margin:0;padding:1.1% 1.5%;background:radial-gradient(ellipse at top,#062544,#001328 80%);display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:3%;text-align:center;box-sizing:border-box}
#finder #dial-tip{color:#fff5e9;font:clamp(12px,3.7cqw,31px)/1.2 Georgia,serif;margin:0;max-width:96%;text-wrap:balance}
#finder .dial-advice .button{display:flex;align-items:center;justify-content:center;min-height:30px;width:87%;padding:1.5% 2%;border:2px solid #fce9b3;border-radius:4px;background:linear-gradient(#fff0a7,#f2c04e 45%,#e2a63c 75%,#fada76);box-shadow:0 0 0 2px #8f5e16,0 0 0 3px #edcb70,0 3px 7px #0008;color:#171305;text-decoration:none;font:bold clamp(10px,2.8cqw,24px)/1.15 Georgia,serif;white-space:normal;text-transform:none;letter-spacing:0}
#finder .dial-advice .button:after{content:'›';margin-left:.4em;font-size:1.4em}
@media(prefers-reduced-motion:reduce){#finder .dial-pointer,#finder .dial-choice,#finder .dial-guides>div{transition:none}}

/* Live labels cover the original artwork lettering and remain accessible text. */
#finder .dial-guides>div{position:relative}
#finder .dial-book-label{position:absolute;left:36%;top:10%;width:60%;height:80%;display:block;align-content:center;padding:0 4%;box-sizing:border-box;background:radial-gradient(ellipse at center,#041a32,#001226);border-radius:5px;color:#fff3e2;font:clamp(8px,2.8cqw,22.4px)/1.12 Georgia,serif;text-align:left;white-space:normal}
#finder #dial-repair .dial-book-label{font-size:clamp(7px,2.55cqw,20.4px)}
#finder .dial-guides>div.selected .dial-book-label{color:#ffebaa;background:radial-gradient(ellipse at center,#3c2a0b,#0c1720);text-shadow:0 0 9px #ffd06044}

#finder .dial-book-label{overflow:hidden}