:root{--surface:#ffffff;--surface-muted:#f4f6f9;--border:#d9e1ec;--text-main:#0c1222;--text-muted:#4d5f7a;--primary:#2563eb;--primary-dark:#1e4fd6;--accent:#0ea5e9;--shadow-soft:0 12px 40px rgba(15,23,42,0.07);--gradient:linear-gradient(135deg,#eff6ff 0%,#f8fafc 100%);--ith-radius:14px;--ith-radius-sm:10px;--ith-border:rgba(15,23,42,0.08);--ith-ink:#0c1222;--ith-chip-bg:var(--surface-muted);--ith-accent:var(--primary);--ith-accent-soft:rgba(37,99,235,0.12);}
.ith-wrap{margin-bottom:2.5rem;}
.ith-mistakes{border:1px solid var(--border, var(--ith-border));border-radius:var(--ith-radius);padding:1.25rem 1.35rem;background:var(--surface, #fff);box-shadow:var(--shadow-soft, 0 8px 30px rgba(15,23,42,0.06));margin-bottom:1.75rem;}
.ith-mistakes h2{font-size:1.15rem;font-weight:700;color:var(--text-main, var(--ith-ink));margin:0 0 0.65rem;}
.ith-mistakes ul{margin:0;padding-left:1.15rem;color:var(--text-muted);line-height:1.55;}
.ith-mistakes li{margin-bottom:0.45rem;}
.ith-shell{border:1px solid var(--border, var(--ith-border));border-radius:calc(var(--ith-radius) + 4px);background:var(--surface, #fff);box-shadow:var(--shadow-soft, 0 12px 40px rgba(15,23,42,0.07));overflow:hidden;margin-bottom:2rem;}
.ith-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;min-height:200px;padding:1.75rem 1.25rem;text-align:center;cursor:pointer;background:linear-gradient(145deg,var(--ith-chip-bg),var(--surface, #fff));border:2px dashed var(--border, #cbd5e1);border-radius:var(--ith-radius);margin:1rem;transition:border-color 0.2s ease, background 0.2s ease;}
.ith-dropzone:hover,.ith-dropzone.ith-dropzone--active{border-color:var(--ith-accent);background:var(--ith-accent-soft);}
.ith-dropzone strong{font-size:1.05rem;color:var(--text-main, var(--ith-ink));}
.ith-dropzone span{font-size:0.9rem;color:var(--text-muted);}
.ith-workspace{display:none;padding:0 1rem 1rem;}
.ith-workspace.ith-workspace--open{display:block;}
.ith-toolbar{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1rem 1.25rem;padding:0.85rem 0 1.1rem;border-bottom:1px solid var(--border, var(--ith-border));margin-bottom:1rem;}
.ith-segments{display:flex;flex-wrap:wrap;gap:0.35rem;background:var(--ith-chip-bg);padding:0.35rem;border-radius:var(--ith-radius-sm);}
.ith-seg{border:0;background:transparent;color:var(--text-muted);font-size:0.82rem;font-weight:600;padding:0.45rem 0.75rem;border-radius:8px;cursor:pointer;transition:background 0.15s ease, color 0.15s ease;}
.ith-seg:hover{color:var(--text-main, var(--ith-ink));}
.ith-seg.is-on{background:var(--surface, #fff);color:var(--ith-accent);box-shadow:0 1px 3px rgba(15,23,42,0.08);}
.ith-slider-block{flex:1;min-width:min(100%,220px);}
.ith-slider-block label{display:block;font-size:0.78rem;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.35rem;}
.ith-slider-row{display:flex;align-items:center;gap:0.65rem;}
.ith-slider{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:999px;background:linear-gradient(90deg,#000 0%,#fff 100%);outline:none;}
.ith-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ith-accent);border:2px solid var(--surface, #fff);box-shadow:0 2px 8px rgba(15,23,42,0.2);cursor:pointer;}
.ith-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ith-accent);border:2px solid var(--surface, #fff);box-shadow:0 2px 8px rgba(15,23,42,0.2);cursor:pointer;}
.ith-slider:disabled{opacity:0.35;cursor:not-allowed;}
.ith-val{font-variant-numeric:tabular-nums;font-weight:700;font-size:0.95rem;color:var(--ith-accent);min-width:2.5rem;text-align:right;}
.ith-actions{display:flex;flex-wrap:wrap;gap:0.5rem;}
.ith-btn{display:inline-flex;align-items:center;justify-content:center;gap:0.35rem;font-size:0.875rem;font-weight:600;padding:0.55rem 1rem;border-radius:var(--ith-radius-sm);border:1px solid var(--border, var(--ith-border));background:var(--surface, #fff);color:var(--text-main, var(--ith-ink));cursor:pointer;transition:background 0.15s ease, border-color 0.15s ease;}
.ith-btn:hover{background:var(--ith-chip-bg);}
.ith-btn--primary{background:var(--ith-accent);border-color:var(--ith-accent);color:#fff;}
.ith-btn--primary:hover{filter:brightness(1.05);}
.ith-btn:disabled{opacity:0.45;cursor:not-allowed;pointer-events:none;}
.ith-chips{display:none;margin-bottom:0.75rem;gap:0.4rem;}
@media (max-width:767px){.ith-chips{display:flex;}}
.ith-chip{flex:1;font-size:0.8rem;font-weight:600;padding:0.5rem 0.6rem;border-radius:var(--ith-radius-sm);border:1px solid var(--border, var(--ith-border));background:var(--surface, #fff);color:var(--text-muted);cursor:pointer;}
.ith-chip.is-on{border-color:var(--ith-accent);color:var(--ith-accent);background:var(--ith-accent-soft);}
.ith-viewdeck{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;}
@media (max-width:767px){.ith-viewdeck{grid-template-columns:1fr;}.ith-panel{display:none;}.ith-panel.is-visible{display:block;}}
.ith-panel{background:var(--ith-chip-bg);border-radius:var(--ith-radius-sm);padding:0.5rem;border:1px solid var(--border, var(--ith-border));}
.ith-panel header{font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);margin:0 0 0.4rem 0.15rem;}
.ith-canvas-wrap{position:relative;border-radius:8px;overflow:auto;max-height:min(78vh,860px);min-height:320px;background:repeating-conic-gradient(#e5e7eb 0% 25%,#f3f4f6 0% 50%) 50% / 16px 16px;line-height:0;}
@media (max-width:767px){.ith-canvas-wrap{max-height:min(72vh,700px);min-height:260px;}}
.ith-canvas-wrap canvas{max-width:100%;height:auto;display:block;margin:0 auto;vertical-align:middle;}
.ith-note{font-size:0.8rem;color:var(--text-muted);margin-top:0.65rem;line-height:1.45;}
.ith-prose section{margin-bottom:2.25rem;}
.ith-prose h2{font-size:1.35rem;font-weight:700;color:var(--text-main, var(--ith-ink));margin:0 0 0.75rem;}
.ith-prose h3{font-size:1.05rem;font-weight:700;margin:1.25rem 0 0.5rem;color:var(--text-main, var(--ith-ink));}
.ith-prose p,.ith-prose dd{color:var(--text-muted);line-height:1.65;margin:0 0 0.85rem;}
.ith-prose p:last-child{margin-bottom:0;}
.ith-prose dl{margin:0;border:1px solid var(--border, var(--ith-border));border-radius:var(--ith-radius);overflow:hidden;}
.ith-prose dt{font-weight:700;font-size:0.88rem;padding:0.65rem 1rem;background:var(--ith-chip-bg);color:var(--text-main, var(--ith-ink));border-bottom:1px solid var(--border, var(--ith-border));}
.ith-prose dd{padding:0.75rem 1rem 1rem;margin:0;border-bottom:1px solid var(--border, var(--ith-border));}
.ith-prose dd:last-child{border-bottom:0;}
.ith-callout{border-left:4px solid var(--ith-accent);padding:1rem 1.1rem;background:var(--ith-accent-soft);border-radius:0 var(--ith-radius-sm) var(--ith-radius-sm) 0;margin:1.25rem 0;}
.ith-callout strong{display:block;font-size:0.9rem;color:var(--text-main, var(--ith-ink));margin-bottom:0.35rem;}
.ith-grid-2{display:grid;gap:1rem;}
@media (min-width:768px){.ith-grid-2{grid-template-columns:1fr 1fr;}}
.ith-bench{font-size:0.9rem;color:var(--text-muted);border:1px dashed var(--border, var(--ith-border));border-radius:var(--ith-radius-sm);padding:1rem 1.1rem;background:var(--ith-chip-bg);}
.ith-tips{display:flex;flex-direction:column;gap:0.5rem;padding:1rem 1.15rem;border-radius:var(--ith-radius);background:var(--ith-chip-bg);border:1px solid var(--border, var(--ith-border));margin-bottom:2rem;}
.ith-tips strong{font-size:0.85rem;color:var(--text-main, var(--ith-ink));}
.ith-tips span{font-size:0.88rem;color:var(--text-muted);line-height:1.5;}