.hexplay{--hp-ink:#20372f;--hp-paper:#f8f5ed;--hp-gold:#bda471;--hp-muted:#596b60;--hp-line:#d9ddcf;color:var(--hp-ink);font-family:Arial,'Noto Sans CJK SC',sans-serif;line-height:1.7;margin:28px 0 58px}.hexplay *{box-sizing:border-box}.hexplay [hidden]{display:none!important}.hexplay button{width:auto;min-height:46px;font:inherit;font-size:14px;border:1px solid var(--hp-line);border-radius:0;background:transparent;color:var(--hp-ink);padding:10px 17px;cursor:pointer;text-align:left;transition:background .2s,border-color .2s,color .2s}.hexplay button:hover{border-color:var(--hp-gold);background:#eeeadd}.hexplay button:focus-visible,.hexplay a:focus-visible{outline:3px solid #8e733f;outline-offset:4px}.hexplay button[aria-pressed=true]:not(.hp-line-button){background:var(--hp-ink);color:var(--hp-paper);border-color:var(--hp-ink)}.hexplay h2,.hexplay h3{font-family:Georgia,'Noto Serif CJK SC',serif;font-weight:400;line-height:1.35;letter-spacing:-.02em}.hexplay h2{font-size:24px;margin:0 0 12px}.hexplay h3{font-size:clamp(28px,3.2vw,41px);margin:12px 0 24px}.hexplay p{margin:0 0 16px}.hp-lab{border:1px solid var(--hp-line);background:#fffdf8}.hp-toolbar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:20px 26px;border-bottom:1px solid var(--hp-line)}.hp-mode{display:flex;gap:6px;flex-wrap:wrap}.hp-presets{display:flex;flex-wrap:wrap;gap:9px;padding:18px 26px;background:#efeee5;align-items:center}.hp-presets p{font-size:12px;color:var(--hp-muted);margin:0 12px 0 0}.hexplay .hp-presets button{padding:8px 12px;font-size:12px;min-height:44px}.hp-presets button span{color:#957c4b;margin-left:8px}.hp-workspace{display:grid;grid-template-columns:minmax(270px,.86fr) minmax(0,1.14fr)}.hp-editor{padding:35px 30px;background:var(--hp-ink);color:var(--hp-paper)}.hp-hint{font-size:13px;min-height:67px;color:#d6dccf;max-width:350px}.hp-lines{display:flex;flex-direction:column;gap:8px;padding:10px 0}.hexplay .hp-line-button{display:flex;width:100%;min-height:54px;align-items:center;gap:18px;color:var(--hp-paper);border:1px solid transparent;padding:10px 8px}.hexplay .hp-line-button:hover{background:#344c41;border-color:#5f7465}.hexplay .hp-line-button:focus-visible{outline-color:#d7c397}.hp-line-number{font-size:11px;color:#bdc9ba;width:16px}.hp-line-label{font-size:9px;letter-spacing:.09em;color:#bdc9ba;width:35px}.hp-line-drawing{display:flex;flex:1;gap:0;position:relative}.hp-line-drawing i{display:block;background:var(--hp-paper);height:12px;width:50%;transition:width .23s ease,margin .23s ease,background .2s}.hp-is-yin .hp-line-drawing{justify-content:space-between}.hp-is-yin .hp-line-drawing i{width:43%}.hexplay .hp-line-button.hp-selected{border-color:var(--hp-gold);background:#3c503d}.hp-selected .hp-line-drawing i{background:#d7c397}.hp-axis{font-size:10px!important;letter-spacing:.08em;color:#bdc9ba;text-align:center;margin:20px 0 0!important}.hp-primary{padding:36px 34px}.hp-kicker{font-size:12px;line-height:1.9;color:#8d7048;overflow-wrap:anywhere}.hp-description{font-size:15px;color:var(--hp-muted);line-height:1.85}.hexplay blockquote{border-left:2px solid var(--hp-gold);padding:12px 0 12px 17px;margin:22px 0 8px;font-family:Georgia,serif;font-size:18px;line-height:1.75;color:var(--hp-ink)}.hp-source{font-size:11px;color:var(--hp-muted);text-underline-offset:3px}.hp-observe{padding:30px 30px 24px;border-top:1px solid var(--hp-line)}.hp-transforms{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.hp-comparison-wrap{padding-top:20px;border-top:1px solid var(--hp-line);animation:hp-unfold .3s ease both}.hp-comparison-method{font-size:14px;color:var(--hp-muted);max-width:800px}.hp-comparison{display:flow-root;padding:15px 0 2px}.hp-comparison h3{font-size:28px;margin:8px 0 15px}.hp-mini{float:left;width:180px;padding:10px 26px 15px 0;margin:0 24px 0 0}.hp-mini-line{display:flex;gap:0;margin:0 0 14px;height:10px;justify-content:space-between}.hp-mini-line i{display:block;background:var(--hp-ink);width:50%;height:10px}.hp-mini-line.hp-yin i{width:43%}.hp-comparison .hp-description{max-width:890px}.hp-same{background:#efeee5;padding:10px 14px;font-size:13px}.hp-save{padding:26px 30px;border-top:1px solid var(--hp-line);background:#eeefe5;display:grid;grid-template-columns:1fr auto;gap:10px 25px}.hp-save h2{font-size:23px}.hp-save p{font-size:13px;color:var(--hp-muted);max-width:600px}.hp-downloads{display:flex;flex-direction:column;gap:8px;justify-content:center}.hexplay [data-save=png]{background:var(--hp-ink);color:var(--hp-paper);border-color:var(--hp-ink)}.hexplay [data-save=svg]{font-size:12px}.hexplay button:disabled{opacity:.5;cursor:wait}.hp-status{grid-column:1/-1;min-height:1.7em;margin:0!important;font-size:12px!important}.hp-note{padding:20px 30px;font-size:11px;line-height:1.8;color:var(--hp-muted);max-width:960px;margin:0!important}.hp-ink .hp-line-drawing{animation:hp-ink .28s ease}@keyframes hp-ink{from{opacity:.4;transform:scaleX(.94)}to{opacity:1;transform:scaleX(1)}}@keyframes hp-unfold{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}@media(max-width:720px){.hp-workspace{grid-template-columns:1fr}.hp-editor{padding:27px 24px}.hp-lines{max-width:430px;margin:auto}.hp-hint{min-height:0;max-width:none}.hp-primary{padding:28px 24px}.hp-toolbar,.hp-presets{padding:17px}.hp-mode{width:100%}.hexplay .hp-mode button{flex:1}.hp-observe{padding:26px 24px}.hp-save{grid-template-columns:1fr;padding:25px 24px}.hp-downloads{flex-direction:row;flex-wrap:wrap;justify-content:start}.hp-note{padding:20px 24px}.hp-mini{width:135px;padding-right:15px;margin-right:15px}.hp-comparison h3{font-size:24px}.hp-comparison .hp-description{clear:both;padding-top:6px}}@media(prefers-reduced-motion:reduce){.hexplay *{animation:none!important;transition:none!important}}