.size-proportion-header,.size-proportion-guide-hero,.page-article .attention-response-guide-hero{background:linear-gradient(130deg,#fff2df,#e3f0e9)}
.sp-board{display:flex;align-items:center;justify-content:center;padding:24px;min-height:440px;background:#fffaf2}
[data-sp-display]{width:100%;max-width:520px;margin:auto;line-height:0}
[data-sp-display] svg{display:block;width:100%;height:auto}
.sp-controls .choice-control{padding:20px 0;border-bottom:1px solid var(--line)}
.sp-controls .choice-control>div{flex-wrap:wrap}
.sp-controls .choice-control button{min-height:44px;padding:10px 12px;flex:1 1 95px}
.sp-toggle{display:flex;align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--line);font-size:.9rem;line-height:1.5;cursor:pointer}
.sp-toggle input{width:22px;height:22px;flex:0 0 auto;accent-color:#21705c}
.sp-controls .range-control>span{gap:12px}
.sp-controls input[type=range]{min-height:24px}
.sp-controls output{white-space:nowrap}
.sp-controls button:focus-visible,.sp-controls input:focus-visible{outline:3px solid #21705c;outline-offset:4px}
.sp-controls .reset-button{min-height:44px}
.sp-controls .measurement-result{font-size:.9rem;line-height:1.65}
.sp-guide-practice{margin:32px 0;padding:clamp(16px,3vw,28px);background:#e8f3eb;border:1px solid #9bbba9}
.sp-guide-practice h3{margin-top:8px}
.sp-guide-practice .sp-practice-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.sp-guide-practice .sp-controls{padding:16px;background:#fffaf2}
.sp-guide-practice [data-sp-display]{align-self:center}
.sp-guide-practice .range-control{padding:14px 0}
.sp-noscript{padding:14px;background:#fff2df;font-size:.9rem;line-height:1.5}
[data-sp-demo].experiment-layout{align-items:start}
.sp-board[data-sp-display]{max-width:none;margin:0}
.sp-board svg{max-width:520px}
.sp-controls input:disabled{opacity:.45;cursor:not-allowed}
.visual-sp-rings .visual-sample{width:130px;height:100px;background:radial-gradient(circle at 25% 50%,#d56048 9px,transparent 10px 13px,#25223b 14px 16px,transparent 17px),radial-gradient(circle at 75% 50%,#d56048 9px,transparent 10px 28px,#25223b 29px 31px,transparent 32px)}
.visual-sp-arcs .visual-sample{width:110px;height:82px;border:14px solid #25223b;border-top:0;border-radius:0 0 70% 70%;box-shadow:15px 25px 0 -3px #d56048;transform:rotate(-10deg)}
.visual-sp-axes .visual-sample{width:90px;height:90px;border-left:5px solid #25223b;border-bottom:5px solid #25223b}
.visual-sp-divided .visual-sample{width:140px;height:60px;border-right:3px solid #25223b;background:linear-gradient(90deg,#25223b 3px,transparent 3px) 0 0/17px 100% no-repeat, repeating-linear-gradient(90deg,#25223b 0 3px,transparent 3px 17px) left/70px 100% no-repeat}
.visual-sp-frames .visual-sample{width:130px;height:80px;border:3px solid #25223b;transform:skew(25deg);background:linear-gradient(45deg,transparent 48%,#d56048 49% 52%,transparent 53%),linear-gradient(90deg,transparent 65%,#25223b 65% 68%,transparent 68%)}
@media(max-width:950px){.sp-guide-practice .sp-practice-layout{grid-template-columns:minmax(0,1fr)}.sp-guide-practice [data-sp-display]{max-width:390px}}
@media(max-width:700px){.sp-board{min-height:300px;padding:12px}.sp-controls{padding:18px}.sp-controls .control-panel-title{flex-wrap:wrap;gap:8px}.sp-controls .choice-control>div{gap:8px}.sp-guide-practice{padding:14px}.sp-guide-practice .sp-controls{padding:12px}}