@charset "UTF-8";
:root{--paper:#f6f5ef;--white:#fffefb;--ink:#303e35;--muted:#7a8177;--line:#e2e5db;--green:#526b58;--green-light:#e8eee3;--sage:#eef0e8;--clay:#9b5d45;--clay-light:#f3e8dc;--slate:#687781;--slate-light:#e9edef;--ray:#6e8491;--serif:"Songti SC","Noto Serif CJK SC","SimSun",serif;--sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}button,select,input{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid var(--green);outline-offset:4px}a{color:inherit;text-decoration:none}button{color:inherit}[hidden]{display:none!important}.site-header{max-width:1264px;margin:auto;padding:24px 44px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:2px}.brand-light{font-weight:400;margin-left:3px}.brand-mark{width:31px;height:31px;display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:4px;border:1px solid var(--green);border-radius:3px}.brand-mark i{background:var(--green);opacity:.75}.brand-mark i:nth-child(5){opacity:.15}.header-right{display:flex;align-items:center;gap:34px;font-size:12px}.edition{color:var(--muted);letter-spacing:1px}.guide-link{border-bottom:1px solid #bdc8b9;padding-bottom:3px}.guide-link span{margin-left:12px}main{max-width:1176px;margin:0 auto;padding:0 0 56px}.hero{display:flex;justify-content:space-between;align-items:flex-end;padding:43px 0 31px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--green);display:flex;align-items:center;gap:9px;margin-bottom:12px}.eyebrow>span{width:18px;height:1px;background:var(--green)}h1{font-family:var(--serif);font-size:40px;font-weight:500;line-height:1.25;letter-spacing:2px;margin:0 0 13px}h1 span{color:var(--green)}.hero p{color:var(--muted);font-size:13px;letter-spacing:.5px;margin:0}.hero-note{display:flex;gap:12px;font-size:11px;align-items:center;color:var(--green);padding-bottom:4px}.hero-note span:not(.note-symbol){color:var(--muted);font-size:10px}.note-symbol{font-family:var(--serif);font-size:38px;font-weight:100;line-height:1}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 326px;gap:22px;align-items:start}.canvas-card{background:var(--white);border:1px solid var(--line);border-radius:17px;padding:25px 28px 20px;box-shadow:0 5px 18px #28362403}.canvas-heading{display:flex;justify-content:space-between;align-items:center}.section-kicker{font-size:9px;letter-spacing:2.2px;color:#8e968b;font-weight:500}h2{margin:0;font-size:17px;font-weight:500;letter-spacing:.5px}.canvas-heading h2{font-size:18px;margin-top:1px}.status-pill{font-size:11px;color:var(--green);background:var(--green-light);border:1px solid #dbe3d4;padding:5px 12px;border-radius:30px}.canvas-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;color:var(--muted);font-size:11px;margin:22px 0 0}.text-button{background:none;border:0;padding:6px 0 6px 10px;color:var(--muted);font-size:11px;white-space:nowrap}.text-button span{font-size:16px;margin-right:4px}.text-button:hover{color:var(--ink)}.compass-frame{position:relative;margin:6px auto 0;width:min(100%,624px);padding:31px}.compass{position:absolute;font-size:12px;letter-spacing:3px;line-height:1;color:var(--ink);display:flex;align-items:center;gap:5px}.compass b{font-weight:400;font-size:9px;letter-spacing:0;color:#9ba195}.compass-n{top:8px;left:50%;transform:translateX(-50%)}.compass-s{bottom:8px;left:50%;transform:translateX(-50%)}.compass-e{right:2px;top:50%;transform:translateY(-50%);flex-direction:column;gap:9px;letter-spacing:0}.compass-w{left:2px;top:50%;transform:translateY(-50%);flex-direction:column;gap:9px;letter-spacing:0}.board{position:relative;width:100%;aspect-ratio:1;container-type:inline-size}.grid-ground,.annotations,.ray-layer{position:absolute;inset:0;width:100%;height:100%}.grid-ground{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:7px}.ground-cell{background:var(--sage);border:1px solid #e2e6da;border-radius:9px;transition:background .2s}.ground-cell.good{background:var(--clay-light);border-color:#e6d9c8}.ground-cell.caution{background:var(--slate-light);border-color:#dce3e5}.ground-cell.door-ground{background:#e4eadd;border-color:#afbea4}.ground-cell.center-ground.selected-center{background:#f4f3ec;border-color:#e4e3d9}.ray-layer{z-index:1;border-radius:9px;pointer-events:none;overflow:hidden}.ray-layer path,.ray-layer line,.ray-layer circle{vector-effect:non-scaling-stroke}.annotations{z-index:2;pointer-events:none}.direction-cell{position:absolute;width:calc((100% - 14px)/3);height:calc((100% - 14px)/3);background:none;border:1.5px solid transparent;border-radius:9px;padding:9px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;pointer-events:auto;transition:border-color .15s,box-shadow .15s;line-height:1.4}.direction-cell:hover{border-color:#97aa8e;background:#ffffff18}.direction-cell:focus-visible{outline-offset:0;z-index:3}.direction-cell.is-door{border-color:#718568;box-shadow:inset 0 0 0 3px #ffffff50}.direction-cell .direction{font-size:clamp(10px,2.15cqw,12px);font-family:var(--sans);font-weight:400;letter-spacing:1px;color:#7b8479}.star{font-family:var(--serif);font-size:clamp(22px,5.5cqw,33px);letter-spacing:3px;line-height:1.5;font-weight:500;white-space:nowrap}.good .star{color:var(--clay)}.caution .star{color:var(--slate)}.is-door .star{color:var(--green)}.star-note{font-size:clamp(9px,1.75cqw,10px);letter-spacing:1px;color:#92978c;line-height:1.3}.door-marker{position:absolute;right:8px;top:6px;display:flex;gap:4px;align-items:center;font-size:9px;color:var(--green);letter-spacing:0}.door-marker svg{width:11px;height:11px;stroke:currentColor;fill:none;stroke-width:1.4}.personal-tag{margin-top:5px;padding:3px 7px;background:#e3eadb;color:#4d6545;border:1px solid #ccd9c0;border-radius:5px;display:flex;flex-direction:column;align-items:center;font-family:var(--sans);font-size:clamp(9px,1.9cqw,11px);line-height:1.45;letter-spacing:0;white-space:nowrap}.personal-tag small{font-size:clamp(8px,1.6cqw,9px);color:#738366}.personal-tag.secondary{background:#f0f2e9;border-color:#d8deca;color:#697650}.personal-tag.neutral{background:#ffffff80;border-color:#dfe2db;color:#858b7f}.personal-tag.neutral small{color:#92988a}.center-label{position:absolute;left:calc(100%/3);top:calc(100%/3);width:calc(100%/3);height:calc(100%/3);z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;pointer-events:none}.center-glyph{font-family:var(--serif);font-size:clamp(22px,5.2cqw,33px);color:var(--green);letter-spacing:3px}.center-label small{font-size:clamp(8px,1.8cqw,10px);letter-spacing:1px;color:var(--muted)}.center-rule{height:1px;width:22px;background:#b7c3ad}.has-personal .direction-cell{gap:0}.has-personal .star{font-size:clamp(21px,4.7cqw,29px);line-height:1.3}.has-personal .star-note{display:none}.is-radial:before{content:"";position:absolute;inset:1%;border:1px solid #d8e0d4;border-radius:50%;background:#f8f9f4}.is-radial .ray-layer{clip-path:circle(49% at 50% 50%);border-radius:50%}.is-radial .direction-cell{width:25%;height:23%;padding:3px;background:#fffefbe8;border:1px solid #e4e7df;border-radius:10px;gap:0}.is-radial .direction-cell.is-door{border-color:#718568;box-shadow:inset 0 0 0 2px #e4eadd}.is-radial .direction-cell:hover{background:#fffefb;border-color:#b1bfa6}.is-radial .star{font-size:clamp(19px,4.4cqw,28px);letter-spacing:2px;line-height:1.3}.is-radial .star-note{font-size:clamp(8px,1.5cqw,10px)}.is-radial .direction{font-size:clamp(9px,1.9cqw,11px);letter-spacing:0}.is-radial .personal-tag{font-size:clamp(8px,1.8cqw,10px);padding:2px 4px;margin-top:3px;line-height:1.25}.is-radial .personal-tag small{font-size:clamp(7px,1.5cqw,9px)}.is-radial .center-label{left:36%;top:38%;width:28%;height:24%;border-radius:50%;background:#fffefbeb}.is-radial .center-glyph{font-size:clamp(18px,4.2cqw,26px)}.is-radial .door-marker{top:1px;right:3px;font-size:8px}.is-radial .door-marker svg{display:none}.is-radial.has-personal .star{font-size:clamp(17px,3.9cqw,25px)}.is-personal-only .direction-cell{height:24%;border-color:#d8e1cc;background:#f0f3e9}.is-personal-only .direction-cell .personal-action{font-size:clamp(18px,4.5cqw,27px);font-family:var(--serif);letter-spacing:2px;color:var(--green);line-height:1.5}.is-personal-only .direction-cell.neutral{background:#f5f5f0;border-color:#e4e6de}.is-personal-only .direction-cell.neutral .personal-action{color:#92968c}.is-personal-only .personal-tag{margin-top:1px;background:none;border:none;color:#728166;padding:0;line-height:1.45}.is-personal-only .center-glyph{letter-spacing:1px}.canvas-caption{display:flex;align-items:flex-start;justify-content:center;gap:7px;font-size:11px;color:#7b8576;margin-top:13px;min-height:18px}.caption-dot{width:4px;height:4px;border-radius:50%;background:#899c7d;margin-top:7px;flex-shrink:0}.legend{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;border-top:1px solid #ebede5;margin-top:19px;padding-top:16px;font-size:10px;color:#8a9087}.legend>span{display:flex;align-items:center;gap:5px}.legend i{width:7px;height:7px;border-radius:2px}.legend-good{background:#be9275}.legend-caution{background:#a0afb6}.legend-personal{background:#8caa75}.legend-ray{background:#6e8491}.controls{display:flex;flex-direction:column;gap:15px}.control-section{padding:21px;background:var(--white);border:1px solid var(--line);border-radius:14px}.control-title{display:flex;align-items:center;gap:9px;margin-bottom:19px}.control-title h2{font-size:14px}.step-number{font-size:10px;color:#9ba38f;border:1px solid #e2e6da;border-radius:50%;width:23px;height:23px;display:flex;align-items:center;justify-content:center}.tiny-label{margin-left:auto;color:#99a18f;font-size:9px;letter-spacing:1px}.field-label{font-size:11px;color:var(--muted);display:block;margin-bottom:8px}select{background:var(--white);border:1px solid #d9dfd0;border-radius:7px;color:var(--ink);padding:11px 13px;font-size:12px;min-width:0;cursor:pointer}.select-wrap select{width:100%;background:#f8f9f3}.field-note{font-size:10px;line-height:1.8;color:#98a08e;margin:9px 0 15px}.orientation-row{border-top:1px solid #edf0e7;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:5px}.orientation-row label{font-size:10px;color:var(--muted);white-space:nowrap}.orientation-row select{border:0;background:none;padding:4px 0;font-size:10px;color:#718066;width:163px}.layer-option{display:flex;gap:11px;align-items:center;position:relative;cursor:pointer;padding:9px 0}.layer-option+.layer-option{margin-top:10px}.layer-icon{font-size:25px;line-height:1.2;width:24px;text-align:center;color:#909b84}.ray-icon{color:#7f95a0}.personal-icon{color:#8eaa7c;font-size:29px}.layer-text{display:flex;flex-direction:column;gap:3px}.layer-text strong{font-weight:500;font-size:12px}.layer-text small{color:#98a08f;font-size:9px}.layer-option input{position:absolute;right:0;opacity:0;width:38px;height:30px;cursor:pointer}.switch{margin-left:auto;background:#e0e5da;width:34px;height:20px;border-radius:15px;position:relative;transition:background .2s;flex-shrink:0}.switch:after{content:"";position:absolute;width:14px;height:14px;background:#fff;left:3px;top:3px;border-radius:50%;box-shadow:0 1px 2px #0001;transition:transform .2s}.layer-option input:checked+.switch{background:#657e58}.layer-option input:checked+.switch:after{transform:translateX(14px)}.layer-option input:focus-visible+.switch{outline:2px solid var(--green);outline-offset:4px}.personal-option{border-top:1px solid #e9ede2;margin-top:15px!important;padding-top:18px}.ray-settings{margin:10px 0 0 35px;padding:11px;background:#f3f6f5;border-radius:8px}.segmented{display:flex;padding:3px;background:#e5ece9;border-radius:5px;margin-bottom:12px;gap:3px}.segmented button{flex:1;border:0;background:transparent;font-size:10px;padding:5px 2px;border-radius:4px;color:#7f8d86;white-space:nowrap}.segmented button[aria-pressed="true"]{color:var(--ink);background:#fff;box-shadow:0 1px 3px #00000008}.range-label{display:flex;justify-content:space-between;font-size:9px;color:#829188;margin-top:8px}.range-label output{color:#526c60;font-variant-numeric:tabular-nums}.ray-settings input{width:100%;height:4px;accent-color:#72917e;cursor:pointer;margin:10px 0}.ray-settings p{font-size:9px;line-height:1.7;color:#819187;margin:7px 0 0}.personal-only{font-size:10px;border:0;border-top:1px dashed #e1e7d8;background:none;display:flex;justify-content:space-between;width:100%;margin-top:12px;padding:12px 0 0;color:#799268}.personal-only:hover{color:#3c5530}.personal-card{padding:18px 21px 15px;border:1px solid #dde4d2;background:#edf1e4;border-radius:14px}.personal-card-top{display:flex;align-items:center;gap:7px;font-size:10px;color:#6f815f}.small-spark{font-size:18px}.gua-label{margin-left:auto;font-size:8px;color:#929e81}.preferred-directions{display:flex;margin:17px 0 14px;gap:17px}.preferred-directions>div{position:relative;flex:1;padding-left:32px}.preferred-directions>div:first-child{border-right:1px solid #d7e0cb}.preferred-directions>div>span{position:absolute;top:0;left:0;font-family:var(--serif);font-size:27px;line-height:1.1;color:#9aae86}.preferred-directions strong{display:block;font-size:12px;font-weight:500;letter-spacing:2px}.preferred-directions small{font-size:8px;color:#8c9b7b;white-space:nowrap}.personal-card p{font-size:9px;line-height:1.9;color:#92a082;margin:0}.reading-card{border:1px solid var(--line);background:#f1f2ea;border-radius:12px;display:flex;gap:16px;margin-top:22px;padding:21px 26px}.reading-icon{font-size:34px;color:#9ba88c;font-family:var(--serif);line-height:1.1}.reading-content{flex:1}.reading-content h2{font-size:13px;font-weight:500;margin-bottom:4px}.reading-content p{font-size:11px;color:#939b88;line-height:1.8;margin:0}.reading-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.reading-chips:empty{display:none}.reading-chips span{font-size:10px;color:#7b816f;padding:4px 9px;border:1px solid #dae1cf;border-radius:4px;background:#f9faf4}.reading-chips span.match{background:#e7eddb;border-color:#c9d5b8;color:#62734e}.guide{display:grid;grid-template-columns:1fr 2fr;gap:40px;margin-top:50px;scroll-margin-top:24px}.guide-intro h2{font-family:var(--serif);font-size:24px;margin-top:7px}.guide-intro p{font-size:11px;color:#9ba18e;margin-top:9px}.guide-details details{border-bottom:1px solid var(--line)}summary{padding:18px 0;cursor:pointer;display:flex;justify-content:space-between;font-size:12px;color:#66745f;list-style:none}summary::-webkit-details-marker{display:none}summary span{color:#98a28a;margin-left:12px}details[open] summary span{transform:rotate(45deg)}.detail-body{padding:0 16px 16px 0;color:#87907c;font-size:11px;line-height:1.9}.detail-body p{margin:0 0 10px}.detail-body p:last-child{margin-bottom:0}.detail-body a{color:#586f4c;text-decoration:underline;text-underline-offset:3px}footer{max-width:1176px;margin:0 auto;border-top:1px solid var(--line);padding:22px 0 28px;display:flex;justify-content:space-between;font-size:10px;color:#a2a794}footer i{font-style:normal;margin:0 7px;color:#b6bdab}.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#354b39;color:#fff;padding:11px 18px;max-width:90vw;width:max-content;border-radius:8px;font-size:12px;z-index:10;box-shadow:0 3px 20px #2030201a}.is-blank.is-grid .direction-cell:hover:after{content:"＋";font-size:23px;font-weight:300;color:#a4b099}.is-blank .ground-cell{background:var(--sage);border-color:#e2e6da}.is-blank.is-grid .center-label{display:none}
@media(min-width:1300px){.compass-frame{width:624px}}
@media(max-width:1250px){.site-header{padding-left:32px;padding-right:32px}main,footer{margin-left:32px;margin-right:32px}.workspace{grid-template-columns:minmax(0,1fr) 310px}.canvas-card{padding:24px}.compass-frame{padding:28px}}
@media(max-width:1000px){main,footer{margin-left:24px;margin-right:24px}.site-header{padding:20px 24px}.workspace{grid-template-columns:minmax(0,1fr) 285px;gap:16px}.canvas-card{padding:20px 14px}.control-section{padding:18px}.personal-card{padding:18px}.hero{padding-top:32px}h1{font-size:34px}.hero-note{display:none}.canvas-heading{padding:0 6px}.canvas-toolbar{padding:0 6px;font-size:10px}.compass-frame{padding:26px}.status-pill{font-size:10px;padding:4px 9px}.legend{gap:10px}.personal-tag{padding:2px 3px}.direction-cell{padding:5px}.door-marker{top:3px;right:4px}.has-personal .direction{font-size:9px}.has-personal .personal-tag{font-size:9px}.has-personal .personal-tag small{font-size:8px}}
@media(max-width:760px){main,footer{margin-left:20px;margin-right:20px}.site-header{padding:18px 20px}.brand{font-size:19px;gap:9px}.brand-mark{width:27px;height:27px;gap:2px}.edition{display:none}.header-right{font-size:11px}.hero{padding:31px 0 24px}h1{font-size:31px;letter-spacing:1px;margin-bottom:10px}.hero p{font-size:11px}.eyebrow{font-size:9px;margin-bottom:10px}.workspace{display:flex;flex-direction:column;gap:16px}.canvas-card{width:100%;padding:20px 13px 17px}.canvas-heading h2{font-size:17px}.canvas-toolbar{margin-top:15px;gap:4px;font-size:10px}.compass-frame{width:min(100%,570px);padding:26px;margin-top:4px}.controls{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:13px;align-items:start}.control-section{height:100%;padding:17px}.personal-card{grid-column:1/-1;padding:17px 20px}.personal-card .preferred-directions{max-width:350px}.personal-card p{font-size:10px}.control-title{gap:7px}.tiny-label{display:none}.orientation-row{flex-wrap:wrap;gap:6px}.orientation-row select{width:100%}.layer-text small{font-size:9px;max-width:120px}.layer-icon{display:none}.ray-settings{margin-left:0;padding:8px}.personal-only{font-size:10px}.guide{grid-template-columns:1fr;gap:13px;margin-top:32px}.guide-intro h2{font-size:22px}.guide-intro p{margin:6px 0 0}.reading-card{padding:18px 17px;gap:10px;margin-top:16px}.reading-content p{font-size:10px}.reading-icon{font-size:27px}footer{font-size:9px;gap:15px;flex-direction:column;padding:19px 0;gap:5px}.canvas-caption{font-size:10px;padding:0 3px;margin-top:9px}.legend{font-size:9px;gap:8px 13px;margin-top:14px;padding-top:13px}.direction-cell .direction{font-size:clamp(9px,2.35cqw,12px)}.star{font-size:clamp(23px,6.5cqw,33px)}.has-personal .star{font-size:clamp(21px,5.6cqw,29px)}.has-personal .direction{font-size:clamp(8px,2.3cqw,12px)}.has-personal .personal-tag{font-size:clamp(8px,2.3cqw,11px);margin-top:4px;padding:2px 4px}.has-personal .personal-tag small{font-size:clamp(7px,1.9cqw,9px)}.is-radial .direction{font-size:clamp(8px,2.3cqw,11px)}.is-radial .star{font-size:clamp(17px,5cqw,26px)}.is-radial.has-personal .star{font-size:clamp(15px,4.4cqw,25px)}.is-radial.has-personal .personal-tag{font-size:clamp(7px,2.1cqw,10px);padding:1px 2px;margin-top:2px}.is-radial.has-personal .personal-tag small{font-size:clamp(6px,1.8cqw,9px)}.is-radial .direction-cell{padding:3px 0}.is-radial .door-marker{font-size:7px;top:-3px;right:-2px;background:var(--white);padding:1px 2px;border-radius:3px}.is-personal-only .direction-cell .personal-action{font-size:clamp(17px,5.1cqw,27px)}.is-personal-only .personal-tag{font-size:clamp(8px,2.35cqw,11px)}.is-personal-only .personal-tag small{font-size:clamp(7px,2cqw,10px)}main{padding-bottom:28px}}
@media(max-width:400px){main,footer{margin-left:13px;margin-right:13px}.site-header{padding-left:16px;padding-right:16px}h1{font-size:28px}.canvas-card{padding-left:9px;padding-right:9px}.compass-frame{padding:24px}.controls{gap:10px}.control-section{padding:14px}.field-label{font-size:10px}.control-title h2{font-size:12px}.layer-text strong{font-size:11px}.switch{width:30px;height:18px}.switch:after{width:12px;height:12px}.layer-option input:checked+.switch:after{transform:translateX(12px)}.layer-text small{font-size:8px}.status-pill{font-size:9px}.canvas-toolbar{font-size:9px}.guide-intro h2{font-size:21px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

@media(max-width:760px){.is-radial.has-personal .personal-tag{font-size:9px;line-height:1.15}.is-radial.has-personal .personal-tag small{font-size:8px}.is-radial .direction{font-size:10px}.is-personal-only .personal-tag{font-size:10px}.is-personal-only .personal-tag small{font-size:9px}}
