.door{--ink:#3e5263;--muted:#76879a;--card:#ffffffd1;--edge:#ffffffb3;--sky-top:#d6e9f4;--sky-mid:#eef4f6;--floor:#f7f0e6;--glow:#fff1d6;--frame:#fff;isolation:isolate;min-height:100dvh;padding:32px 16px calc(32px + env(safe-area-inset-bottom));background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-mid) 52%,var(--floor) 100%);color:var(--ink);place-items:center;font-family:Yu Gothic UI,Hiragino Kaku Gothic ProN,Meiryo,sans-serif;display:grid;position:relative;overflow:hidden}.door-sky{z-index:-1;pointer-events:none;position:absolute;inset:0}.door-window{width:min(92vw,560px);height:min(118vw,720px);box-shadow:inset 0 0 0 14px var(--frame),inset 0 0 0 15px #dfe9ee,0 40px 80px -40px #6d8fa566;opacity:.9;background:radial-gradient(120% 70% at 50% 18%,#fffdf8 0%,#f3f8fb 42%,#dcecf5 100%);border-radius:999px 999px 36px 36px;position:absolute;top:50%;left:50%;transform:translate(-50%,-52%)}.door-window:before,.door-window:after{content:"";background:var(--frame);position:absolute;box-shadow:0 0 0 1px #dfe9ee}.door-window:before{width:10px;top:14px;bottom:14px;left:50%;transform:translate(-50%)}.door-window:after{height:10px;top:56%;left:14px;right:14px}.door-glow{aspect-ratio:1;background:radial-gradient(circle,var(--glow) 0%,#fff1d600 62%);border-radius:50%;width:min(120vw,760px);animation:9s ease-in-out infinite door-breathe;position:absolute;top:18%;left:50%;transform:translate(-50%,-40%)}.door-mote{left:calc(12% + var(--i) * 9.5%);width:calc(4px + var(--i) * .6px);aspect-ratio:1;opacity:0;animation:door-float calc(13s + var(--i) * 1.7s) linear calc(var(--i) * -2.3s) infinite;background:#fff;border-radius:50%;position:absolute;bottom:-12px;box-shadow:0 0 12px #fff}.door-card{background:var(--card);border:1px solid var(--edge);-webkit-backdrop-filter:blur(18px);text-align:center;border-radius:32px;width:min(100%,380px);padding:34px 28px 26px;animation:.9s cubic-bezier(.2,.8,.2,1) both door-arrive;position:relative;box-shadow:0 30px 60px -30px #4d6f8a55,inset 0 2px #fff}.door-mark{color:#698692;background:#eef6f9;border:1px solid #fff;border-radius:17px;place-items:center;width:48px;height:48px;font:italic 27px Georgia,serif;display:inline-grid;box-shadow:0 6px 16px -8px #6d8fa580}.door-card h1{letter-spacing:.14em;margin:16px 0 0;font-size:24px;font-weight:600}.door-lead{letter-spacing:.04em;color:var(--muted);margin:10px 0 24px;font-size:14px;line-height:1.8}.door-google{color:#1f1f1f;width:100%;min-height:52px;font:inherit;letter-spacing:.03em;cursor:pointer;background:#fff;border:1px solid #747775;border-radius:999px;justify-content:center;align-items:center;gap:12px;padding:0 20px;font-size:15px;font-weight:600;transition:background .2s,box-shadow .2s,transform .15s;display:flex}.door-google:hover:not(:disabled){background:#f7fbfd;box-shadow:0 8px 20px -10px #4d6f8a80}.door-google:active:not(:disabled){transform:translateY(1px)}.door-google:focus-visible{outline-offset:3px;outline:3px solid #4a9bb6}.door-google:disabled{cursor:progress;opacity:.75}.door-note{text-align:left;border-radius:18px;flex-direction:column;gap:6px;margin:0 0 18px;padding:14px 16px;font-size:13px;line-height:1.7;display:flex}.door-note strong{font-size:14px;font-weight:600}.door-note.sorry{color:#7a5243;background:#fff4ee;border:1px solid #f6dccd}.door-note.calm{color:#48667a;background:#eef6f9;border:1px solid #d7e8ef}.door-google+.door-note{margin:16px 0 0}.door-foot{letter-spacing:.03em;color:var(--muted);margin:22px 0 0;font-size:11px;line-height:1.9}@keyframes door-breathe{50%{opacity:.85;transform:translate(-50%,-40%)scale(1.06)}}@keyframes door-float{0%{opacity:0;transform:translateY(0)translate(0)}12%{opacity:.8}50%{transform:translateY(-52vh)translate(18px)}88%{opacity:.6}to{opacity:0;transform:translateY(-104vh)translate(-8px)}}@keyframes door-arrive{0%{opacity:0;transform:translateY(14px)}}@media (prefers-color-scheme:dark){.door{--ink:#e9eff5;--muted:#b3c2d0;--card:#1f354bd9;--edge:#7c9ab940;--sky-top:#101d31;--sky-mid:#172a42;--floor:#223650;--glow:#a6cbd733;--frame:#2a4461}.door-window{box-shadow:inset 0 0 0 14px var(--frame),inset 0 0 0 15px #3d5a78,0 40px 80px -40px #0008;background:radial-gradient(120% 70% at 50% 18%,#3b5a7c 0%,#1f3753 55%,#152843 100%)}.door-window:before,.door-window:after{box-shadow:0 0 0 1px #3d5a78}.door-mark{color:#dce6ef;background:#2a4461;border-color:#7c9ab940}.door-mote{background:#dfeeff;box-shadow:0 0 10px #cfe4ff}.door-note.sorry{color:#f6dccd;background:#4a3a3a;border-color:#6d5050}.door-note.calm{color:#d7e8ef;background:#223f55;border-color:#3d6078}}@media (max-width:420px){.door-card{border-radius:28px;padding:30px 22px 22px}.door-card h1{font-size:22px}}@media (prefers-reduced-motion:reduce){.door-glow,.door-mote,.door-card{animation:none}.door-mote{display:none}}
