*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{overflow:hidden}button,input{font:inherit}.shell{color:#202326;background:#f4f3f0;min-height:100vh;font-family:Inter,Helvetica Neue,Arial,sans-serif}.header{background:#fffffff5;border-bottom:1px solid #d8d5cf;align-items:center;gap:18px;height:58px;padding:0 20px;display:flex}.header>div{align-items:baseline;gap:10px;min-width:0;display:flex}.header strong{font-size:15px}.header span{color:#76736e;font-size:12px}.brand{flex:0 0 40px;justify-content:center;align-items:center;width:40px;height:40px;text-decoration:none;display:inline-flex}.brand img{object-fit:contain;width:38px;height:38px;display:block}.workspace{height:calc(100vh - 58px);min-height:520px;display:flex}.mapStage{background:#e8e6e1;flex:auto;min-width:0;position:relative;overflow:hidden}.map{position:absolute;inset:0}.addressSearch{z-index:19;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:min(520px,100% - 150px);display:grid;position:absolute;top:14px;left:14px}.addressSearch input,.addressSearch button{color:#303337;min-height:44px;font:inherit;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#fffffff0;border:1px solid #bcb8afe6;border-radius:10px;box-shadow:0 3px 12px #1e22261f}.addressSearch input{outline:none;min-width:0;padding:0 13px}.addressSearch input:focus{border-color:#8ea9bc;box-shadow:0 0 0 2px #567e9c1f,0 3px 12px #1e22261f}.addressSearch button{cursor:pointer;padding:0 15px}.addressSearch button:disabled{cursor:default;opacity:.55}.addressSearchAttribution{color:#6f6b64;grid-column:1/-1;justify-self:start;margin-top:-2px;font-size:10px;text-decoration:none}.addressSearchAttribution:hover{text-decoration:underline}.addressSearchStatus{color:#6c6861;background:#fffffff0;border-radius:7px;grid-column:1/-1;justify-self:start;margin-top:-1px;padding:6px 9px;font-size:12px;box-shadow:0 2px 8px #1e22261a}.mapStatus{z-index:10;color:#5d5a55;background:#fffffff0;border:1px solid #c8c4bc;border-radius:10px;max-width:min(520px,100% - 40px);padding:10px 14px;font-size:13px;position:absolute;top:72px;left:50%;transform:translate(-50%);box-shadow:0 8px 26px #191c1f1a}.panel{background:#fbfaf7;border-left:1px solid #d4d1cb;flex:none;width:min(360px,42vw);overflow-y:auto}.panelHeading{z-index:2;background:#fbfaf7f7;border-bottom:1px solid #e0ddd7;justify-content:space-between;align-items:flex-start;gap:14px;padding:18px 18px 15px;display:flex;position:sticky;top:0}.panelHeading>div{gap:3px;display:grid}.panelHeading strong{font-size:15px}.panelHeading span{color:#817d76;font-size:11px}.panelHeading button,.panelOpenButton{color:#45484b;cursor:pointer;background:#fff;border:1px solid #c9c5be;border-radius:8px}.panelHeading button{width:31px;height:31px;font-size:20px;line-height:1}.templateLockButton{z-index:18;color:#7b7e80;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffe6;border:1px solid #bcb8afe0;border-radius:10px;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;top:68px;right:14px;box-shadow:0 3px 12px #1e22261f}.templateLockButton:hover{background:#fffffffa}.templateLockButton.isLocked{color:#3d6f95}.templateLockButton svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:25px;height:25px}.templateVisibilityButton{z-index:18;color:#3d6f95;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffffe6;border:1px solid #bcb8afe0;border-radius:10px;place-items:center;width:44px;height:44px;padding:0;display:grid;position:absolute;top:14px;right:14px;box-shadow:0 3px 12px #1e22261f}.templateVisibilityButton:hover{background:#fffffffa}.templateVisibilityButton.isHidden{color:#7b7e80}.templateVisibilityButton svg{fill:none;stroke:currentColor;stroke-width:1.9px;stroke-linecap:round;stroke-linejoin:round;width:25px;height:25px}.panelOpenButton{z-index:18;padding:9px 13px;position:absolute;top:16px;right:68px}.controlSection{border-bottom:1px solid #e4e1db;padding:17px 18px}.controlSection h2{color:#69655f;letter-spacing:.09em;text-transform:uppercase;margin:0 0 13px;font-size:11px;font-weight:700}.coordinates,.readout{grid-template-columns:1fr 1fr;gap:7px;margin-top:10px;display:grid}.coordinates span,.readout span{color:#817d76;background:#fff;border:1px solid #e0ddd6;border-radius:8px;gap:3px;padding:8px 9px;font-size:10px;display:grid}.coordinates b,.readout b{color:#303337;font-size:12px;font-weight:600}.field{gap:7px;margin-top:11px;display:grid}.field>span{color:#625f59;font-size:12px}.field input[type=number],.field select{color:#202326;background:#fff;border:1px solid #cbc7bf;border-radius:8px;width:100%;min-height:38px;padding:8px 10px}.field input[type=range]{width:100%}.toggle,.disabledToggle{color:#33363a;align-items:center;gap:9px;width:fit-content;max-width:100%;min-height:32px;font-size:13px;display:flex}.disabledToggle{color:#8b8881;margin-top:13px}.note{color:#817d76;margin:8px 0 0;font-size:11px;line-height:1.45}.clearButton{color:#34373a;cursor:pointer;background:#fff;border:1px solid #bdb9b1;border-radius:9px;width:calc(100% - 36px);min-height:40px;margin:18px;font-size:13px}.resetMapButton{color:#4f5357;cursor:pointer;min-height:36px;font:inherit;background:#fff;border:1px solid #d2cec6;border-radius:8px;margin-top:10px;padding:0 12px;font-size:12px}.resetMapButton:hover{background:#f7f5f1}.markerHost{width:0;height:0;position:relative;overflow:visible}.compassOverlay{pointer-events:none;filter:drop-shadow(0 2px 4px #1416182e);position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.compassSvg{pointer-events:auto;touch-action:none;cursor:grab;width:100%;height:100%;display:block;overflow:visible}.compassSvg:active{cursor:grabbing}.facadeBadgeOverlay{pointer-events:none;position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.facadeBadgeSvg{pointer-events:none;touch-action:none;width:100%;height:100%;display:block;overflow:visible}.luopanFrame circle,.templateRings circle{fill:none;stroke:#2023268f;stroke-width:.3px}.templateWatermark{opacity:.09;filter:grayscale();pointer-events:none}.luopanFrame text{fill:#232629;paint-order:stroke;stroke:#ffffffc7;stroke-width:.55px;font-weight:500}.degreeTicks line{stroke:#20232694;stroke-width:.28px}.degreeLabels text{font-size:2.9px;font-weight:500}.hexagramTicks line{stroke:#20232680;stroke-width:.22px}.hexagramRing text{stroke-width:.35px;font-size:3.2px;font-weight:400}.mountainNameRing text{font-size:4.2px;font-weight:500}.directionRing text{font-size:4px;font-weight:600}.trigramRing text{font-size:6.8px;font-weight:600}.sectorTicks line,.mountainDividerTicks line{stroke:#1f2225a8;stroke-width:.3px}.templateDegreeLabels text{fill:#3f4346;paint-order:stroke;stroke:#ffffffb8;stroke-width:.38px;font-size:2.8px;font-weight:400}.mountainLabels text{fill:#202326;paint-order:stroke;stroke:#ffffffc2;stroke-width:.46px;font-size:6.6px;font-weight:450}.templateTone-light .luopanFrame circle,.templateTone-light .templateRings circle{stroke:#ffffffdb}.templateTone-light .luopanFrame text,.templateTone-light .templateDegreeLabels text,.templateTone-light .mountainLabels text{fill:#fff;stroke:#121518db}.templateTone-light .degreeTicks line,.templateTone-light .hexagramTicks line,.templateTone-light .sectorTicks line,.templateTone-light .mountainDividerTicks line{stroke:#ffffffe6}.templateTone-light .centerDot{fill:#fff;stroke:#202326}.templateTone-light .templateWatermark{opacity:.14;filter:grayscale()brightness(0)invert()}.mountainReadout{gap:7px;margin-top:8px;display:grid}.mountainReadout span{color:#817d76;background:#fff;border:1px solid #e0ddd6;border-radius:8px;gap:3px;padding:8px 9px;font-size:10px;display:grid}.mountainReadout b{color:#303337;font-size:12px;font-weight:600}.facadeAxis line{stroke:#e02b34;stroke-width:.76px}.facadeCrossbar{stroke-width:.7px}.centerDot{fill:#1f2326;stroke:#fff;stroke-width:.7px}@media (width<=760px){.header span{display:none}.workspace{position:relative}.panel{z-index:20;width:min(360px,92vw);position:absolute;inset:0 0 0 auto;box-shadow:-12px 0 32px #1c1f2224}.compassOverlay{max-width:84vw;max-height:84vw}}.flyingStarLayers{pointer-events:none}.natalCell rect{fill:#ffffffe6;stroke:#3d414452;stroke-width:.55px}.natalCell text,.annualBadge text,.monthlyBadge text{fill:#202326;paint-order:stroke;stroke:#ffffffdb;stroke-width:.65px}.natalCell .sittingStar,.natalCell .facingStar{font-size:6.5px;font-weight:700}.natalCell .baseStar{font-size:5.8px;font-weight:600}.annualBadge circle,.monthlyBadge circle{fill:#ffffffe6;stroke:#3d414447;stroke-width:.5px}.annualBadge text{font-size:6.7px;font-weight:800}.monthlyBadge text{font-size:6.5px;font-weight:400}.annualBadge.isFiveYellow circle,.monthlyBadge.isFiveYellow circle{fill:#fffffff0;stroke:#d81920;stroke-width:1.15px}.annualBadge.isFiveYellow text,.monthlyBadge.isFiveYellow text{fill:#202326;stroke:#ffffffe6;stroke-width:.5px}.monthlyBadge.isFiveYellow text{font-weight:400}.degreeBadge{pointer-events:all;cursor:grab}.degreeBadge:active{cursor:grabbing}.degreeBadge rect{fill:#e02b34;stroke:#ffffffe6;stroke-width:.45px}.degreeBadge text{fill:#fff;font-size:5.5px;font-weight:600}.field .housePeriodSelect{width:72px;min-width:72px}.housePeriodRange{color:#66625d;background:#fff;border:1px solid #e0ddd6;border-radius:7px;width:fit-content;margin:4px 0 8px;padding:5px 8px;font-size:11px;line-height:1.2}.dynamicControls{border-top:1px solid #e4e1db;gap:8px;margin-top:12px;padding-top:11px;display:grid}.flyingToggleGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;display:grid}.flyingToggleGrid .toggle{min-width:0}.flyingToggleGrid .toggle span{white-space:nowrap}.annualDirectionControls{gap:7px;padding-top:4px;display:grid}.layerSubheading{color:#625f59;font-size:11px;font-weight:600}.annualDirectionToggleGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;display:grid}.annualDirectionToggleGrid .toggle{min-width:0}.annualDirectionToggleGrid .toggle span{white-space:nowrap}.luopanRingControls{gap:7px;margin-top:10px;display:grid}.luopanRingGrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;display:grid}.luopanRingGrid .toggle{min-width:0}.luopanRingGrid .toggle span{white-space:normal}.annualDirectionWedge{pointer-events:none;stroke-width:.65px}.taiSuiWedge{fill:#d6992f33;stroke:#ae7009d1}.suiPoWedge{fill:#be4c5b29;stroke:#a53040cc}.orientationActionRow{justify-content:flex-start;align-items:stretch;gap:8px;display:flex}.wallAlignButton{color:#4f5357;cursor:pointer;min-height:42px;font:inherit;white-space:nowrap;background:#fff;border:1px solid #d7d3cc;border-radius:8px;padding:0 10px;font-size:11px}.wallAlignButton:hover{background:#f7f5f1}.orientationReadout{grid-template-columns:1fr 1fr;gap:7px;margin-top:9px;display:grid}.orientationReadout>span{background:#fff;border:1px solid #e0ddd6;border-radius:8px;gap:2px;min-width:0;padding:8px 9px;display:grid}.orientationReadout small{color:#817d76;font-size:10px;font-style:normal}.orientationReadout b{color:#202326;font-size:14px;font-weight:650}.orientationReadout em{color:#4f5357;font-size:10px;font-style:normal;line-height:1.25}.houseOrientationBlock{border-top:1px solid #e3dfd7;gap:7px;margin-top:10px;padding-top:10px;display:grid}.houseOrientationHeading{justify-content:space-between;align-items:center;gap:8px;display:flex}.houseOrientationHeading strong{color:#625f59;letter-spacing:.03em;text-transform:uppercase;font-size:11px}.houseOrientationReadout{margin-top:0}.houseOrientationCard{background:#fff;border:1px solid #e0ddd6;border-radius:8px;gap:2px;min-width:0;padding:8px 9px;display:grid}.houseOrientationCard input{color:#202326;width:100%;min-width:0;font:inherit;background:0 0;border:0;outline:none;padding:0;font-size:14px;font-weight:650}.houseOrientationCard small{color:#817d76;font-size:10px}.houseOrientationCard em{color:#4f5357;font-size:10px;font-style:normal;line-height:1.25}.magneticStatus{color:#817d76;background:#fff;border:1px solid #e0ddd6;border-radius:8px;justify-content:space-between;align-items:baseline;gap:10px;margin-top:7px;padding:6px 9px;font-size:10px;display:flex}.magneticStatus b{color:#303337;font-size:12px;font-weight:600}.magneticStatus.compact{flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;min-height:42px;margin-top:0;padding:7px 8px}.magneticStatus.compact b{font-size:13px}.magneticModeOptions{gap:2px;margin:4px 0 2px 25px;display:grid}.magneticYearField{max-width:150px;margin-top:4px}.magneticReadout{margin-top:8px}@media (width<=760px){.addressSearch{width:calc(100% - 82px)}.panelOpenButton{top:122px;right:14px}}.solarMonthRange{color:#55524d;background:#fff;border:1px solid #e0ddd6;border-radius:8px;padding:7px 9px;font-size:11px;line-height:1.35}.flyingDateRow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;display:grid}.dateControl{gap:6px;display:grid}.dateControl>span{color:#625f59;font-size:11px}.dateStepper{grid-template-columns:28px minmax(0,1fr) 28px;min-width:0;display:grid}.dateStepper button,.dateStepper input,.dateStepper select{color:#202326;background:#fff;border:1px solid #cbc7bf;min-width:0;height:36px}.dateStepper button{cursor:pointer;padding:0;font-size:20px;line-height:1}.dateStepper button:first-child{border-radius:8px 0 0 8px}.dateStepper button:last-child{border-radius:0 8px 8px 0}.dateStepper input,.dateStepper select{text-align:center;text-align-last:center;border-left:0;border-right:0;border-radius:0;width:100%;padding:5px 6px}.dateStepper input[type=number]{appearance:textfield}.dateStepper input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.dateStepper input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.field .flyingYearInput{width:auto;min-width:0}.field .solarMonthSelect{width:auto;min-width:0;font-size:11px}