/* ====== 01 鸡兔同笼计算器 · 麦秸黄 + 田埂绿 ====== */
.tsk.crc{
  --tsk-bg:#fbf7ea;
  --tsk-bg-2:#f5eeda;
  --tsk-card:#ffffff;
  --tsk-card-2:#fdfaf0;
  --tsk-ink:#2c2a1c;
  --tsk-sub:#655e44;
  --tsk-faint:#9a906c;
  --tsk-line:#e7dcc0;
  --tsk-line-2:#f2ead5;
  --tsk-brand:#b7791f;
  --tsk-brand-2:#8a5a12;
  --tsk-brand-soft:#f8edd2;
  --tsk-brand-ink:#8a5a12;
  --tsk-accent:#3f7d3a;
  --tsk-green-soft:#e8f2e3;
  --tsk-shadow-sm:0 1px 2px rgba(70,58,24,.05),0 8px 18px rgba(70,58,24,.06);
  --tsk-shadow:0 2px 8px rgba(70,58,24,.08),0 20px 46px rgba(70,58,24,.10);
  background:
    radial-gradient(720px 300px at 96% -8%, rgba(63,125,58,.10), transparent 62%),
    repeating-linear-gradient(90deg, transparent 0 46px, rgba(183,121,31,.045) 46px 47px),
    var(--tsk-bg);
}
:root[data-theme="dark"] .tsk.crc{
  --tsk-bg:#15140d;
  --tsk-bg-2:#1d1b12;
  --tsk-card:#221f15;
  --tsk-card-2:#28251a;
  --tsk-ink:#f3eeda;
  --tsk-sub:#c3b995;
  --tsk-faint:#8e8568;
  --tsk-line:#3a3524;
  --tsk-line-2:#302c1f;
  --tsk-brand:#e0aa52;
  --tsk-brand-2:#f0c67f;
  --tsk-brand-soft:rgba(224,170,82,.13);
  --tsk-brand-ink:#f0c67f;
  --tsk-accent:#78b56e;
  --tsk-green-soft:rgba(120,181,110,.13);
}

/* ---- 首屏等高栅格 ---- */
.crc-hero{display:grid;grid-template-columns:minmax(0,1fr) 394px;gap:30px;padding:30px 0 24px;align-items:stretch}
.crc-hero-l{display:flex;flex-direction:column}
.crc-hero-l>.tsk-hs{flex:1 1 auto}
@media (max-width:900px){.crc-hero{grid-template-columns:1fr}}
.crc-hero-l .tsk-h1 b{color:var(--tsk-brand-ink);position:relative}
.crc-hero-l .tsk-h1 b::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:7px;border-radius:4px;background:var(--tsk-brand-soft);z-index:-1}

/* ---- 右侧演算本 ---- */
.crc-desk{position:relative;background:
    linear-gradient(180deg,var(--tsk-card) 0%,var(--tsk-card-2) 100%);
  border:1px solid var(--tsk-line);border-radius:16px;box-shadow:var(--tsk-shadow);padding:18px 20px 15px;
  overflow:hidden}
.crc-desk::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:repeating-linear-gradient(180deg,var(--tsk-accent) 0 14px,var(--tsk-brand) 14px 28px)}
.crc-desk::after{content:"CAGE";position:absolute;right:-6px;top:64px;font:800 42px/1 var(--tsk-num);
  color:var(--tsk-brand-soft);transform:rotate(90deg);letter-spacing:.12em;pointer-events:none}
