.onboarding{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:12px;background:rgba(23,59,50,.82)}
.onboarding-panel{width:min(100%,430px);max-height:calc(100dvh - 24px);overflow:auto;background:var(--paper);border:1px solid #c9cec0;border-radius:8px;padding:18px;box-shadow:0 18px 60px #10271f40;outline:none}
.onboarding-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.onboarding-top .eyebrow{color:var(--muted)}.onboarding-skip{background:transparent;padding:0 4px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#a6afa0}
.onboarding-visual{height:min(32dvh,230px);min-height:170px;margin:10px 0 18px;display:grid;place-items:center;background:#e8eadf;border:1px solid var(--line);overflow:hidden}
.onboarding-copy{min-height:128px}.onboarding-copy h2{font-size:25px;line-height:1.45;letter-spacing:.04em}.onboarding-copy>p{margin-top:8px;line-height:1.9}
.onboarding-progress{display:flex;align-items:center;gap:7px;margin:14px 0 10px;color:var(--muted);font-size:12px}.onboarding-progress i{display:block;width:22px;height:2px;background:#c7ccbf}.onboarding-progress i[aria-current]{height:4px;background:var(--green)}.onboarding-position{margin-left:auto;font-variant-numeric:tabular-nums}
.onboarding-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.onboarding-actions .button{width:100%;padding-inline:12px}.onboarding-actions .primary{grid-column:2}.onboarding-actions .secondary{grid-column:1;grid-row:1}
.onboarding-shelves{width:78%;height:76%;display:grid;grid-template-columns:repeat(16,1fr);grid-template-rows:repeat(8,1fr);gap:3px;padding:8px;border:7px solid #6e543c;background:#927254}.onboarding-shelves i{background:#d7cfb9;border-bottom:2px solid #5d4835}.onboarding-shelves i.filled{background:#315c4d;border-bottom-color:#bb7953}
.onboarding-note{display:flex;align-items:flex-end;gap:22px}.onboarding-book{width:70px;height:112px;background:var(--green);border:5px solid #d5b783;box-shadow:6px 7px 0 #b66f4e}.onboarding-note p{width:125px;padding:16px;background:#faf8f0;border:1px solid #c9cec0;transform:rotate(-2deg)}.onboarding-note p:before{content:"この本を置く理由";font-family:var(--serif);font-size:12px}.onboarding-note i{display:block;height:1px;background:#9aa296;margin-top:12px}
.onboarding-store{position:relative;width:82%;height:78%;perspective:300px;background:linear-gradient(150deg,#365d50,#183b32);overflow:hidden}.store-door{position:absolute;inset:10% 36% 0;border:3px solid #d4c398;border-bottom:0}.store-shelf{position:absolute;top:18%;width:25%;height:57%;border:5px solid #9c7651;background:repeating-linear-gradient(#425f4f 0 16%,#ccb77e 17% 20%)}.store-shelf.left{left:4%;transform:rotateY(24deg)}.store-shelf.right{right:4%;transform:rotateY(-24deg)}.store-path{position:absolute;left:36%;right:36%;bottom:-12%;height:65%;background:#e7ddc5;clip-path:polygon(35% 0,65% 0,100% 100%,0 100%)}.store-person{position:absolute;left:48%;bottom:15%;width:12px;height:35px;background:#b86f4b;border-radius:8px 8px 2px 2px}.store-person:before{content:"";position:absolute;left:1px;top:-11px;width:10px;height:10px;border-radius:50%;background:#d9c6a0}
.onboarding-start{position:relative;width:160px;height:145px;border:7px solid #785b40;border-top-width:14px;background:#e1d7be;display:grid;place-items:center}.onboarding-start span{font-family:var(--serif);font-size:46px;color:var(--green)}.onboarding-start i{position:absolute;width:18px;height:48px;bottom:0;background:#496c5c;border-top:4px solid #c98961}.onboarding-start i:nth-of-type(1){left:10px;height:61px}.onboarding-start i:nth-of-type(2){left:34px;height:48px;background:#b86f4b}.onboarding-start i:nth-of-type(3){right:35px;height:57px}.onboarding-start i:nth-of-type(4){right:10px;height:43px;background:#8a7552}.onboarding-start i:nth-of-type(5){left:61px;height:35px;background:#be9f6e}
body[data-capture-ui="hidden"] #app,body[data-capture-ui="hidden"] .skip-link,body[data-capture-ui="hidden"] #toast{visibility:hidden}.onboarding:not([hidden]){visibility:visible!important}
@media(min-width:680px){.onboarding{padding:24px}.onboarding-panel{width:min(88vw,760px);padding:28px}.onboarding-body{display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:32px}.onboarding-visual{height:350px;max-height:55dvh;margin:12px 0}.onboarding-copy{min-height:0}.onboarding-copy h2{font-size:32px}.onboarding-progress,.onboarding-actions{margin-left:calc(55% + 16px)}.onboarding-actions{grid-template-columns:1fr 1.5fr}}