.cardan-main{max-width:1320px;margin:auto;padding:24px;line-height:1.7;color:var(--cl-ink,#173f42)}
body.cardan-site main.cardan-main{display:block;box-sizing:border-box}.cardan-main>.cardan-tabs{height:auto;width:auto;position:static}.cardan-tabs a{height:auto;min-height:0}.cardan-toolbar select{width:auto;min-width:80px}.cardan-toolbar label{white-space:nowrap;flex:0 0 auto}
.cardan-main h1{font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.4}.cardan-main h2{font-size:1.25rem}.cardan-main h3{font-size:1.1rem}
.cardan-main a{color:inherit}.cardan-tabs,.cardan-examples,.cardan-toolbar,.cardan-inline{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.cardan-tabs{margin:20px 0}.cardan-tabs a,.cardan-main button{border:1px solid #8dafb0;border-radius:8px;padding:10px 16px;background:var(--cl-surface,#fff);color:inherit;font:inherit;text-decoration:none;cursor:pointer}
.cardan-tabs [aria-current],.cardan-main [data-cardan-command="play"]{background:#126b5b;color:white;font-weight:700}.cardan-main :disabled{opacity:.55;cursor:not-allowed}
.cardan-main input,.cardan-main select{box-sizing:border-box;font:inherit;max-width:100%;padding:9px;border:1px solid #91b0c3;border-radius:7px;background:var(--cl-surface,#fff);color:inherit;min-height:44px}
.cardan-main input[type=number]{width:100%;min-width:0;color:#074d7e;font-weight:700;font-size:1.15rem}.cardan-main input[aria-invalid=true]{border:2px solid #b4172b;background:#fff1f2}
.cardan-inline input{width:0;flex:1}.cardan-inline{flex-wrap:nowrap;gap:8px}.cardan-inline span{white-space:nowrap;min-width:2.7em}
.cardan-toolbar{position:static;z-index:5;background:var(--cl-surface,#fff);border:1px solid #bed3cd;border-radius:10px;padding:12px;margin:20px 0 14px;box-shadow:0 4px 10px #173f4210}
.cardan-toolbar label{display:flex;gap:8px;align-items:center}.cardan-time{width:100%;display:flex;align-items:center;gap:12px}.cardan-time input{min-width:100px;flex:1;padding:0}.cardan-time output{white-space:nowrap;min-width:6em;font-weight:700}
.cardan-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.cardan-case{--case:#007f90;--tint:#edf8fa;border:1px solid var(--case);border-top:4px solid var(--case);background:var(--tint);border-radius:12px;padding:16px;min-width:0}.cardan-case:nth-child(2){--case:#8043b7;--tint:#f6f0fc}
.cardan-case h2{margin:0;color:var(--case)}.cardan-case p{margin:10px 0}.cardan-canvas{position:relative;width:100%;height:clamp(270px,25vw,360px);overflow:hidden;border-radius:9px;background:var(--tint);margin-top:8px}.cardan-canvas canvas{display:block;width:100%;height:100%}.cardan-canvas p{padding:30px}
.cardan-key{display:flex;justify-content:space-between;font-size:.9rem;color:var(--case);font-weight:700}.cardan-key span:last-child{text-align:right}
.cardan-canvas::before{content:attr(data-caption);position:absolute;left:8px;top:6px;font-size:.9rem;color:var(--case);z-index:1;background:var(--tint);padding:2px 6px;border-radius:5px;pointer-events:none}#cardan-workspace{scroll-margin-top:130px}
:root[data-color-mode=dark] .cardan-canvas::before{color:#99e0e6}:root[data-color-mode=dark] .cardan-case:nth-child(2) .cardan-canvas::before{color:#dbb5ff}
.cardan-case .cardan-local-play{display:block;width:100%;margin:10px 0}.cardan-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.cardan-field small{display:block;font-size:.8rem;opacity:.85}.cardan-field label{display:block;font-weight:700}
.cardan-plot{display:block;width:100%;background:#ffffff70;border-radius:7px;overflow:visible}.cardan-plot text{font-size:12px;fill:currentColor}.plot-axis,.plot-base,.plot-cursor{fill:none;stroke:#7d959a;stroke-width:1}.plot-base{stroke-dasharray:4 3}.plot-cursor{stroke:#bc673b}.plot-output{fill:none;stroke:var(--case);stroke-width:2.7}.plot-middle{fill:none;stroke:#52626c;stroke-width:1.7;stroke-dasharray:4 3}.plot-dot{fill:var(--case)}
.cardan-results{display:grid;grid-template-columns:1fr 1fr;gap:12px}.cardan-results>div{border:1px solid color-mix(in srgb,var(--case) 25%,transparent);border-radius:8px;padding:10px;background:#ffffff50}.cardan-results strong{display:block;font-size:1.35rem;color:var(--case)}.cardan-results span{font-size:.85rem}
.cardan-verdict{border-left:4px solid var(--case);padding:9px 12px;font-weight:700}.cardan-notice{border-left:4px solid #ba7435;background:#fff6e9;color:#66411b;padding:12px}.cardan-error:not(:empty){background:#fff0f0;color:#aa1026;border:2px solid #bb1a32;border-radius:8px;padding:12px;font-weight:700}.cardan-case.cardan-invalid .cardan-canvas{visibility:hidden}
.cardan-guide{border:1px solid #c5d8d1;background:var(--cl-surface,#fff);border-radius:12px;padding:24px;margin:26px 0}.cardan-guide details{margin:14px 0}.cardan-guide summary{cursor:pointer;font-weight:700}.cardan-guide code{display:block;overflow-wrap:anywhere}.cardan-main .advertisement{margin:32px 0}.cardan-main footer{display:flex;gap:20px;margin-top:30px}
:root[data-color-mode=dark] .cardan-case{--tint:#143940}:root[data-color-mode=dark] .cardan-case:nth-child(2){--tint:#35253f}:root[data-color-mode=dark] .cardan-plot,:root[data-color-mode=dark] .cardan-results>div{background:#15242a80}
@media(max-width:760px){.cardan-main{padding:16px}.cardan-cases{grid-template-columns:1fr}.cardan-case{padding:12px}.cardan-canvas{height:290px}.cardan-toolbar{position:static;gap:8px}.cardan-toolbar label{font-size:.85rem}.cardan-toolbar select{padding:6px}.cardan-case .cardan-local-play{display:block;width:100%;margin:10px 0}.cardan-guide{padding:18px}.cardan-fields{gap:10px}.cardan-results{gap:8px}.cardan-results strong{font-size:1.2rem}}
@media(prefers-color-scheme:dark){:root:not([data-color-mode=light]) .cardan-case{--tint:#143940}:root:not([data-color-mode=light]) .cardan-case:nth-child(2){--tint:#35253f}}

:root[data-color-mode=dark] .cardan-case h2,:root[data-color-mode=dark] .cardan-key,:root[data-color-mode=dark] .cardan-results strong{color:#99e0e6}:root[data-color-mode=dark] .cardan-case:nth-child(2) h2,:root[data-color-mode=dark] .cardan-case:nth-child(2) .cardan-key,:root[data-color-mode=dark] .cardan-case:nth-child(2) .cardan-results strong{color:#dbb5ff}:root[data-color-mode=dark] .cardan-main input[type=number]{color:#a8d7ff}