.crc-desk-hd{display:flex;align-items:center;gap:11px;margin:0 0 13px}
.crc-desk-badge{width:38px;height:38px;flex:none;display:grid;place-items:center;border-radius:50%;
  background:var(--tsk-brand);color:#fff;font:800 14px/1 var(--tsk-num);box-shadow:0 6px 14px rgba(183,121,31,.28)}
.crc-desk-hd b{display:block;font-size:14.5px;font-weight:800;line-height:1.4}
.crc-desk-hd small{display:block;font-size:11.5px;color:var(--tsk-faint);font-weight:600}

.crc-tabs{display:flex;gap:5px;padding:4px;border-radius:11px;background:var(--tsk-bg-2);border:1px solid var(--tsk-line-2)}
.crc-tab{flex:1;min-width:0;border:0;background:transparent;color:var(--tsk-sub);border-radius:8px;
  font:700 11.5px/1.35 var(--tsk-font);padding:8px 5px;cursor:pointer;transition:.16s;white-space:nowrap}
.crc-tab:hover{color:var(--tsk-brand-ink)}
.crc-tab.on{background:var(--tsk-card);color:var(--tsk-brand-ink);box-shadow:var(--tsk-shadow-sm)}

.crc-panel{padding-top:13px}
.crc-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.crc-field label{display:block;margin-bottom:5px;font-size:11.5px;font-weight:800;color:var(--tsk-sub)}
.crc-field input{width:100%;height:40px;padding:0 11px;border:1.5px solid var(--tsk-line);border-radius:9px;
  background:var(--tsk-card);color:var(--tsk-ink);font:800 14.5px/40px var(--tsk-num);outline:none;transition:.16s}
.crc-field input:focus{border-color:var(--tsk-brand);box-shadow:0 0 0 3px var(--tsk-brand-soft)}
.crc-field.bad input{border-color:var(--tsk-bad);background:var(--tsk-bad-soft)}
.crc-foot-note{margin:9px 0 0;font-size:10.8px;line-height:1.7;color:var(--tsk-faint)}
.crc-err{display:none;margin:9px 0 0;padding:8px 11px;border-radius:8px;background:var(--tsk-bad-soft);
  color:var(--tsk-bad);font-size:12px;font-weight:700;line-height:1.65}
.crc-err.show{display:block}
.crc-acts{display:flex;gap:7px;margin-top:13px}
.crc-acts .tsk-btn{padding:9px 14px;font-size:12.5px}
.crc-acts .tsk-btn-main{flex:1;background:linear-gradient(135deg,var(--tsk-brand),var(--tsk-accent));border:0}
.crc-desk-foot{margin:9px 0 0;font-size:10.5px;line-height:1.65;color:var(--tsk-faint)}

/* ---- 结果区 ---- */
.crc-result{margin:6px 0 28px;background:var(--tsk-card);border:1px solid var(--tsk-line);
  border-radius:18px;box-shadow:var(--tsk-shadow);padding:22px 24px 20px}
.crc-res-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.crc-res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.crc-res-card{position:relative;background:var(--tsk-card-2);border:1px solid var(--tsk-line-2);
  border-radius:12px;padding:15px 17px 13px}
.crc-res-card b{display:block;font:800 28px/1.1 var(--tsk-num);color:var(--tsk-ink);font-variant-numeric:tabular-nums}
.crc-res-card span{display:block;margin-top:5px;font-size:11.5px;font-weight:800;color:var(--tsk-faint)}
.crc-res-card i{display:block;margin-top:2px;font-style:normal;font-size:10.5px;color:var(--tsk-sub)}
.crc-res-card.crc-main-card{background:var(--tsk-green-soft);border-color:rgba(63,125,58,.25)}
.crc-res-card.crc-main-card b{color:var(--tsk-accent)}
.crc-alert{margin-top:13px;padding:11px 14px;border-radius:9px;background:var(--tsk-brand-soft);
  border-left:3px solid var(--tsk-brand);font-size:12.5px;line-height:1.8;color:var(--tsk-sub)}
.crc-alert.is-bad{background:var(--tsk-bad-soft);border-left-color:var(--tsk-bad)}
.crc-steps-wrap{margin-top:18px;padding-top:16px;border-top:1px dashed var(--tsk-line)}
.crc-steps{margin:10px 0 0;padding-left:0;list-style:none;counter-reset:crcstep;display:grid;gap:7px}
.crc-steps li{counter-increment:crcstep;position:relative;padding:9px 13px 9px 40px;border-radius:9px;
  background:var(--tsk-card-2);border:1px solid var(--tsk-line-2);font-size:13px;line-height:1.75;color:var(--tsk-sub)}
.crc-steps li::before{content:counter(crcstep);position:absolute;left:11px;top:9px;width:20px;height:20px;
  border-radius:50%;background:var(--tsk-brand);color:#fff;font:800 11px/20px var(--tsk-num);text-align:center}
.crc-steps li b{color:var(--tsk-ink)}

/* ---- 原理卡 ---- */
.crc-theory{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:12px}
.crc-theory-card{position:relative;padding:18px 18px 16px;background:var(--tsk-card);
  border:1px solid var(--tsk-line);border-radius:13px;box-shadow:var(--tsk-shadow-sm);overflow:hidden}
.crc-theory-card::after{content:"";position:absolute;right:-22px;bottom:-22px;width:66px;height:66px;
  border-radius:50%;background:var(--tsk-brand-soft)}
.crc-theory-ic{position:relative;z-index:1;display:inline-grid;place-items:center;width:26px;height:26px;
  border-radius:7px;background:var(--tsk-green-soft);color:var(--tsk-accent);font:800 13px/1 var(--tsk-num)}
.crc-theory-card h3{margin:9px 0 5px;font-size:14.5px;font-weight:800;color:var(--tsk-ink)}
.crc-theory-card p{margin:0;font-size:12.5px;line-height:1.85;color:var(--tsk-sub)}
.crc-theory-card code{position:relative;z-index:1;display:block;margin-top:10px;padding:8px 10px;
  border-radius:7px;background:var(--tsk-bg-2);color:var(--tsk-brand-ink);font:800 11.5px/1.7 var(--tsk-num);word-break:break-all}
.crc-h2-sub{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--tsk-faint)}

/* ---- 变式练习 ---- */
.crc-var-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.crc-var-tip{font-size:11.5px;color:var(--tsk-faint)}
.crc-variants{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:9px}
.crc-variants .tsk-empty{grid-column:1/-1;background:var(--tsk-card);border:1px dashed var(--tsk-line);border-radius:10px}
.crc-var-item{background:var(--tsk-card);border:1px solid var(--tsk-line);border-radius:11px;
  padding:13px 15px;box-shadow:var(--tsk-shadow-sm)}
.crc-var-item .no{display:inline-block;margin-right:6px;padding:1px 7px;border-radius:99px;
  background:var(--tsk-green-soft);color:var(--tsk-accent);font:800 10.5px/1.8 var(--tsk-num)}
.crc-var-item .q{font-size:12.8px;line-height:1.8;color:var(--tsk-sub)}
.crc-var-item .q b{color:var(--tsk-ink)}
.crc-var-item .ans{margin-top:7px;padding-top:6px;border-top:1px dashed var(--tsk-line-2);
  font-size:12px;line-height:1.7;color:var(--tsk-accent);font-weight:700}
.crc-var-item .ans.is-hidden{display:none}
.crc-var-item .ans b{color:var(--tsk-accent)}

/* ---- 公式自测 ---- */
.crc-quiz{background:var(--tsk-card);border:1px solid var(--tsk-line);border-left:4px solid var(--tsk-accent);
  border-radius:13px;box-shadow:var(--tsk-shadow-sm);padding:18px 20px}
.crc-question{margin:0 0 11px;font-size:14px;line-height:1.85;color:var(--tsk-ink);font-weight:700}
.crc-quiz-row{display:flex;flex-wrap:wrap;gap:8px}
.crc-quiz-row input{width:150px;height:40px;padding:0 12px;border:1.5px solid var(--tsk-line);
  border-radius:9px;background:var(--tsk-card-2);color:var(--tsk-ink);font:800 14px/40px var(--tsk-num);outline:none}
.crc-quiz-row input:focus{border-color:var(--tsk-brand);box-shadow:0 0 0 3px var(--tsk-brand-soft)}
.crc-quiz-fb{margin:9px 0 0;min-height:19px;font-size:12.5px;font-weight:800;line-height:1.7}
.crc-quiz-fb.ok{color:var(--tsk-accent)}
.crc-quiz-fb.no{color:var(--tsk-bad)}

@media (max-width:900px){
  .crc-hero{grid-template-columns:1fr;gap:22px}
  .crc-desk{max-width:none}
  .crc-desk::after{display:none}
}
@media (max-width:620px){
  .crc-row2{grid-template-columns:1fr 1fr}
  .crc-res-grid{grid-template-columns:1fr 1fr}
  .crc-acts{flex-wrap:wrap}
  .crc-acts .tsk-btn-main{flex:1 0 100%}
  .crc-var-toolbar .tsk-btn{flex:1}
  .crc-quiz-row input{flex:1 0 100%;width:100%}
}

/* ==========================================================
   *  细节打磨：键盘可达性、长数字换行、打印与动效降级
   *  说明：以下规则都限定在 .tsk 工具作用域内，不影响站内其它页面
   * ========================================================== */
.crc .tsk-btn:focus-visible,
.crc .crc-tab:focus-visible,
.crc .crc-seg button:focus-visible{
    outline:2px solid var(--tsk-brand);
    outline-offset:2px;
}
.crc input[type="number"]::-webkit-outer-spin-button,
.crc input[type="number"]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.crc input[type="number"]{
    -moz-appearance:textfield;
    appearance:textfield;
}
.crc input::placeholder,
.crc textarea::placeholder{
    color:var(--tsk-faint);
    opacity:1;
}
.crc ::selection{
    background:var(--tsk-brand-soft);
    color:var(--tsk-brand-ink);
}
.crc .crc-res-card b,
.crc .crc-main-card b{
    font-variant-numeric:tabular-nums lining-nums;
    letter-spacing:-.01em;
    line-height:1.15;
}
.crc .crc-res-card b{
    overflow-wrap:anywhere;
}
.crc .crc-var-item .q,
.crc .crc-question,
.crc .crc-steps li{
    overflow-wrap:break-word;
    word-break:normal;
}
.crc .crc-table-wrap{
    scrollbar-width:thin;
    scrollbar-color:var(--tsk-line) transparent;
}
.crc .crc-table-wrap::-webkit-scrollbar{
    height:8px;
}
.crc .crc-table-wrap::-webkit-scrollbar-thumb{
    background:var(--tsk-line);
    border-radius:99px;
}
.crc .crc-table-wrap::-webkit-scrollbar-track{
    background:transparent;
}
.crc .crc-var-toolbar .tsk-btn,
.crc .crc-acts .tsk-btn,
.crc .crc-quiz-row .tsk-btn{
    touch-action:manipulation;
}
.crc .crc-var-item{
    transition:border-color .15s,box-shadow .15s;
}
.crc .crc-var-item:hover{
    border-color:var(--tsk-brand);
    box-shadow:var(--tsk-shadow-sm);
}
.crc .crc-panel:not(.on){
    display:none;
}
.crc .crc-result[hidden]{
    display:none;
}
.crc .crc-result{
    animation:crc-rise .28s ease both;
}
@keyframes crc-rise{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:none}
}
.crc .crc-alert b{
    font-weight:800;
}
.crc .crc-err.show{
    animation:crc-shake .22s ease;
}
@keyframes crc-shake{
    0%,100%{transform:translateX(0)}
    25%{transform:translateX(-3px)}
    75%{transform:translateX(3px)}
}
.crc .tsk-empty{
    padding:18px 16px;
    text-align:center;
    color:var(--tsk-faint);
    font-size:12.5px;
    line-height:1.8;
}
.crc .crc-quiz-row input:disabled,
.crc .crc-acts .tsk-btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}
.crc .crc-res-grid > .crc-res-card:last-child:nth-child(odd){
    grid-column:span 2;
}
@media (max-width:420px){
    .crc .crc-res-grid{
        grid-template-columns:1fr;
    }
    .crc .crc-res-grid > .crc-res-card:last-child:nth-child(odd){
        grid-column:auto;
    }
    .crc .crc-row2,
    .crc .crc-row3{
        grid-template-columns:1fr;
    }
}
@media (prefers-reduced-motion:reduce){
    .crc *,
    .crc *::before,
    .crc *::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important;
    }
}
@media print{
    .crc{
        background:#fff!important;
        color:#111!important;
    }
    .crc .tsk-crumb-bar,
    .crc .crc-acts,
    .crc .crc-var-toolbar,
    .crc .crc-quiz,
    .crc .crc-tabs{
        display:none!important;
    }
    .crc .crc-result{
        box-shadow:none!important;
        border:1px solid #ddd!important;
        animation:none!important;
    }
    .crc .crc-res-grid{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
    }
    .crc .crc-var-item{
        break-inside:avoid;
    }
    .crc .crc-table{
        font-size:11px!important;
    }
}