/* Cyclommatus: a readable guide with its own, independently traced talent tree. */
.paper.cm-page,.paper .cm-build{--cm-text:#eeeae2;--cm-muted:#b4c2bc;--cm-line:rgba(194,213,195,.14);--cm-gold:#e4c589;color:var(--cm-text);background:#0d1b17}
.paper.cm-page{max-width:1240px;padding:clamp(18px,3.5vw,48px);border:1px solid #293a30;box-shadow:0 25px 80px #07171020}
.paper.cm-page h1,.paper.cm-page h2,.paper.cm-page h3,.paper.cm-page h4,.paper .cm-build h2,.paper .cm-build h3,.paper .cm-build h4{color:var(--cm-text);line-height:1.25}
.paper.cm-page p,.paper.cm-page li,.paper .cm-build p,.paper .cm-build li{color:var(--cm-muted);font-size:16px;line-height:1.75}
.paper.cm-page a,.paper .cm-build a{color:var(--cm-gold)}
.cm-page strong,.cm-build strong{color:#fff1d6}
.cm-hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;gap:30px;padding:22px 0 36px;background:radial-gradient(ellipse at 80% 45%,#55384b3d,transparent 63%)}
.cm-eyebrow{display:block;color:#c6ae78;font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.cm-tags{display:flex;gap:8px;flex-wrap:wrap;margin:22px 0}
.cm-tags span{color:#c8dca9;background:#94b95f12;border:1px solid #8dad5f35;border-radius:30px;padding:5px 10px;font-size:12px;font-weight:700}
.paper.cm-page .cm-hero h1{font-size:clamp(29px,3.5vw,46px);letter-spacing:-.045em;line-height:1.16;margin:16px 0 20px}
.paper.cm-page .cm-lead{font-size:21px;color:#e8cfac;margin:0 0 8px;font-weight:700}
.cm-hero-copy>p{max-width:560px;margin:0 0 10px}
.cm-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.paper.cm-page .cm-button{display:inline-flex;align-items:center;justify-content:center;gap:16px;text-decoration:none;min-height:47px;padding:12px 17px;border:1px solid #cab98a5c;border-radius:11px;font-size:14px;font-weight:800;transition:background .15s}
.paper.cm-page .cm-button-primary{background:#dfc48a;color:#17231b;border-color:#dfc48a}
.paper.cm-page .cm-button:hover{background:#655837;color:#fff}
.cm-updated{display:block;margin-top:20px;font-size:11px;color:#84978c}
.cm-portrait{margin:0;position:relative;width:100%;max-width:420px;justify-self:center;padding:10px;border-radius:50%;border:1px solid #bead7566}
.cm-portrait:before{content:"";position:absolute;inset:-10px;border:1px solid #ba9c5133;border-radius:50%;pointer-events:none}
.cm-portrait img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%}
.cm-portrait figcaption{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:15px;background:#0b1915ed;border:1px solid #b7a57677;border-radius:30px;padding:9px 17px;color:#d7ccae;font-size:10px;letter-spacing:.16em;white-space:nowrap}
.cm-portrait figcaption span{font-size:18px;font-family:Georgia,serif;color:#f5d893}
.cm-nav{display:flex;flex-wrap:wrap;gap:7px 23px;border-block:1px solid var(--cm-line);padding:16px 0;margin-bottom:38px}
.paper.cm-page .cm-nav a{color:#bdcbbf;text-decoration:none;font-size:13px;font-weight:700;padding:6px 0}
.paper.cm-page a:focus-visible,.paper .cm-build a:focus-visible{outline:2px solid #e4c589;outline-offset:5px}
.cm-section,.cm-build,.cm-key-section,.cm-order-heading{scroll-margin-top:100px}
.cm-section{margin:0 0 36px}
.cm-section-heading{margin-bottom:22px;max-width:790px}
.paper.cm-page .cm-section-heading h2,.paper .cm-build .cm-section-heading h2{font-size:clamp(25px,3vw,35px);margin:9px 0 10px;letter-spacing:-.03em}
.paper.cm-page .cm-section-heading h3,.paper .cm-build .cm-section-heading h3{font-size:clamp(22px,2.6vw,29px);margin:9px 0 10px;letter-spacing:-.025em}
.cm-section-heading p{margin:0}
.cm-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:25px 0 16px}
.cm-facts>div{padding:20px 17px;background:#ffffff04;border:1px solid var(--cm-line);border-radius:14px}
.cm-facts>div>span,.cm-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:10px;background:#e9ba5c15;color:#e4c589;font-size:22px;margin-bottom:13px}
.cm-facts b{display:block;font-size:14px}
.paper.cm-page .cm-facts p{font-size:13px;line-height:1.6;margin:7px 0 0;color:#9caea3}
.cm-helper{display:flex;align-items:flex-start;gap:16px;padding:20px;background:#6084a60a;border:1px solid #86adcf24;border-radius:15px}
.cm-helper .cm-mark{flex:none;color:#b2cbe0;background:#729bbb16;margin:0}
.paper.cm-page .cm-helper h3{margin:0 0 5px;font-size:16px}
.paper.cm-page .cm-helper p{margin:0;font-size:14px}
.paper.cm-page .cm-attributes{font-size:13px;color:#8fa295;margin:15px 0 24px}
.cm-skill-grid,.cm-key-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cm-skill{padding:23px;background:linear-gradient(140deg,#d3b9730b,transparent);border:1px solid #d7b87826;border-radius:16px}
.cm-small-label{display:block;font-size:10px;line-height:1.5;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#aaae9e}
.paper.cm-page .cm-skill h3{font-size:20px;margin:11px 0 10px}
.paper.cm-page .cm-skill p{font-size:14px;margin:0}
.paper .cm-build{padding:clamp(18px,3vw,32px);border:1px solid #b994d032;border-radius:21px;background:linear-gradient(145deg,#17201f,#0b1916);margin:28px 0}
.paper.cm-page .cm-build{margin:40px 0}
.cm-map-keys{display:flex;flex-wrap:wrap;gap:9px 22px;margin:0 0 17px;font-size:12px;color:#b7c3b9}
.cm-map-keys span{display:inline-flex;align-items:center;gap:7px}
.cm-dot{display:inline-block;width:7px;height:7px;border-radius:50%}.cm-dot-purple{background:#c393f0}.cm-dot-blue{background:#78aaf3}
.cm-poster{margin:0;overflow:hidden;border:1px solid #b7ac7338;border-radius:14px;background:#0c1820}
.cm-poster>a{display:block;cursor:zoom-in}
.cm-poster img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain}
.cm-poster figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 17px;font-size:12px;color:#9fb7b1;line-height:1.6}
.cm-poster figcaption a{font-weight:800;flex:none;text-decoration:none;padding:8px 11px;border:1px solid #b3a36b44;border-radius:8px}
.cm-map-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;padding:16px 0;font-size:12px;color:#8fa298;line-height:1.6}
.cm-points-note{padding:17px 19px;background:#d5b1580b;border:1px solid #d5b15828;border-radius:13px;margin:5px 0 32px}
.cm-points-note>b{font-size:14px;color:#dfca9d}
.paper .cm-build .cm-points-note p{font-size:13px;margin:5px 0 0;line-height:1.7}
.cm-steps{list-style:none!important;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0;padding:0!important;counter-reset:none}
.paper .cm-build .cm-step{display:flex;flex-direction:column;min-width:0;padding:19px;margin:0;background:#ffffff03;border:1px solid #ffffff12;border-top:2px solid var(--route);border-radius:12px}
.cm-step:last-child{grid-column:1/-1}
.cm-step-top{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px 12px;align-items:center}
.cm-step-number{display:grid;place-items:center;width:36px;height:36px;border:1px solid currentColor;border-radius:50%;color:var(--route);font-size:14px;font-weight:800}
.cm-step .cm-small-label{color:var(--route);font-size:9px}
.paper .cm-build .cm-step h4{font-size:17px;margin:5px 0 0;font-weight:700}
.cm-points{grid-column:2;font-size:12px;font-weight:800;color:var(--route)}
.paper .cm-build .cm-step p{font-size:14px;margin:14px 0 16px;line-height:1.65}
.cm-tree-label{margin-top:auto;color:#8fa096;font-size:11px}
.cm-key-section{margin-top:34px}
.cm-key-grid>div{background:#9d77bd0a;border:1px solid #bc9bcc29;border-radius:14px;padding:22px}
.cm-key-grid .cm-mark{color:#cfb1e5;background:#ba7deb12}
.paper .cm-build .cm-key-grid h4{font-size:19px;margin:0 0 10px}
.paper .cm-build .cm-key-grid p{font-size:14px;margin:0;line-height:1.7}
.cm-optional{padding:22px 0 0;margin-top:24px;border-top:1px solid var(--cm-line)}
.paper .cm-build .cm-optional h3{font-size:22px;margin:8px 0}
.paper .cm-build .cm-optional p{font-size:14px;margin:0 0 12px}
.cm-optional ul{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;margin:0;list-style:none!important}
.paper .cm-build .cm-optional li{font-size:12px;color:#d4d6c9;border:1px solid #9dac9333;background:#a6b99308;border-radius:25px;padding:7px 12px}
.paper.cm-page>.box{background:#ffffff05;border-color:var(--cm-line);max-width:none}
.paper.cm-page>.box p{font-size:14px}
.paper.cm-page .bugmini{background:#ffffff04;border-color:var(--cm-line);color:#cbdac2}
.paper.cm-page .bugmini i{color:#94a493}
.build-picker>.build-card-cm{grid-column:1/-1}
@media(max-width:900px){.cm-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:20px}.cm-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.paper.cm-page .cm-hero h1{font-size:34px}.cm-tags{gap:6px}.cm-tags span{font-size:11px}}
@media(max-width:680px){.paper.cm-page{padding:20px 16px;margin-inline:10px;width:calc(100% - 20px);border-radius:18px}.cm-hero{display:flex;flex-direction:column;gap:32px;padding:10px 0 27px}.cm-hero-copy{width:100%}.paper.cm-page .cm-hero h1{font-size:clamp(28px,7.8vw,40px)}.paper.cm-page .cm-lead{font-size:18px}.paper.cm-page .cm-hero-copy>p:not(.cm-lead){font-size:14px}.cm-tags{margin:17px 0}.cm-eyebrow{font-size:9px;letter-spacing:.12em}.cm-portrait{width:250px;max-width:85%}.cm-updated{font-size:10px;margin-top:15px}.cm-nav{gap:6px 17px;margin-bottom:28px;padding:11px 0}.paper.cm-page .cm-nav a{font-size:11px}.cm-facts{gap:8px}.cm-facts>div{padding:16px 12px}.cm-facts b{font-size:12px}.paper.cm-page .cm-facts p{font-size:12px}.cm-skill-grid,.cm-key-grid,.cm-steps{grid-template-columns:1fr}.cm-skill,.cm-key-grid>div{padding:19px}.cm-helper{padding:16px;gap:12px}.cm-helper .cm-mark{width:28px;height:28px}.paper.cm-page .cm-helper h3{font-size:14px}.paper.cm-page .cm-helper p{font-size:13px}.paper .cm-build{padding:16px 12px;border-radius:16px}.paper.cm-page .cm-build{margin:30px -5px}.paper .cm-build .cm-step{padding:17px}.cm-step:last-child{grid-column:auto}.cm-poster{margin-inline:-5px;border-radius:10px}.cm-poster figcaption{flex-direction:column;align-items:flex-start;padding:11px}.cm-map-keys{font-size:10px;gap:7px 14px}.cm-points-note{padding:14px}.cm-section-heading{margin-bottom:18px}.paper.cm-page .cm-section-heading>p,.paper .cm-build .cm-section-heading>p{font-size:14px}.cm-actions{gap:8px}.paper.cm-page .cm-button{font-size:12px;padding:11px 13px;gap:9px}}