.ruler-section{margin-top:21px;background:linear-gradient(145deg,#1d2947,#121c35);border:1px solid #384b6a;border-radius:22px;padding:30px}.ruler-header{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}.ruler-header h2{font:400 32px Georgia,'Yu Mincho',serif;margin:7px 0}.ruler-header p{font-size:16px;color:#b7c6de;line-height:1.8;margin:0}.ruler-toggle{display:flex;gap:5px;padding:5px;background:#0f1930;border:1px solid #40516a;border-radius:14px;flex-shrink:0}.ruler-toggle button{border:0;background:transparent;color:#b2c1d9;font-size:15px;padding:11px 17px;border-radius:10px}.ruler-toggle button.active{background:#e5ce9e;color:#1b2438;font-weight:800}.ruler-layout{display:grid;grid-template-columns:minmax(350px,1fr) minmax(340px,.83fr);gap:26px;align-items:center}.ruler-wheel{width:100%;max-width:560px;margin:auto;aspect-ratio:1;position:relative;background:radial-gradient(circle,#222b4b 0,#141f3c 37%,#10192f 67%,transparent 80%);border-radius:50%}.ruler-wheel svg{position:absolute;width:100%;height:100%;inset:0}.wheel-outer,.wheel-inner{fill:none;stroke:#7c8eb7;stroke-opacity:.32;stroke-width:1}.wheel-inner{stroke-dasharray:3 6}.wheel-spoke{stroke:#91a5c7;stroke-opacity:.16;stroke-width:1}#rulerBeam{stroke:#edd39b;stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 7px #f5d796);transition:x2 .85s ease,y2 .85s ease}#rulerEnd{fill:#ffdc9f;filter:drop-shadow(0 0 9px #f5c574);transition:cx .85s ease,cy .85s ease}.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;border:1px solid #bca984;background:radial-gradient(circle,#38405d,#1a2341 75%);box-shadow:0 0 32px #e9c79729;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}.wheel-center span{font:62px Georgia,serif;color:#f2d6a5;line-height:1}.wheel-center strong{font-size:18px}.wheel-center small{font-size:10px;letter-spacing:.2em;color:#aebbd3;margin-top:5px}.sign-choice{position:absolute;transform:translate(-50%,-50%);width:72px;min-height:59px;background:#1c2a46;border:1px solid #455574;border-radius:12px;color:#dce7f5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px}.sign-choice span{font:29px Georgia,serif;color:var(--sign-color)}.sign-choice small{font-size:11px;white-space:nowrap}.sign-choice.active{background:#36314b;border:2px solid #f2d5a1;box-shadow:0 0 27px #e2c88c4f}.ruler-detail{padding:23px 25px;border-radius:18px;background:#141f38;border:1px solid #354866}.ruler-identity{display:flex;align-items:center;gap:17px;margin:14px 0 22px}.ruler-identity>span{font:60px Georgia,serif;color:#f0d19b}.ruler-identity h3{font-size:29px;margin:0 0 5px}.ruler-identity p{font-size:14px;color:#a6b8d4;margin:0}.ruler-connection{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#29324f;border:1px solid #5a5c7b;border-radius:12px;padding:14px;font-size:18px}.ruler-connection strong{color:#f3d6a3;font-size:24px}.ruler-arrow{color:#d3b384;font-size:26px}.ruler-detail h4{font-size:18px;color:#ebd4a8;margin:25px 0 9px}.ruler-detail>p{font-size:17px;line-height:1.95;color:#d0ddef}.ruler-example{border-left:3px solid #9accc7;padding:11px 16px;background:#1c2c42;border-radius:0 12px 12px 0}.ruler-example span{font-size:13px;color:#abdfd7;font-weight:700}.ruler-example p{color:#d5e5f0;font-size:16px;line-height:1.85;margin:6px 0 0}.ruler-controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:23px}.ruler-controls button{font-size:14px}.ruler-footnote{color:#91a7c4!important;font-size:13px!important;margin:16px 0 0}@media(max-width:1000px){.ruler-layout{grid-template-columns:1fr}.ruler-wheel{max-width:540px}}@media(max-width:650px){.ruler-section{padding:21px 12px}.ruler-header{display:block}.ruler-header h2{font-size:25px}.ruler-toggle{display:inline-flex;margin-top:15px}.ruler-wheel{width:100%;max-width:400px}.sign-choice{width:54px;min-height:48px}.sign-choice span{font-size:23px}.sign-choice small{font-size:9px}.wheel-center{width:112px;height:112px}.wheel-center span{font-size:45px}.wheel-center strong{font-size:15px}.ruler-detail{padding:18px}.ruler-identity h3{font-size:24px}.ruler-controls button{flex:1}}@media(prefers-reduced-motion:reduce){#rulerBeam,#rulerEnd{transition:none}}