:root{--srp-bg: #f8f7ff;--srp-panel: #ffffff;--srp-panel-2: #f3f2fb;--srp-line: #e4e2f3;--srp-text: #16142b;--srp-muted: #625f80;--srp-accent: #6d4aff;--srp-accent-2: #22d3ee;--srp-ink: #16142b;--srp-ink-muted: #5d5a78;--srp-paper: #f6f5fd;--srp-radius: 20px;--primary: #6d4aff;--primary-dark: #4c2fd6;--border: #e4e2f3;--surface: #ffffff;--shadow-soft: 0 12px 32px rgba(76, 47, 214, 0.10);--surface-muted: #f5f4fd;--text-main: #16142b;--text-muted: #5d5a78;}
@property --srp-angle{syntax: '<angle>';initial-value: 0deg;inherits: false;}
.srp-sprite{position: absolute;width: 0;height: 0;overflow: hidden;}
[data-class]{--aura: #7c5cff;--aura-2: #22d3ee;--aura-ink: #4c2fd6;}
[data-class="elemental"]{--aura: #ff6b2c;--aura-2: #ffc93c;--aura-ink: #c2410c;}
[data-class="mind"]{--aura: #c084fc;--aura-2: #f472b6;--aura-ink: #7e22ce;}
[data-class="body"]{--aura: #f43f5e;--aura-2: #fb923c;--aura-ink: #be123c;}
[data-class="motion"]{--aura: #2dd4bf;--aura-2: #60a5fa;--aura-ink: #0f766e;}
[data-class="energy"]{--aura: #38bdf8;--aura-2: #a78bfa;--aura-ink: #0369a1;}
[data-class="matter"]{--aura: #4ade80;--aura-2: #a3e635;--aura-ink: #15803d;}
.srp-lab{position: relative;background: radial-gradient(1100px 380px at 8% -12%, rgba(124, 92, 255, 0.14), transparent 60%), radial-gradient(900px 380px at 108% 112%, rgba(34, 211, 238, 0.14), transparent 60%), var(--srp-bg);border: 1px solid var(--srp-line);border-radius: 28px;padding: 24px;margin: 8px 0 56px;color: var(--srp-text);box-shadow: 0 24px 50px rgba(76, 47, 214, 0.08);overflow: hidden;}
.srp-lab::before{content: '';position: absolute;inset: 0;background-image: linear-gradient(rgba(76, 47, 214, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(76, 47, 214, 0.06) 1px, transparent 1px);background-size: 40px 40px;mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);-webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);pointer-events: none;}
.srp-lab [hidden]{display: none !important;}
.srp-console{position: relative;background: var(--srp-panel);border: 1px solid var(--srp-line);border-radius: var(--srp-radius);padding: 18px 20px;box-shadow: 0 8px 24px rgba(22, 20, 43, 0.05);margin-bottom: 22px;}
.srp-byline{display: flex;flex-wrap: wrap;justify-content: space-between;gap: 4px 14px;font-size: 12.5px;color: var(--srp-muted);padding-bottom: 12px;margin-bottom: 14px;border-bottom: 1px dashed var(--srp-line);}
.srp-byline .author-link{color: var(--primary-dark);font-weight: 700;text-decoration: none;}
.srp-byline .author-link:hover{text-decoration: underline;}
.srp-group{border: 0;padding: 0;margin: 0;min-width: 0;}
.srp-group legend,.srp-label{display: block;font-size: 11.5px;font-weight: 800;letter-spacing: .12em;text-transform: uppercase;color: var(--srp-muted);margin-bottom: 8px;float: none;width: auto;padding: 0;}
.srp-group-class{margin-bottom: 16px;}
.srp-chips{display: flex;flex-wrap: wrap;gap: 8px;}
.srp-chip{position: relative;cursor: pointer;margin: 0;}
.srp-chip input,.srp-seg input{position: absolute;opacity: 0;pointer-events: none;}
.srp-chip span{display: inline-flex;align-items: center;gap: 7px;padding: 8px 14px;border-radius: 999px;border: 1px solid var(--srp-line);background: var(--srp-panel-2);color: var(--srp-text);font-size: 14px;font-weight: 600;transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;}
.srp-chip svg{width: 16px;height: 16px;fill: none;stroke: var(--aura-ink);stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.srp-chip:hover span{border-color: var(--aura);background: #fff;}
.srp-chip input:checked + span{background: linear-gradient(135deg, color-mix(in srgb, var(--aura) 18%, #fff), color-mix(in srgb, var(--aura-2) 12%, #fff));border-color: var(--aura);color: var(--aura-ink);box-shadow: 0 0 0 1px var(--aura), 0 6px 16px color-mix(in srgb, var(--aura) 28%, transparent);}
.srp-chip input:focus-visible + span,.srp-seg input:focus-visible + span{outline: 2px solid var(--srp-accent);outline-offset: 2px;}
.srp-row{display: grid;grid-template-columns: auto minmax(160px, 220px) 1fr;gap: 16px;align-items: end;}
.srp-seg{display: inline-flex;background: var(--srp-panel-2);border: 1px solid var(--srp-line);border-radius: 12px;padding: 4px;gap: 2px;flex-wrap: wrap;}
.srp-seg label{margin: 0;cursor: pointer;position: relative;}
.srp-seg span{display: block;padding: 8px 13px;border-radius: 9px;font-size: 14px;font-weight: 600;color: var(--srp-muted);transition: background .18s ease, color .18s ease;}
.srp-seg label:hover span{color: var(--srp-text);}
.srp-seg input:checked + span{background: var(--srp-accent);color: #fff;box-shadow: 0 6px 16px rgba(109, 74, 255, 0.35);}
.srp-select{width: 100%;background: #fff;color: var(--srp-text);border: 1px solid var(--srp-line);border-radius: 12px;padding: 11px 12px;font-size: 14px;font-weight: 600;}
.srp-select:focus{outline: 2px solid var(--srp-accent);outline-offset: 1px;}
.srp-roll{justify-self: end;display: inline-flex;align-items: center;justify-content: center;gap: 10px;min-width: 210px;padding: 14px 26px;border: 0;border-radius: 14px;background: linear-gradient(135deg, #6d4aff 0%, #a855f7 50%, #0ea5e9 100%);background-size: 200% 200%;color: #fff;font-size: 16px;font-weight: 800;line-height: 1.2;letter-spacing: .02em;cursor: pointer;box-shadow: 0 10px 26px rgba(109, 74, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);transition: transform .15s ease, box-shadow .2s ease, background-position .4s ease;}
.srp-roll svg{width: 20px;height: 20px;fill: #fff;stroke: none;}
.srp-roll:hover{transform: translateY(-2px);background-position: 100% 100%;box-shadow: 0 14px 32px rgba(109, 74, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);}
.srp-roll:active{transform: translateY(0);}
.srp-roll:focus-visible{outline: 2px solid var(--srp-ink);outline-offset: 3px;}
.srp-roll:disabled{cursor: wait;opacity: .85;}
.srp-roll.is-busy svg{animation: srp-pulse .7s ease-in-out infinite;}
.srp-status{margin: 12px 0 0;font-size: 13px;color: var(--srp-muted);}
.srp-status.is-error{color: #be123c;font-weight: 600;}
.srp-stage{position: relative;display: grid;grid-template-columns: minmax(0, 1fr) 250px;gap: 22px;align-items: start;}
.srp-card{position: relative;isolation: isolate;border-radius: 24px;padding: 26px 26px 22px;background: radial-gradient(600px 260px at 0% 0%, color-mix(in srgb, var(--aura) 16%, transparent), transparent 65%), radial-gradient(500px 260px at 100% 100%, color-mix(in srgb, var(--aura-2) 14%, transparent), transparent 65%), #fff;box-shadow: 0 22px 50px color-mix(in srgb, var(--aura) 20%, transparent), 0 2px 6px rgba(22, 20, 43, 0.05);overflow: hidden;transition: box-shadow .5s ease;}
.srp-card::before{content: '';position: absolute;inset: 0;border-radius: inherit;padding: 2px;background: conic-gradient(from var(--srp-angle), var(--aura), color-mix(in srgb, var(--aura) 15%, transparent) 25%, var(--aura-2) 50%, color-mix(in srgb, var(--aura-2) 15%, transparent) 75%, var(--aura));-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask-composite: xor;mask-composite: exclude;animation: srp-spin 7s linear infinite;pointer-events: none;z-index: 2;}
.srp-card::after{content: '';position: absolute;inset: 0;background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.7) 45%, transparent 55%);background-size: 250% 100%;background-position: 120% 0;pointer-events: none;z-index: 1;}
.srp-card.is-rolling::after{animation: srp-sheen .9s ease-out;}
.srp-card.is-rolling .srp-name,.srp-card.is-rolling .srp-effect{animation: srp-rise .45s ease-out both;}
.srp-card.is-rolling .srp-emblem{animation: srp-pop .5s cubic-bezier(.3, 1.6, .5, 1) both;}
.srp-card-aura{position: absolute;width: 320px;height: 320px;top: -150px;right: -120px;border-radius: 50%;background: radial-gradient(circle, color-mix(in srgb, var(--aura) 40%, transparent), transparent 70%);filter: blur(24px);opacity: .5;animation: srp-float 8s ease-in-out infinite;z-index: -1;}
.srp-card-head{display: flex;align-items: center;gap: 18px;margin-bottom: 14px;}
.srp-emblem{flex: 0 0 auto;width: 74px;height: 74px;display: grid;place-items: center;clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);background: linear-gradient(140deg, var(--aura), var(--aura-2));}
.srp-emblem svg{width: 36px;height: 36px;fill: none;stroke: #fff;stroke-width: 2.3;stroke-linecap: round;stroke-linejoin: round;filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));}
.srp-head-text{min-width: 0;flex: 1;}
.srp-kicker{margin: 0 0 4px;font-size: 12px;font-weight: 800;letter-spacing: .16em;text-transform: uppercase;color: var(--aura-ink);}
.srp-name-row{display: flex;align-items: center;gap: 10px;}
.srp-name{margin: 0;font-size: clamp(1.7rem, 3.6vw, 2.5rem);font-weight: 900;line-height: 1.05;letter-spacing: -.01em;color: var(--srp-ink);word-break: break-word;}
.srp-effect{margin: 0 0 18px;font-size: 17px;line-height: 1.55;color: #34324d;}
.srp-level{display: flex;align-items: center;gap: 14px;padding: 12px 14px;margin-bottom: 16px;border-radius: 14px;background: rgba(255, 255, 255, 0.75);border: 1px solid var(--srp-line);}
.srp-level-label{font-size: 11.5px;font-weight: 800;letter-spacing: .12em;text-transform: uppercase;color: var(--srp-muted);}
.srp-meter{flex: 1;display: grid;grid-template-columns: repeat(4, 1fr);gap: 6px;}
.srp-meter i{display: block;height: 10px;border-radius: 4px;background: #e9e7f5;transform: skewX(-18deg);transition: background .35s ease, box-shadow .35s ease;}
.srp-meter i.is-on{background: linear-gradient(90deg, var(--aura), var(--aura-2));box-shadow: 0 2px 8px color-mix(in srgb, var(--aura) 45%, transparent);}
.srp-level-value{font-size: 15px;font-weight: 800;color: var(--aura-ink);min-width: 58px;text-align: right;}
.srp-sheet{margin: 0;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 10px;}
.srp-line{position: relative;padding: 12px 46px 12px 14px;border-radius: 14px;background: rgba(255, 255, 255, 0.8);border: 1px solid var(--srp-line);transition: border-color .2s ease, background .2s ease;}
.srp-line-cost{border-color: #fecdd3;background: #fff5f6;}
.srp-line.is-locked{border-color: var(--aura);background: color-mix(in srgb, var(--aura) 9%, #fff);}
.srp-line dt{font-size: 11px;font-weight: 800;letter-spacing: .14em;text-transform: uppercase;color: var(--srp-muted);margin-bottom: 4px;}
.srp-line-cost dt{color: #be123c;}
.srp-sub{margin-left: 6px;padding: 1px 7px;border-radius: 999px;background: color-mix(in srgb, var(--aura) 16%, #fff);color: var(--aura-ink);letter-spacing: .06em;}
.srp-line dd{margin: 0;font-size: 14.5px;line-height: 1.5;color: var(--srp-text);}
.srp-line .srp-lock{position: absolute;top: 10px;right: 10px;}
.srp-lock{flex: 0 0 auto;width: 30px;height: 30px;display: grid;place-items: center;padding: 0;border-radius: 9px;border: 1px solid var(--srp-line);background: #fff;color: var(--srp-muted);cursor: pointer;transition: all .18s ease;}
.srp-lock svg{width: 15px;height: 15px;fill: none;stroke: currentColor;stroke-width: 2;stroke-linecap: round;stroke-linejoin: round;}
.srp-lock:hover{color: var(--aura-ink);border-color: var(--aura);}
.srp-lock:focus-visible{outline: 2px solid var(--srp-accent);outline-offset: 2px;}
.srp-lock.is-locked{background: var(--aura-ink);border-color: var(--aura-ink);color: #fff;box-shadow: 0 4px 12px color-mix(in srgb, var(--aura) 40%, transparent);}
.srp-note{margin: 16px 0 0;padding-left: 12px;border-left: 3px solid var(--aura);font-size: 14px;color: var(--srp-muted);}
.srp-card-foot{display: flex;flex-wrap: wrap;align-items: center;gap: 10px;margin: 18px 0 0;padding: 16px 0 0;border-top: 1px solid var(--srp-line);background: none;}
.srp-btn{display: inline-flex;align-items: center;justify-content: center;height: auto;min-height: 0;padding: 10px 18px;border-radius: 11px;border: 1px solid var(--srp-ink);background: var(--srp-ink);color: #fff;font-size: 14px;font-weight: 700;line-height: 1.2;cursor: pointer;transition: transform .15s ease, background .2s ease, border-color .2s ease;}
.srp-btn:hover{transform: translateY(-1px);background: #2a2650;}
.srp-btn:focus-visible{outline: 2px solid var(--aura);outline-offset: 2px;}
.srp-btn.is-done{background: #15803d;border-color: #15803d;}
.srp-btn-ghost{background: #fff;color: var(--srp-text);border-color: var(--srp-line);}
.srp-btn-ghost:hover{background: #fff;border-color: var(--srp-muted);}
.srp-log{background: var(--srp-panel);border: 1px solid var(--srp-line);border-radius: var(--srp-radius);padding: 16px;box-shadow: 0 8px 24px rgba(22, 20, 43, 0.05);}
.srp-log-title{margin: 0 0 10px;font-size: 11.5px;font-weight: 800;letter-spacing: .12em;text-transform: uppercase;color: var(--srp-muted);}
.srp-log-list{list-style: none;margin: 0;padding: 0;display: grid;gap: 6px;}
.srp-log-empty{margin: 0;font-size: 13px;line-height: 1.5;color: var(--srp-muted);}
.srp-past{width: 100%;display: flex;align-items: center;gap: 9px;padding: 8px 10px;border-radius: 10px;border: 1px solid transparent;background: var(--srp-panel-2);color: var(--srp-text);font-size: 13.5px;text-align: left;cursor: pointer;transition: background .18s ease, border-color .18s ease;}
.srp-past:hover{background: #ebe9f8;}
.srp-past.is-current{border-color: var(--aura);background: color-mix(in srgb, var(--aura) 10%, #fff);}
.srp-past-dot{width: 9px;height: 9px;border-radius: 50%;flex: 0 0 auto;background: linear-gradient(135deg, var(--aura), var(--aura-2));}
.srp-past-name{flex: 1;min-width: 0;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.srp-past-tier{font-size: 11px;color: var(--srp-muted);}
.srp-read,.srp-limits{margin: 0 auto 52px;color: var(--srp-ink);}
.srp-read h2,.srp-limits h2{font-size: clamp(1.45rem, 2.6vw, 1.9rem);font-weight: 800;line-height: 1.2;margin: 0 0 14px;color: var(--srp-ink);}
.srp-read h3{font-size: 1.1rem;font-weight: 800;margin: 0 0 6px;}
.srp-read p{font-size: 16.5px;line-height: 1.7;color: #34324d;margin: 0 0 14px;}
.srp-hooks{list-style: none;padding: 0;margin: 18px 0 0;display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;}
.srp-hooks li{padding: 16px 18px;border-radius: 16px;background: var(--surface-muted);border: 1px solid var(--border);font-size: 15.5px;line-height: 1.6;color: #34324d;}
.srp-hooks strong{display: block;color: var(--primary-dark);margin-bottom: 2px;}
.srp-ladder{list-style: none;padding: 0;margin: 20px 0;display: grid;gap: 10px;}
.srp-rung{position: relative;display: grid;grid-template-columns: 110px repeat(3, minmax(0, 1fr));gap: 6px 18px;align-items: start;padding: 16px 18px 20px;border-radius: 16px;background: #fff;border: 1px solid var(--border);box-shadow: var(--shadow-soft);overflow: hidden;}
.srp-rung::after{content: '';position: absolute;left: 0;bottom: 0;height: 4px;background: linear-gradient(90deg, #7c5cff, #22d3ee);}
.srp-rung[data-level="1"]::after{width: 25%;}
.srp-rung[data-level="2"]::after{width: 50%;}
.srp-rung[data-level="3"]::after{width: 75%;}
.srp-rung[data-level="4"]::after{width: 100%;}
.srp-rung-tag{align-self: center;justify-self: start;padding: 6px 12px;border-radius: 999px;background: var(--primary);color: #fff;font-size: 13px;font-weight: 800;letter-spacing: .06em;text-transform: uppercase;}
.srp-rung p{margin: 0;font-size: 14.5px;line-height: 1.55;}
.srp-rung b{display: block;font-size: 11px;letter-spacing: .12em;text-transform: uppercase;color: var(--srp-ink-muted);}
.srp-aside{padding: 14px 18px;border-radius: 14px;background: #eef9fc;border: 1px solid #c9eef6;font-size: 15px !important;}
.srp-table-wrap{overflow-x: auto;margin: 16px 0;border-radius: 16px;border: 1px solid var(--border);background: #fff;box-shadow: var(--shadow-soft);}
.srp-table{width: 100%;border-collapse: collapse;font-size: 14.5px;min-width: 620px;}
.srp-table caption{caption-side: bottom;padding: 10px 16px;font-size: 13px;color: var(--srp-ink-muted);}
.srp-table th,.srp-table td{padding: 13px 16px;text-align: left;vertical-align: top;border-bottom: 1px solid var(--border);}
.srp-table thead th{background: var(--surface-muted);color: var(--srp-ink);font-size: 12px;font-weight: 800;letter-spacing: .1em;text-transform: uppercase;}
.srp-table tbody th{white-space: nowrap;font-weight: 800;color: var(--srp-ink);}
.srp-table tbody th::before{content: '';display: inline-block;width: 10px;height: 10px;margin-right: 8px;border-radius: 50%;background: linear-gradient(135deg, var(--aura), var(--aura-2));vertical-align: 0;}
.srp-table tbody tr:last-child th,.srp-table tbody tr:last-child td{border-bottom: 0;}
.srp-passes{display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 14px;margin-top: 18px;}
.srp-pass{position: relative;padding: 20px 18px 18px;border-radius: 18px;background: #fff;border: 1px solid var(--border);box-shadow: var(--shadow-soft);}
.srp-pass-num{display: grid;place-items: center;width: 36px;height: 36px;margin-bottom: 10px;border-radius: 10px;background: linear-gradient(135deg, #38bdf8, #a78bfa);color: #fff;font-weight: 900;}
.srp-pass p{font-size: 15px;margin: 0;}
.srp-limits{padding: 24px 26px;border-radius: 20px;background: #fff7ed;border: 1px dashed #fdba74;}
.srp-limits ul{margin: 0;padding-left: 20px;}
.srp-limits li{font-size: 15.5px;line-height: 1.65;color: #3f3a2e;margin-bottom: 8px;}
.srp-limits li:last-child{margin-bottom: 0;}
@keyframes srp-spin{to{--srp-angle: 360deg;}}
@keyframes srp-float{0%,100%{transform: translate(0, 0) scale(1);}50%{transform: translate(-30px, 20px) scale(1.1);}}
@keyframes srp-sheen{from{background-position: 120% 0;}to{background-position: -20% 0;}}
@keyframes srp-rise{from{opacity: 0;transform: translateY(8px);}to{opacity: 1;transform: none;}}
@keyframes srp-pop{from{transform: scale(.6) rotate(-30deg);opacity: .3;}to{transform: none;opacity: 1;}}
@keyframes srp-pulse{0%,100%{transform: scale(1);}50%{transform: scale(1.3);}}
@media (max-width: 991.98px){.srp-stage{grid-template-columns: 1fr;}.srp-row{grid-template-columns: 1fr 1fr;}.srp-row .srp-group:first-child{grid-column: 1 / -1;}.srp-roll{justify-self: stretch;}.srp-rung{grid-template-columns: 1fr 1fr 1fr;}.srp-rung-tag{grid-column: 1 / -1;margin-bottom: 4px;}.srp-passes{grid-template-columns: 1fr;}}
@media (max-width: 575.98px){.srp-lab{padding: 14px;border-radius: 20px;}.srp-console{padding: 14px;}.srp-row{grid-template-columns: 1fr;}.srp-card{padding: 20px 16px 16px;}.srp-card-head{gap: 12px;}.srp-emblem{width: 56px;height: 56px;}.srp-emblem svg{width: 28px;height: 28px;}.srp-sheet{grid-template-columns: 1fr;}.srp-hooks{grid-template-columns: 1fr;}.srp-rung{grid-template-columns: 1fr;}.srp-level{flex-wrap: wrap;}.srp-meter{flex-basis: 100%;order: 3;}.srp-btn{flex: 1 1 auto;}}
@media (prefers-reduced-motion: reduce){.srp-card::before,.srp-card-aura,.srp-card.is-rolling::after,.srp-card.is-rolling .srp-name,.srp-card.is-rolling .srp-effect,.srp-card.is-rolling .srp-emblem,.srp-roll.is-busy svg{animation: none;}}