*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip !important; }
body { -webkit-font-smoothing:antialiased; background:#faf9f7; color:#1a1a1a; }
::-webkit-scrollbar{width:6px;}::-webkit-scrollbar-track{background:#f0ede8;}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:#c0392b;}

#read-progress-bar {
    position:fixed; top:0; left:0; height:3px; z-index:300;
    background:linear-gradient(90deg,#c0392b,#c9851a);
    width:0%; transition:width .08s linear; pointer-events:none;
}

@keyframes fadeUp { from{opacity:0;transform:translateY(16px);} to{opacity:1;transform:translateY(0);} }
.anim-in { animation:fadeUp .65s cubic-bezier(.16,1,.3,1) both; }
.reveal-up { opacity:0; transform:translateY(14px); transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1); }
.reveal-up.visible { opacity:1; transform:none; }

.art-hero {
    background:#111;
    position:relative; overflow:hidden;
    padding:3rem 1.5rem 3.5rem;
}
.art-hero::before {
    content:''; position:absolute; inset:0;
    background-image:repeating-linear-gradient(-45deg,transparent,transparent 28px,rgba(192,57,43,.04) 28px,rgba(192,57,43,.04) 29px);
    pointer-events:none;
}
.art-hero-glow-a { position:absolute; top:-80px; left:-60px; width:400px; height:300px; background:radial-gradient(circle,rgba(192,57,43,.12) 0%,transparent 70%); filter:blur(60px); pointer-events:none; }
.art-hero-glow-b { position:absolute; bottom:-60px; right:-40px; width:350px; height:250px; background:radial-gradient(circle,rgba(201,133,26,.08) 0%,transparent 70%); filter:blur(60px); pointer-events:none; }
.art-hero-inner { max-width:1360px; margin:0 auto; padding:0 1.5rem; position:relative; z-index:1; text-align:center; }
.art-cover-wrap { background:#111; }
.art-cover-wrap > div { max-width:1360px; margin:0 auto; padding:0 1.5rem; }
.art-cover-img { width:100%; max-height:380px; display:block; opacity:.85; object-fit:cover; border-radius:0; }

.art-layout {
    max-width:1360px; margin:0 auto;
    display:flex; gap:0;
    align-items:stretch;
    padding:0;
}
@media(max-width:960px){ .art-layout{flex-direction:column;} .art-toc-col{display:none;} }

.art-toc-col {
    width:290px;
    flex-shrink:0;
    padding:2rem 0 2rem 1.5rem;
}
.toc-sticky-panel {
    position:sticky;
    top:80px;
    max-height:calc(100vh - 100px);
    overflow-y:auto;
    scrollbar-width:none;
    padding:1.375rem 1.125rem 1.375rem 1.375rem;
}
.toc-sticky-panel::-webkit-scrollbar{display:none;}
.toc-header {
    font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(0,0,0,.3); margin-bottom:.875rem; padding-left:.5rem;
    display:flex; align-items:center; gap:.5rem;
}
.toc-header::before { content:''; width:14px; height:2px; background:#c0392b; flex-shrink:0; }
.toc-progress-track { height:2px; background:rgba(0,0,0,.08); border-radius:999px; margin-bottom:1rem; overflow:hidden; }
.toc-progress-fill { height:100%; width:0; background:linear-gradient(90deg,#c0392b,#c9851a); border-radius:999px; transition:width .12s linear; }
.toc-nav { display:flex; flex-direction:column; gap:2px; }
.toc-link {
    display:grid; grid-template-columns:10px 1fr; align-items:start; gap:.5rem;
    padding:.5rem; border-left:2px solid transparent; border-radius:0 6px 6px 0;
    font-size:.875rem; font-weight:600; color:rgba(0,0,0,.4);
    text-decoration:none; transition:all .2s ease; cursor:pointer;
    line-height:1.55; white-space:normal; word-break:break-word; overflow-wrap:anywhere;
}
.toc-link:hover { color:#111; background:rgba(0,0,0,.04); }
.toc-link.active { color:#c0392b; border-left-color:#c0392b; background:rgba(192,57,43,.05); font-weight:700; }
.toc-dot { width:6px; height:6px; border-radius:50%; background:rgba(0,0,0,.14); flex-shrink:0; margin-top:.45em; transition:background .2s,transform .2s; }
.toc-link.active .toc-dot { background:#c0392b; transform:scale(1.5); }
.toc-cta-block { margin-top:1.75rem; padding:1.125rem 1rem; background:linear-gradient(135deg,#111 0%,#1a0a0a 100%); border-radius:10px; border:1px solid rgba(192,57,43,.2); }
.toc-cta-block-label { font-size:.55rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:.625rem; }
.toc-cta-block-btn {
    display:block; width:100%; text-align:center;
    background:#c0392b; color:#fff; font-size:.75rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em;
    padding:.625rem .875rem; border-radius:6px; text-decoration:none;
    transition:background .2s; box-shadow:0 4px 12px rgba(192,57,43,.35);
}
.toc-cta-block-btn:hover { background:#a93226; }

.art-content-col { flex:1; min-width:0; padding:2.5rem 2.5rem 5rem 2rem; background:#fff; }
@media(max-width:960px){ .art-content-col{padding:2rem 1.25rem 4rem;} }

.breadcrumb-row {
    display:flex; align-items:center; gap:.5rem;
    font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
    color:rgba(0,0,0,.3); margin-bottom:2rem; flex-wrap:wrap;
}
.breadcrumb-row a { color:rgba(0,0,0,.3); text-decoration:none; transition:color .18s; }
.breadcrumb-row a:hover { color:#c0392b; }

.art-lead {
    font-size:1rem; line-height:1.9; color:#555;
    border-left:3px solid #c0392b; padding:1rem 1.375rem;
    background:rgba(192,57,43,.03); border-radius:0 10px 10px 0; margin-bottom:3rem;
}
.art-lead strong { color:#111; font-weight:700; }

.art-section { margin-bottom:3rem; }
.section-header { display:flex; align-items:center; gap:.75rem; margin-bottom:1.25rem; }
.sec-badge {
    font-size:.55rem; font-weight:800; letter-spacing:.1em;
    font-family:'JetBrains Mono',monospace;
    color:#c0392b; background:rgba(192,57,43,.08);
    border:1px solid rgba(192,57,43,.2); padding:3px 8px; border-radius:4px; flex-shrink:0;
}
.prose-h2 {
    font-size:1.25rem; font-weight:800; letter-spacing:-.03em; line-height:1.3;
    color:#111; margin:0; padding-left:.875rem; border-left:3px solid #c0392b; scroll-margin-top:80px;
}
.prose-p { font-size:.9375rem; line-height:1.95; color:#555; margin:0 0 1rem; }
.prose-p:last-child { margin-bottom:0; }
.prose-p strong { color:#111; font-weight:700; }
.prose-p a { color:#c0392b; font-weight:500; text-decoration:none; }
.prose-p a:hover { text-decoration:underline; }
.prose-p code { font-family:'JetBrains Mono',monospace; font-size:.82em; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.1); border-radius:4px; padding:1px 6px; color:#c0392b; }

.step-item {
    display:flex; gap:.875rem; align-items:flex-start;
    padding:.875rem 1.125rem; border-radius:10px; margin-bottom:.5rem;
    background:#faf9f7; border:1px solid rgba(0,0,0,.08);
    transition:background .2s,border-color .2s,box-shadow .2s;
}
.step-item:hover { background:#fff; border-color:rgba(192,57,43,.2); box-shadow:0 2px 12px rgba(0,0,0,.06); }
.step-badge {
    width:28px; height:28px; border-radius:6px; flex-shrink:0;
    background:rgba(192,57,43,.1); border:1px solid rgba(192,57,43,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:.58rem; font-weight:800; letter-spacing:.05em;
    font-family:'JetBrains Mono',monospace; color:#c0392b;
}
.step-item p { margin:0; font-size:.9rem; line-height:1.85; color:#555; }
.step-item p strong { color:#111; }
.step-item p code { font-family:'JetBrains Mono',monospace; font-size:.82em; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.1); border-radius:4px; padding:1px 5px; color:#c0392b; }

.code-block { background:#14141e; border-radius:10px; overflow:hidden; margin:1.75rem 0; border:1px solid rgba(0,0,0,.15); }
.code-hd { display:flex; align-items:center; justify-content:space-between; padding:.5rem 1.125rem; background:#0d0d18; border-bottom:1px solid rgba(255,255,255,.06); }
.code-lang { font-family:'JetBrains Mono',monospace; font-size:.56rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.25); }
.code-dots { display:flex; gap:5px; }
.code-dot { width:9px; height:9px; border-radius:50%; }
.code-body { font-family:'JetBrains Mono',monospace; font-size:.8125rem; line-height:1.9; color:#94a3b8; padding:1.25rem 1.5rem; overflow-x:auto; white-space:pre; margin:0; }

.callout { display:flex; gap:.875rem; align-items:flex-start; border-radius:10px; padding:1rem 1.25rem; margin:1.75rem 0; border:1px solid; }
.callout p { margin:0; font-size:.875rem; line-height:1.85; }
.callout p strong { font-weight:700; }
.callout p a { font-weight:500; text-decoration:none; }
.callout p a:hover { text-decoration:underline; }
.callout p code { font-family:'JetBrains Mono',monospace; font-size:.82em; border-radius:4px; padding:1px 5px; }
.co-info { background:rgba(201,133,26,.05); border-color:rgba(201,133,26,.2); color:#555; }
.co-info strong { color:#111; }
.co-info .cico { color:#c9851a; }
.co-info a { color:#c0392b; }
.co-info code { background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.1); color:#c0392b; }
.co-warn { background:rgba(192,57,43,.04); border-color:rgba(192,57,43,.2); color:#555; }
.co-warn strong { color:#c0392b; }
.co-warn .cico { color:#c0392b; }
.co-warn code { background:rgba(192,57,43,.07); border:1px solid rgba(192,57,43,.15); color:#c0392b; }
.cico { font-size:1rem; flex-shrink:0; margin-top:2px; }

.tbl-wrap { overflow-x:auto; border-radius:10px; overflow:hidden; border:1px solid rgba(0,0,0,.1); margin:1.75rem 0; }
.tbl { width:100%; border-collapse:collapse; font-size:.875rem; }
.tbl thead tr { background:#f5f4f0; }
.tbl th { text-align:left; padding:.75rem 1.125rem; font-size:.6rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:rgba(0,0,0,.45); border-bottom:1px solid rgba(0,0,0,.08); }
.tbl td { padding:.75rem 1.125rem; color:#555; border-bottom:1px solid rgba(0,0,0,.06); background:#fff; line-height:1.75; vertical-align:top; }
.tbl tr:last-child td { border-bottom:none; }
.tbl tr:hover td { background:#fdfcfa; color:#111; }
.tbl td strong { color:#111; font-weight:700; }

.pull-quote {
    margin:1.75rem 0; padding:1.125rem 1.625rem;
    border-left:3px solid #c9851a; background:rgba(201,133,26,.05); border-radius:0 10px 10px 0;
}
.pull-quote p { font-size:1rem; line-height:1.8; font-weight:600; color:#7a5010; margin:0; font-style:italic; }

.faq-item { background:#faf9f7; border:1px solid rgba(0,0,0,.1); border-radius:10px; overflow:hidden; margin-bottom:.5rem; transition:border-color .22s,box-shadow .22s; }
.faq-item.open { border-color:rgba(192,57,43,.3); box-shadow:0 2px 12px rgba(192,57,43,.06); }
.faq-btn { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.125rem 1.375rem; background:none; border:none; cursor:pointer; font-family:inherit; text-align:left; }
.faq-q { font-size:.9375rem; font-weight:700; color:#111; line-height:1.5; }
.faq-icon { width:26px; height:26px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.07); color:rgba(0,0,0,.4); transition:background .2s,transform .35s cubic-bezier(.16,1,.3,1),color .2s; }
.faq-item.open .faq-icon { background:rgba(192,57,43,.12); color:#c0392b; transform:rotate(45deg); }
.faq-body { max-height:0; overflow:hidden; transition:max-height .45s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-body { max-height:600px; }
.faq-ans { padding:.25rem 1.375rem 1.25rem; font-size:.9rem; line-height:1.9; color:#555; }
.faq-ans a { color:#c0392b; font-weight:500; text-decoration:none; }
.faq-ans a:hover { text-decoration:underline; }
.faq-ans code { font-family:'JetBrains Mono',monospace; font-size:.82em; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.09); border-radius:4px; padding:1px 5px; color:#c0392b; }

.art-bottom-bar {
    border-top:1px solid rgba(0,0,0,.1); margin-top:3rem; padding-top:1.75rem;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem;
}
.back-link { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:700; color:rgba(0,0,0,.35); text-decoration:none; letter-spacing:.04em; text-transform:uppercase; transition:color .2s; }
.back-link:hover { color:#c0392b; }
.rent-btn {
    display:inline-flex; align-items:center; gap:.5rem;
    background:#c0392b; color:#fff; font-size:.8rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em;
    padding:.75rem 1.75rem; border-radius:6px; text-decoration:none;
    transition:background .2s; box-shadow:0 4px 14px rgba(192,57,43,.35);
}
.rent-btn:hover { background:#a93226; }

#float-btn {
    position:fixed; right:1.25rem; bottom:1.25rem; z-index:4000;
    opacity:0; transform:translateY(8px); pointer-events:none;
    transition:opacity .3s,transform .3s;
}
#float-btn.show { opacity:1; transform:translateY(0); pointer-events:auto; }
.float-btn-inner {
    display:inline-flex; align-items:center; gap:.5rem;
    background:#c0392b; color:#fff; font-size:.75rem; font-weight:800;
    text-transform:uppercase; letter-spacing:.06em; padding:.625rem 1.25rem;
    border-radius:999px; text-decoration:none; box-shadow:0 6px 20px rgba(192,57,43,.45); transition:background .2s;
}
.float-btn-inner:hover { background:#a93226; }