.access-session{position:fixed;bottom:12px;right:12px;z-index:90;display:flex;align-items:center;gap:12px;padding:8px 12px;background:#fffcf6f5;border:1px solid #bfa992;border-radius:14px;font:13px/1.4 system-ui,sans-serif;box-shadow:0 3px 18px #60482920;max-width:calc(100% - 24px)}.access-session span{overflow-wrap:anywhere}.access-session button{background:#fff5ec;color:#704b48;border:1px solid #a5807b;padding:10px 14px;border-radius:9px;min-height:44px;white-space:nowrap;cursor:pointer}
/* Approved sunlit entrance. The form is real HTML on the blank paper plate. */
:root{color-scheme:light;--ink:#3f4b2e;--muted:#655b49;--olive:#677344}*{box-sizing:border-box}[hidden]{display:none!important}
.access-page{margin:0;background:#efe2c8;color:var(--ink);font:16px/normal system-ui,sans-serif;font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.access-scene{position:relative;max-width:1680px;margin:auto;width:100%;min-height:760px;aspect-ratio:3/2;background:url('/access-assets/entrance-desktop.png') center/100% 100% no-repeat}
.access-heading{position:absolute;left:3.3%;top:2.6%;width:46%;display:flex;align-items:center;gap:20px;color:var(--ink)}
.access-brand{display:flex;align-items:center;gap:12px;margin:0;font-size:clamp(19px,2.5vw,37px);font-weight:700;letter-spacing:.04em;white-space:nowrap}
.access-brand:before{content:"";width:clamp(38px,6.5vw,96px);aspect-ratio:3350/3200;background:#777447;mask:url('/access-assets/kyun.png') center/contain no-repeat;-webkit-mask:url('/access-assets/kyun.png') center/contain no-repeat}
.access-tool-name{display:flex;align-items:center;gap:9px;margin:0;border-left:1px solid #8a8058;padding-left:18px}.compass-seal{width:40px;height:40px;flex:none}.compass-needle-secondary{fill:#c2b082}.compass-pivot{fill:#f3e4c8}.access-name-stack{display:flex;flex-direction:column;align-items:center}.access-english{font:700 clamp(24px,3vw,43px)/1 Georgia,serif}.access-reading{font-size:11px;letter-spacing:.18em;margin-top:5px}
.access-card{position:absolute;left:57.3%;top:11.4%;width:34.2%;background:none;padding:0;border:0;box-shadow:none}
h1{font:600 clamp(28px,3.4vw,48px)/1.3 "Hiragino Mincho ProN","Yu Mincho",serif;text-align:center;letter-spacing:.04em;margin:0 0 10px}.access-intro{text-align:center;margin:0 0 20px;font-size:clamp(15px,1.55vw,21px);color:#514634}
form label{display:block;font-weight:650;margin:10px 0 14px}form input:not([type=checkbox]){display:block;width:100%;font:inherit;color:#493f32;min-height:48px;padding:10px 14px;margin-top:5px;border:1px solid #aa9a7e;border-radius:10px;background:#fffdf8c9;box-shadow:inset 0 2px 4px #91795a0a}input::placeholder{color:#8c8274;opacity:1}
form .access-check{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:400;margin:6px 0;min-height:32px}.access-check input{appearance:none;width:22px;height:22px;flex:none;border:1.5px solid #a08a50;border-radius:5px;background:#fffdf3}.access-check input:checked{background:#657744}.access-check input:checked:after{content:"✓";display:block;color:white;text-align:center;line-height:19px}
.access-primary{display:flex;align-items:center;justify-content:center;gap:16px;width:100%;min-height:54px;margin-top:20px;background:linear-gradient(#7b8752,#59663c);color:#fffbea;border:2px solid #fff6dc;border-radius:40px;font-weight:600;font-family:inherit;font-size:21px;box-shadow:0 0 0 1px #b9a67b,0 4px 6px #785a3433;cursor:pointer}.access-primary:hover{filter:brightness(1.07)}.access-primary:active{transform:translateY(1px)}.access-primary span{font-size:29px;line-height:1}
.access-link{display:block;width:fit-content;max-width:100%;margin:12px auto 8px;min-height:44px;padding:8px 0;border:0;background:none;color:#4d6038;font-weight:600;font-family:inherit;font-size:16px;text-decoration:underline;text-underline-offset:5px;cursor:pointer;text-align:center}
.access-help{font-size:12px;line-height:1.8;color:#5e4e3b;border-top:1px solid #baa17c88;padding-top:12px;margin:12px 0 0;text-align:center}.access-local-note{max-width:700px;margin:16px auto;padding:0 20px;color:#5e5647;font-size:13px}.access-local-note summary{cursor:pointer;min-height:44px;padding:10px}.access-local-note a{color:#4e623a}.access-reset-next{padding:12px;border:1px solid #b4a27c;background:#f8efd8;border-radius:8px;font-size:14px}.access-reset-next p{margin:0}
#access-feedback{white-space:pre-wrap;color:#8b3e35;line-height:1.65;font-size:14px;margin:8px 0}#access-feedback:empty{display:none}button:disabled{opacity:.65;cursor:wait}input:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #4f7351;outline-offset:4px}.access-page[data-access-mode=setup] .access-intro,.access-page[data-access-mode=reset] .access-intro{font-size:16px}.access-page[data-access-mode=setup] form .access-help,.access-page[data-access-mode=reset] form .access-help{border:0;padding:0;margin:4px 0;font-size:12px;text-align:left}
.access-page.is-access-success .access-primary{box-shadow:0 0 0 1px #b9a67b,0 0 22px #e9cb74}
@media(min-width:901px) and (max-width:1150px){.access-heading{gap:10px}.access-tool-name{padding-left:10px}.access-card{top:10.5%}.access-intro{margin-bottom:14px}form label{margin:8px 0 10px}.access-primary{margin-top:12px}}
@media(max-width:900px){.access-scene{max-width:540px;min-height:900px;aspect-ratio:948/1850;background-image:url('/access-assets/entrance-phone.png')}.access-heading{left:13%;top:1.6%;width:78%;gap:10px}.access-brand{font-size:clamp(17px,4.6vw,25px);gap:6px}.access-brand:before{width:clamp(36px,10vw,60px)}.access-tool-name{padding-left:10px;gap:5px}.compass-seal{width:25px;height:25px}.access-english{font-size:clamp(22px,5.5vw,30px)}.access-reading{font-size:9px;margin-top:3px}.access-card{left:14.5%;width:70%;top:37.1%}h1{font-size:clamp(27px,7vw,38px);margin-bottom:7px}.access-intro{font-size:15px;margin-bottom:15px}form label{font-size:16px;margin:10px 0 12px}form input:not([type=checkbox]){min-height:48px;padding:9px 10px;font-size:16px}.access-check{line-height:1.5}form .access-check{font-size:12px;gap:8px;margin:5px 0}.access-primary{font-size:19px;min-height:50px;margin-top:14px}.access-link{font-size:14px;margin:8px auto 5px}.access-help{font-size:11px;padding-top:10px;margin-top:10px}.access-page[data-access-mode=setup] .access-scene,.access-page[data-access-mode=reset] .access-scene{min-height:1050px}.access-page[data-access-mode=setup] .access-intro,.access-page[data-access-mode=reset] .access-intro{font-size:14px}.access-local-note{margin-top:0}.access-page:has(input:focus) .access-scene{scroll-margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(min-width:901px){.access-card{font-size:clamp(16px,1.5vw,23px)}form input:not([type=checkbox]){min-height:clamp(48px,3.7vw,58px)}form .access-check{font-size:clamp(14px,1.3vw,20px);min-height:clamp(32px,2.7vw,42px)}.access-primary{font-size:clamp(21px,1.9vw,29px);font-weight:600;min-height:clamp(54px,4.5vw,69px)}.access-link{font-size:clamp(16px,1.3vw,20px)}.access-help{font-size:clamp(12px,1.13vw,17px)}}
@media(max-width:900px){.access-scene{min-height:1080px}.access-card{top:36.8%}form .access-check{min-height:44px;font-size:14px}.access-help{font-size:12px}.access-page[data-access-mode=setup] .access-scene,.access-page[data-access-mode=reset] .access-scene{min-height:1200px}}
.access-page.is-access-success .access-scene:after{content:"";position:absolute;left:31%;top:79%;width:8%;height:7%;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#ffef9aaa,transparent 70%);animation:access-key-light .8s ease-out both}@keyframes access-key-light{0%,100%{opacity:0}45%{opacity:1}}
@media(max-width:900px){.access-page.is-access-success .access-scene:after{left:38%;top:30%;width:16%;height:4%}}
@media(min-width:901px) and (max-width:1350px){.access-page:is([data-access-mode=setup],[data-access-mode=reset]) .access-card{top:10.5%}.access-page:is([data-access-mode=setup],[data-access-mode=reset]) h1{font-size:34px}.access-page:is([data-access-mode=setup],[data-access-mode=reset]) form label{margin:6px 0 8px}.access-page:is([data-access-mode=setup],[data-access-mode=reset]) form input:not([type=checkbox]){min-height:44px;padding:7px 12px}.access-page:is([data-access-mode=setup],[data-access-mode=reset]) .access-primary{min-height:52px;margin-top:12px}}
@media(max-width:350px){.access-heading{left:9%;width:84%;gap:6px}.access-brand{font-size:15px}.access-brand:before{width:32px}.access-tool-name{padding-left:6px;gap:4px}.compass-seal{width:20px;height:20px}.access-english{font-size:22px}.access-page:is([data-access-mode=setup],[data-access-mode=reset]) .access-scene{min-height:1320px}}
@media(min-width:901px){.access-scene:has(#access-feedback:not(:empty)){min-height:max(1000px,75vw)}}
@media(max-width:900px){.access-scene:has(#access-feedback:not(:empty)){min-height:1250px}.access-page:is([data-access-mode=setup],[data-access-mode=reset]) .access-scene:has(#access-feedback:not(:empty)){min-height:1460px}}

.access-intro{text-wrap:balance}
/* Door and revealed interior are separate layers. Navigation awaits the real animation. */
.access-door-scene{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.access-heading,.access-card{z-index:2}
.access-door-interior,.access-door-leaf{position:absolute;inset:0;background-size:100% 100%;background-repeat:no-repeat}
.access-door-interior{background-image:url('/access-assets/entrance-open-desktop.png');clip-path:polygon(17% 84%,17% 34%,18% 27%,20% 22%,24% 18%,29% 16%,34% 17%,39% 21%,43% 28%,44% 35%,44% 84%)}
.access-door-leaf{background-image:url('/access-assets/entrance-desktop.png');clip-path:polygon(18.2% 83%,18.2% 33%,18.7% 28%,20% 24%,22% 21%,25% 19%,28% 18.5%,30.7% 19.3%,32.4% 21%,32.4% 81.8%);transform-origin:18.2% 55%;backface-visibility:hidden}

.is-door-opening .access-card form,.is-door-opening #reset-password,.is-door-opening .access-help,.is-door-opening #back-to-login{opacity:0;pointer-events:none;transition:opacity .2s}.is-door-opening .access-intro{color:#496136}
@media(max-width:900px){.access-door-interior{background-image:url('/access-assets/entrance-open-phone.png');clip-path:polygon(30% 33%,30% 16%,31% 12%,35% 9%,41% 7.5%,49% 7%,57% 7.5%,65% 9%,72% 12%,75% 16%,75% 33%)}.access-door-leaf{background-image:url('/access-assets/entrance-phone.png');clip-path:polygon(34.7% 33%,34.7% 16%,36% 13.7%,39% 11.6%,43% 10.3%,48% 9.7%,52% 10%,56% 11%,56% 32.5%);transform-origin:34.7% 21%}}
.access-door-leaf{inset:auto;left:18.2%;top:18.5%;width:14.2%;height:64.5%;background-image:url('/access-assets/door-leaf.png');background-size:178% 104%;background-position:center;clip-path:polygon(0 100%,0 18%,3% 12%,12% 6%,28% 2%,50% 0,72% 2%,89% 7%,100% 14%,100% 100%);transform-origin:left center}
@media(max-width:900px){.access-door-leaf{left:34.7%;top:9.7%;width:21.3%;height:23.3%;transform-origin:left center}}

/* A solid arched slab: two painted faces and timber around the entire perimeter. */
.access-door-leaf{background:none;clip-path:none;backface-visibility:visible;transform-style:preserve-3d}
.access-door-front,.access-door-back{position:absolute;inset:0;background:url('/access-assets/door-leaf.png') center/178% 104% no-repeat;clip-path:polygon(0 100%,0 18%,3% 12%,12% 6%,28% 2%,50% 0,72% 2%,89% 7%,100% 14%,100% 100%);backface-visibility:hidden}
.access-door-front{transform:translateZ(calc(var(--door-depth)/2))}
.access-door-back{transform:rotateY(180deg) translateZ(calc(var(--door-depth)/2))}
.access-door-edge{position:absolute;transform-origin:0 0;background:repeating-linear-gradient(0deg,#6f754b 0px,#8c9060 2px,#a1a074 3px,#7e8357 5px);box-shadow:inset 0 1px 1px #d4c89788,inset 0 -1px 2px #39462f88;backface-visibility:visible}

/* The wall/frame occludes the solid leaf as it swings into the room. */
.access-door-scene{clip-path:polygon(17% 84%,17% 34%,18% 27%,20% 22%,24% 18%,29% 16%,34% 17%,39% 21%,43% 28%,44% 35%,44% 84%)}
@media(max-width:900px){.access-door-scene{clip-path:polygon(30% 33%,30% 16%,31% 12%,35% 9%,41% 7.5%,49% 7%,57% 7.5%,65% 9%,72% 12%,75% 16%,75% 33%)}}

.access-door-bird-occluder{position:absolute;inset:0;z-index:2;background:url('/access-assets/entrance-desktop.png') center/100% 100% no-repeat;clip-path:polygon(20.8% 70.4%,23.2% 71.4%,25.1% 74%,23.8% 74.6%,23.4% 76.6%,24.6% 78.2%,24.8% 81.4%,23.6% 84.8%,19.3% 85.3%,16% 83.8%,14.1% 83%,15.7% 80.8%,17.1% 77.4%,17.6% 74.3%,18.4% 72.1%)}
@media(max-width:900px){.access-door-bird-occluder{background-image:url('/access-assets/entrance-phone.png');clip-path:polygon(31.1% 25.1%,34.2% 25.2%,36.6% 26.1%,39% 27%,36.9% 27.4%,36.4% 28.4%,37.5% 29.8%,37.2% 31.6%,34.2% 33.1%,28.1% 33.2%,24.4% 32.2%,21.6% 32.5%,23.4% 30.9%,25.4% 29.5%,27.7% 26.4%)}}

.access-error-support{display:block;margin-top:12px;color:#47452f;line-height:1.8;text-align:left;font-weight:400}.access-error-support a{display:inline-block;box-sizing:border-box;min-height:44px;padding:6px 10px;margin:4px 2px;border:1px solid #7b8654;border-radius:8px;background:#f6f5df;color:#42512c;font-weight:700;text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}.access-error-support a:focus-visible{outline:3px solid #586e42;outline-offset:3px}

.access-error-support a{text-wrap:balance;text-align:center;max-width:100%}@media(min-width:901px){.access-scene:has(#access-feedback .access-error-support){min-height:max(1200px,85vw)}}@media(max-width:900px){.access-page:is([data-access-mode=setup],[data-access-mode=reset]) .access-scene:has(#access-feedback .access-error-support){min-height:1660px}}

@media(max-width:900px){.access-scene:has(#access-feedback .access-error-support){min-height:1660px}}

.access-register-link{display:inline-flex;align-items:center;min-height:44px;padding:4px 8px;margin:2px 2px 2px 0;border:1px solid #7b8654;border-radius:7px;background:#f6f5df;color:#42512c;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;vertical-align:middle}

@media(max-width:900px){.access-page[data-access-mode=login] .access-scene:has(.access-register-link){min-height:1200px}}

.access-gender{border:0;padding:0;margin:12px 0 20px;min-width:0}.access-gender legend{font-weight:700;color:#3e5034;margin-bottom:10px}.access-gender-options{display:flex;gap:12px}.access-gender-options label{flex:1;display:flex;align-items:center;gap:12px;min-height:52px;border:2px solid #a7a080;border-radius:12px;padding:12px 16px;cursor:pointer;background:#fffaf0}.access-page[data-access-mode=setup] .access-gender-options input[type=radio]{display:inline-block;flex:none;width:22px;height:22px;min-height:22px;padding:0;accent-color:#657240;margin:0;appearance:auto;box-shadow:none}.access-gender-options label{min-width:0}.access-gender-options label span{white-space:nowrap}.access-gender-options label:has(input:checked){border-color:#526333;background:#eef0dc}.access-gender-options label:has(input:focus-visible){outline:3px solid #526333;outline-offset:3px}
@media(max-width:350px){.access-page[data-access-mode=setup] .access-scene:has(#access-feedback .access-error-support){min-height:1800px}}
@media(min-width:901px){.access-page[data-access-mode=setup] .access-scene{min-height:max(1000px,70vw)}}
@media(max-width:900px){.access-page[data-access-mode=setup] .access-scene{min-height:1460px}}
@media(min-width:901px){.access-page[data-access-mode=setup] .access-scene{min-height:max(1100px,80vw)}.access-page[data-access-mode=setup] .access-scene:has(#access-feedback .access-error-support){min-height:max(1440px,90vw)}}
@media(max-width:350px){.access-page[data-access-mode=setup] .access-scene:has(#access-feedback .access-error-support){min-height:1900px}}
@media(max-width:900px){.access-page[data-access-mode=setup] .access-scene:has(#access-feedback .access-error-support){min-height:1800px}}
@media(max-width:350px){.access-page[data-access-mode=setup] .access-scene:has(#access-feedback .access-error-support){min-height:1900px}}