:root{color-scheme:light;--ink:#303963;--night:#303963;--night-deep:#111641;--paper:#f1f4fb;--gold:#ead17c;--muted:#d1d9f0;--red:#303963;--line:#daddec;--serif:"Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif;--sans:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--night);color:#fffdf6;font-family:var(--sans);font-size:1rem;line-height:1.8;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 15% 55%,#3b4581 0,transparent 57%),linear-gradient(145deg,var(--night),var(--night-deep));pointer-events:none}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
[hidden]{display:none!important}
.app-shell{max-width:1160px;margin:auto;padding:0 40px}
.masthead{min-height:110px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff20;gap:24px}
.wordmark{color:inherit;text-decoration:none;display:flex;align-items:center;gap:13px;font-family:var(--serif);font-size:1.22rem;letter-spacing:.1em}
.brand-seal{height:34px;width:34px;border:1px solid var(--gold);border-radius:2px;color:var(--gold);display:grid;place-items:center;font-size:1.2rem;line-height:1;flex-shrink:0}
.edition{font-family:var(--serif);font-size:.875rem;letter-spacing:.14em;color:var(--gold);white-space:nowrap}
.experience{display:grid;grid-template-columns:1fr 1.12fr;gap:60px;align-items:start;padding:48px 0 30px}
.drawing{padding:21px 0 0;text-align:center}
.section-label{font-size:.875rem;letter-spacing:.12em;color:var(--gold);display:flex;align-items:center;justify-content:center;gap:13px}
.short-rule{width:26px;height:1px;background:var(--gold)}
h1{font-family:var(--serif);font-size:clamp(1.6rem,2.6vw,2rem);font-weight:500;letter-spacing:.1em;margin:11px 0 23px;line-height:1.6}
.wheel{width:min(100%,340px);aspect-ratio:1;margin:0 auto 24px;position:relative}
.wheel-diagram{width:100%;height:100%;display:block;opacity:.68}
.wheel-diagram .node-label{fill:var(--gold);font-family:var(--serif);font-size:18px}
.wheel-diagram .diagram-lines{stroke:var(--gold);stroke-width:.9;opacity:.36;fill:none}
.wheel-diagram .diagram-outline{stroke:var(--gold);stroke-width:1;opacity:.7;fill:none}
.wheel-diagram .node-dot{fill:var(--gold)}
.wheel-center{position:absolute;inset:31%;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#17333a;box-shadow:0 0 30px 14px #17333a;gap:4px;z-index:1}
.wheel-caption{color:var(--gold);font-size:.875rem;white-space:nowrap;letter-spacing:.07em}
.rolling-number{font-size:1.7rem;font-family:var(--serif);line-height:1.65;white-space:nowrap;letter-spacing:.05em}
.wheel-footnote{font-size:.875rem;color:var(--muted);white-space:nowrap}
.wheel-marker{position:absolute;left:calc(50% - 4px);top:10px;width:8px;height:8px;background:var(--gold);transform:rotate(45deg)}
.wheel.is-spinning .wheel-diagram{animation:wheel-turn 4s linear infinite}
.wheel.is-spinning .rolling-number{font-variant-numeric:tabular-nums;color:var(--gold);font-size:2rem}
.wheel.is-spinning .wheel-center{animation:none}
.draw-button{width:min(100%,304px);min-height:60px;border:1px solid #d15b49;border-radius:3px;background:var(--red);color:#fffdf6;cursor:pointer;font-family:var(--serif);font-size:1.15rem;letter-spacing:.13em;padding:14px 24px;box-shadow:0 5px 14px #0002;transition:background .2s,transform .2s,box-shadow .2s}
.draw-button:hover:not(:disabled){background:#c24636;transform:translateY(-2px);box-shadow:0 8px 18px #0003}
.draw-button:active:not(:disabled){transform:translateY(0)}
.draw-button:disabled{cursor:wait;background:#85423a;border-color:#a56855;color:#eee3d2}
:focus-visible{outline:3px solid var(--gold);outline-offset:6px}
.draw-help{font-size:.875rem;color:var(--muted);margin:15px auto 0;max-width:360px;line-height:1.8}
.notice{font-size:.875rem;color:var(--gold);min-height:1.8em;margin:6px 0 0}
.paper-area{position:relative;min-width:0}
.paper-area::before{content:"";position:absolute;inset:10px -9px -8px 10px;background:#e4d5b9;transform:rotate(1.2deg);border-radius:1px;z-index:-1;opacity:.55}
.paper{position:relative;color:var(--ink);background:var(--paper);box-shadow:0 18px 48px #0003;padding:23px 31px 19px;border-radius:1px;min-height:530px;outline:none;overflow:hidden}
.paper:focus-visible{outline:3px solid var(--gold);outline-offset:8px}
.paper-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding:0 0 12px;font-family:var(--serif);font-size:.875rem;letter-spacing:.04em;color:#56656a;position:relative;z-index:1}
.paper-brand{color:#8d774b;white-space:nowrap}
.unopened{min-height:418px;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding:20px 0 25px;text-align:center}
.unopened-diagram{width:285px;max-width:100%;position:absolute;top:46px;left:50%;transform:translateX(-50%);opacity:.1}
.unopened-diagram .node-label,.result-watermark .node-label{fill:var(--ink);font-family:var(--serif);font-size:18px}
.unopened-diagram .diagram-lines,.result-watermark .diagram-lines{fill:none;stroke:var(--ink);stroke-width:1.1}
.unopened-diagram .diagram-outline,.result-watermark .diagram-outline{fill:none;stroke:var(--ink);stroke-width:1.2}
.unopened-diagram .node-dot,.result-watermark .node-dot{fill:var(--ink)}
.unopened-label{font-family:var(--serif);writing-mode:vertical-rl;font-size:2.5rem;letter-spacing:.28em;line-height:1.3;position:relative;margin-top:4px}
.unopened-divider{height:22px;width:1px;background:#aa8a53;margin:22px 0 14px}
.unopened p{font-family:var(--serif);font-size:1rem;letter-spacing:.03em;position:relative;margin:0}
.unopened .unopened-note{font-family:var(--sans);font-size:.875rem;color:#6b7676;margin-top:5px}
.paper-footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:18px;color:#8a754a;font-family:var(--serif);font-size:.875rem;letter-spacing:.08em;padding-top:12px;position:relative;z-index:1}
.tiny-ornament{font-size:.8rem}
.result{position:relative;z-index:0;padding:16px 0 23px}
.result-watermark{position:absolute;width:290px;max-width:100%;height:290px;top:34px;left:50%;transform:translateX(-50%);opacity:.047;z-index:-1;pointer-events:none}
.result-heading{text-align:center}
.result-number{color:#6e766f;font-family:var(--serif);font-size:.875rem;letter-spacing:.1em;margin:1px 0 7px}
.keyword{font-family:var(--serif);font-size:clamp(2rem,4vw,2.65rem);font-weight:500;line-height:1.35;letter-spacing:.12em;margin:0 0 14px;text-indent:.12em}
.fortune-block{display:flex;align-items:center;flex-direction:column;gap:8px}
.fortune{font-family:var(--serif);display:inline-block;border:1px solid #ad5443;color:var(--red);padding:3px 16px;letter-spacing:.14em;font-size:1.2rem;line-height:1.7;transform:rotate(-2deg)}
.fortune-note{font-family:var(--serif);font-size:.875rem;letter-spacing:.04em;color:#8d4a3d}
.fortune-note:empty{display:none}
.poem{font-family:var(--serif);font-size:1.08rem;line-height:2;letter-spacing:.03em;text-align:center;white-space:pre-line;margin:23px -7px 17px}
.message{font-size:1rem;line-height:1.95;margin:0 0 20px;text-align:left}
.advice{padding:15px 0;border-top:1px solid var(--line)}
.advice h3{font-size:.875rem;line-height:1.6;font-weight:500;letter-spacing:.12em;color:#98774c;margin:0 0 5px}
.advice p{font-size:1rem;line-height:1.8;margin:0}
.next-step{background:#f1ece0;border:0;border-left:2px solid #b08b52;padding:13px 15px;margin-top:2px}
.next-step h3{color:var(--red)}
.paper.is-revealed{animation:paper-reveal .55s ease-out}
.site-footer{text-align:center;padding:21px 0 30px;color:#b3c0c2;letter-spacing:.025em;line-height:1.8}
.site-footer p{font-size:.875rem;margin:0}
@keyframes wheel-turn{to{transform:rotate(360deg)}}
@keyframes quiet-pulse{50%{opacity:.7}}
@keyframes paper-reveal{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.experience{padding-top:65px}}
@media(max-width:900px){.app-shell{padding:0 26px}.experience{gap:32px;grid-template-columns:1fr 1.12fr}.paper{padding:21px 24px 19px}.wordmark{font-size:1.1rem;letter-spacing:.05em}.wheel{margin-bottom:25px}.paper-brand{display:none}}
@media(max-width:650px){.app-shell{padding:0 22px}.masthead{min-height:83px;gap:8px}.wordmark{font-size:1.06rem;gap:10px;letter-spacing:0}.brand-seal{height:29px;width:29px;font-size:1rem}.edition{font-size:.875rem;letter-spacing:0;display:none}.experience{grid-template-columns:1fr;gap:28px;padding-top:21px}.drawing{padding:0}.section-label{font-size:.875rem;letter-spacing:.06em}h1{font-size:1.65rem;margin:9px 0 9px}.wheel{width:255px;margin-bottom:12px}.wheel-center{inset:30%}.rolling-number{font-size:1.45rem}.wheel-caption,.wheel-footnote{font-size:.875rem}.wheel.is-spinning .rolling-number{font-size:1.7rem}.wheel-marker{top:7px}.draw-button{min-height:57px;width:100%;max-width:340px}.draw-help{margin-top:11px;max-width:100%;font-size:.875rem}.notice{margin:4px 0 0;min-height:0}.notice:empty{display:none}.paper{min-height:0;padding:20px 24px 16px}.unopened{min-height:255px;padding:29px 0 22px}.unopened-diagram{width:240px;top:13px}.unopened-label{font-size:2rem;letter-spacing:.18em}.unopened-divider{height:14px;margin:17px 0 13px}.unopened-note{display:none}.paper-area::before{inset:9px -5px -7px 6px}.paper-topline{font-size:.875rem}.result{padding-top:15px}.keyword{font-size:2.3rem}.poem{font-size:1.04rem;letter-spacing:0;margin-left:-6px;margin-right:-6px}.message{line-height:1.9}.site-footer{padding:13px 2px 24px}.site-footer p{font-size:.875rem}.paper-footer{gap:12px;letter-spacing:.03em}}
@media(max-width:360px){.app-shell{padding:0 16px}.paper{padding-left:18px;padding-right:18px}.poem{font-size:1rem}.wordmark{font-size:1rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Palette and artwork from the author's Enneagram cards. */
.masthead{border-color:#ead17c40}
.card-art{position:absolute;width:42%;height:auto;left:29%;top:19%;box-shadow:0 0 38px #69a7ee50;border:1px solid #ead17c80}
.wheel-center{inset:31% 18%;border-radius:0;background:transparent;box-shadow:none;gap:6px;padding:0}
.wheel-caption,.wheel-footnote{white-space:normal;line-height:1.5}
.wheel-diagram{opacity:.85}
.wheel-diagram .diagram-lines{opacity:.65}
.draw-button{background:var(--gold);border-color:var(--gold);color:#20284e;border-radius:2px;box-shadow:0 5px 24px #06092e40}
.draw-button:hover:not(:disabled){background:#f5df99}
.draw-button:disabled{background:#b7a771;border-color:#d1bc77;color:#20284e}
.paper{border:1px solid #cbb568;box-shadow:0 18px 48px #06092e55;background:var(--paper)}
.paper-area::before{background:#c7b15c;opacity:.4}
.paper-topline,.paper-brand,.result-number,.unopened .unopened-note{color:#58608c}
.unopened-card{width:160px;height:auto;box-shadow:0 6px 20px #1c244630;margin-bottom:24px}
.unopened-label,.unopened-divider{display:none}
.unopened{padding-top:24px}
.fortune{color:#303963;border-color:#b49a48;transform:none}
.fortune-note{color:#535f8c}
.result-type{font-family:var(--sans);font-size:.875rem;color:#58608c;line-height:1.5;margin:0 0 9px;letter-spacing:.08em}
.advice h3,.next-step h3{color:#465286}
.next-step{background:#eef2fc;border-left-color:#728bcc}
.paper-footer{color:#68739b}
.result-watermark{opacity:.075}
.site-footer{color:#d1d9f0}
@media(max-width:650px){.unopened-card{width:118px;margin-bottom:18px}.unopened{padding-top:18px}.wheel-center{inset:30% 15%;}.rolling-number{font-size:1.4rem}.wheel.is-spinning .rolling-number{font-size:1.5rem}.wheel-footnote{font-size:.875rem}}

/* Keep the pointer above the nine on every viewport. */
.wheel-marker{top:-8px}