/* Chapter reader chrome CSS (reader progress/nav/toc/settings/themes) — dulu inline ~25KB tiap chapter load.
   Di-link di posisi DOM asli (setelah wp_head, sebelum block2 @font-face inline) → cascade identik. */

      /* Reading progress indicator (5.3) */
      .nid-reading-progress{position:fixed;top:0;left:0;width:100%;height:3px;background:rgba(0,0,0,.08);z-index:60}
      .nid-progress-fill{display:block;height:100%;width:100%;background:#12a2d7;transform:scaleX(0);transform-origin:left center;will-change:transform}
      body.nightmode-on .nid-reading-progress{background:rgba(255,255,255,.12)}
		html{
    font:400 .9375rem Open Sans,sans-serif;
    line-height:1.5
}
body{
    padding:0;
    margin:0;
    background:#f2f3f4
}

header a{
    color:#fff
}
.head-container{
    width:100%;
    max-width:1300px;
    margin:0 auto;
    position:relative
}
a{
    text-decoration:none
}
.clear{
    clear:both
}

.m-title h2{
    color:#fff
}
.head-r{
    width:calc(100% - 161px);
    box-sizing:border-box;
    padding:0 15px;
    float:right
}
.s{
    display:inline-block;
    width:20px;
    height:30px;
    background:url("../images/s.svg") 0 6px no-repeat;
    background-size:20px;
    position:absolute;
    top:50%
}
#s-form{
    position:relative
}

.s-input:active{
    border:none
}
input:focus{
    outline:none
}
svg{
    width:16px;
    height:16px;
    fill:currentColor
}
.nav{
    text-align:right
}

::placeholder{
    color:#fff
}
:-ms-input-placeholder{
    color:#fff
}
::-ms-input-placeholder{
    color:#fff
}
.container-alt{
    display:none
}
.screen-reader-text{
    clip:rect(1px,1px,1px,1px);
    height:1px;
    overflow:hidden;
    position:absolute;
    width:1px
}
button.hamburger,button.s-alt{
    align-self:center;
    border:0;
    cursor:pointer;
    display:block;
    height:36px;
    margin:2px 10px 0 0;
    padding:0;
    width:36px;
    background-size:32px;
    z-index:30;
    margin-right:12px 10px 0 0;
    border-radius:18px;
    overflow:hidden
}
button.hamburger{
    float:left;
    margin-left:6px
}
button.s-alt{
    background:url("../images/s.svg") no-repeat center/30px 30px transparent;
    float:right;
    margin-left:10px
}
a.m-title{
    display:block;
    width:calc(100% - 80px);
    padding-left:10px
}
a.m-title h2{
    margin:0;
    line-height:40px
}
.site-
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .no-padding--important{
    padding:0
}
.site-footer .container{
    padding:1.5em
}
.container{
    max-width:1090px
}
.container{
    max-width:1020px;
    margin:0 auto
}
a{
    color:var(--dn-brand);
    text-decoration:none;
    -webkit-transition:all .35s ease;
    -o-transition:all .35s ease;
    transition:all .35s ease
}
[class*=" col--"],[class^=col--]{
    float:left;
    margin-bottom:0;
    margin-left:3%
}

.copyright a{
    color:#333;
    padding:0 5px
}
main.container{
    margin:96px auto 16px;
    min-height:300px;
    width:100%;
    /*max-width:1112px;*/
    max-width:100%;
    box-sizing:border-box
}
article{
    width:100%;
    max-width:760px;
    box-sizing:border-box;
    float:left;
    margin-right:18px
}
.sidebar-container{
    width:100%;
    max-width:332px;
    float:right;
    box-sizing:border-box
}
/* .m-card base -> dn-design.css (Fase 2) */
/* Gaya crumbs kini dari dn-design.css (.crumbs kanonik, tanpa garis bawah).
   Border/padding/font legacy dibuang agar seragam dgn halaman novel. */
.crumbs{
    margin-bottom:var(--dn-space-md)
}
article.post{
    position:relative
}
.post-content{
    color:#333;
    font-family:var(--dn-font-reading,inherit);
    font-size:calc(16px * var(--dn-reader-scale,1));
    line-height:1.8;
    clear:both;
    position:relative;
    max-width:var(--dn-reading-measure,80ch);
    margin-left:auto;
    margin-right:auto
}
.sharer{
    width:100%;
    border-top:1px solid #eaeaea;
    height:25px;
    padding-top:10px;
    text-align:right;
    margin-top:10px
}

amp-sidebar .close-button{
    background:url("../images/c.svg") no-repeat center/18px;
    border:0;
    height:58px;
    position:absolute;
    right:13px;
    top:0;
    width:68px;
    cursor:pointer
}

.ava{
    display:block;
    width:80px;
    height:80px;
    border-radius:80px;
    overflow:hidden
}
.cp{
    padding:8px 0 12px;
    border-bottom:1px solid #dfdfdf
}
.cp b{
    float:left;
    font-size:15px;
    font-weight:normal;
    line-height:1.5
}
.cp a{
    float:right;
    text-transform:none
}
#search{
    position:fixed;
    top:0;
    overflow:hidden;
    height:auto;
    width:100%;
    box-sizing:border-box;
    background:var(--dn-brand);
    z-index:26;
    padding:5px 0;
    transition:all .8s ease;
    color:#fff
}
input.sf-alt{
    width:calc(100% - 60px);
    height:36px;
    background:var(--dn-brand);
    outline:none;
    color:#fff;
    border:1px solid #fff;
    padding:0 10px;
    box-sizing:border-box;
    border-radius:3px;
    margin-top:3px;
    font-size:1.1em
}
.back{
    background:var(--dn-brand);
    border:0;
    color:#fff;
    display:block;
    float:left;
    margin:6px 8px 0
}
.back svg{
    width:24px;
    height:24px
}
.main-title{
    margin:0 0 10px;
    border-bottom:1px solid #dfdfdf;
    padding-bottom:5px
}
/* Judul chapter 2 baris dlm 1 H1 (SEO): nama novel = eyebrow kecil (Montserrat,
   uppercase, muted), judul chapter = display besar (warisi Fraunces dari :where(h1)).
   Eyebrow pakai opacity biar otomatis jadi versi lebih muted dari warna judul di
   tiap mode (paper/dark) tanpa perlu warna terpisah per-mode. */
/* Parent `.m-card > .main-title` = flex row (buat strip accent ::before di kiri).
   Bungkus teks dlm .mt-stack (block) supaya novel+chapter MENUMPUK vertikal, bukan
   sejajar di samping strip. min-width:0 → judul panjang tetap bisa wrap dlm flex. */
.m-card > .main-title{ align-items:flex-start }
.main-title .mt-stack{ display:block; min-width:0 }
.main-title .mt-series{
    display:block;
    font-family:var(--dn-font-head);
    font-size:var(--dn-fs-sm);
    font-weight:var(--dn-fw-semibold);
    letter-spacing:var(--dn-tracking-wide);
    text-transform:uppercase;
    line-height:1.25;
    margin-bottom:3px;
    opacity:.62
}
.main-title .mt-chapter{ display:block }
.chapter-nav{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    grid-template-areas:"prev toc next";
    align-items:center;
    gap:8px;
    width:100%;
    box-sizing:border-box;
    padding:8px 10px;
    margin-top:12px;
    background:var(--dn-surface-2);
    border:1px solid var(--dn-border);
    border-radius:var(--dn-radius-card)
}
amp-selector h2{
    margin:10px 0;
    font-size:16px
}
.prev,.toc,.next{
    position:relative;
    display:inline-flex;
    align-items:center;
    color:var(--dn-text);
    font-family:var(--dn-font-head);
    font-size:var(--dn-fs-sm);
    font-weight:var(--dn-fw-semibold);
    padding:7px 12px;
    border-radius:var(--dn-radius-control);
    text-decoration:none;
    transition:var(--dn-transition)
}
.prev:hover,.toc:hover,.next:hover{
    color:var(--dn-brand-ink);
    background-color:var(--dn-brand-tint)
}
/* ikon via mask → ikut currentColor (kontras benar di dark + hover brand) */
.prev::before,.toc::before,.next::before{
    content:"";
    position:absolute;
    top:50%;
    width:16px;
    height:16px;
    transform:translateY(-50%);
    background-color:currentColor;
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:center;mask-position:center;
    -webkit-mask-size:contain;mask-size:contain
}
.prev{padding-left:30px}
.prev::before{left:8px;-webkit-mask-image:url("../images/prev-b.svg");mask-image:url("../images/prev-b.svg")}
.toc{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    padding-left:32px
}
.toc::before{left:8px;-webkit-mask-image:url("../images/toc-b.svg");mask-image:url("../images/toc-b.svg")}
.next{padding-right:30px}
.next::before{right:8px;-webkit-mask-image:url("../images/next-b.svg");mask-image:url("../images/next-b.svg")}
/* urutan visual: Prev | TOC | Next (sumber HTML = prev,next,toc + sisa .clear).
   Tempatkan eksplisit per kolom → kebal urutan sumber & anak nyasar (mis. .clear). */
.chapter-nav .prev{grid-area:prev;justify-self:start}
.chapter-nav .toc{grid-area:toc;justify-self:center}
.chapter-nav .next{grid-area:next;justify-self:end}
.chapter-nav .clear{display:none}
/* cegah scroll horizontal reader (slot iklan/elemen lebar legacy); fixed/sticky tak terpengaruh */
body.mycap{overflow-x:hidden}
/* AKAR meluber mobile: layout 2-kolom float (article width:100% + margin-right:18px
 * > viewport). Jadikan SATU kolom di tablet/HP. */
@media (max-width:768px){
    article{max-width:100%;margin-right:0;float:none}
    .sidebar-container{float:none;max-width:100%}
    .main-title{overflow-wrap:anywhere}
    .crumbs{overflow-wrap:anywhere}
    .ads,.inarticle-ads{width:100%;max-width:100%;margin-left:0}
}
.cn-on p.cn{
    display:block
}
.cn-off p.cn{
    display:none
}
.lang-btn{
    text-align:left;
    margin:10px 0;
    width:210px;
    float:right;
    background:var(--dn-surface);
    color:var(--dn-text);
    border:1px solid var(--dn-border);
    padding:12px 14px;
    border-radius:var(--dn-radius-card);
    box-shadow:var(--dn-shadow-card);
    line-height:1.8em
}
 #lang-btn,#m-lang-btn{
    border:1px solid #fff;
    border-radius:3px;
    cursor:pointer
}
span#m-lang-btn{
    float:right;
    padding:4px 4px 4px 22px;
    margin-top:6px;
    background-position:4px -38px
}
.dashboard-icon{
    background:url("../images/dashboard.svg") 0 0 no-repeat
}
.plus-thick-icon{
    background:url("../images/plus-thick.svg") 0 0 no-repeat
}
.icon{
    padding-left:44px;
    background-size:24px;
    height:28px;
    display:block
}
.pma-icon{
    background:url("../images/pma.svg") -14px 0 no-repeat;
    background-size:40px
}
.top-ava .ava{
    width:36px;
    height:36px
}
.nav .top-ava{
    position:relative;
    margin-left:32px;
    cursor:pointer;
    display:inline
}
.nav .top-ava:hover{
    background:var(--dn-brand)
}
.top-ava .ava{
    position:absolute;
    top:-10px;
    right:-5px
}
.no-sidebar{
    margin:0 auto;
    float:none
}
.no-top-border{
    padding-top:0;
    margin-top:0;
    border-top:none
}
.hidden{
    display:none
}
ul.lang-list{
    padding:6px 0 6px 10px
}
ul.lang-list li{
    list-style-type:none;
    padding:10px 0 10px 24px
}
.lang-icon{
    padding-left:28px;
    background:url("../images/flags.png");
    background-repeat:no-repeat;
    background-size:14px;
    display:inline-block;
    height:18px
}
.es{
    background-position:0 0
}
.fr{
    background-position:0 -63px
}
.id,#m-lang-btn.id {
			/*background-position: 0 -21px*/
			background-position:3px -19px;
		}
.en{
    background-position:0 -41px
}
@keyframes placeholder{
    0%{
        background-position:-468px 0
    }
    to{
        background-position:468px 0
    }
}
.nav span.lang-icon.en{
    height:auto;
    background-position:5px -51px;
    background-size:18px;
    cursor:pointer;
    padding-left:28px
}
.nav span.lang-icon.en:hover{
    background:#fff url("../images/flags.png") 5px -51px no-repeat;
    background-size:18px
}
#lang-list{
    position:fixed;
    top:0;
    overflow:hidden;
    padding-top:50px;
    background:#fff;
    right:54px;
    z-index:20;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
    border-radius:3px
}
.lang-list{
    display:block;
    width:200px;
    padding:16px 16px 0;
    z-index:30
}
#lang-list a,#lang-list strong{
    color:#333;
    margin:20px 0;
    width:100%;
    display:block
}
#lang-list strong,#lang-list a:hover{
    color:var(--dn-brand)
}
svg.chev-up{
    display:none
}
.active svg.chev-up{
    display:inline-block
}
.active svg.chev-down{
    display:none
}
.sug-list{
    clear:both
}
.sug-list a{
    display:block;
    width:100%;
    padding:3px 5px;
    height:48px;
    color:#999
}
.sug-list a strong{
    color:#333
}
.sug-tmb{
    float:left;
    padding-right:5px
}
.sug-list a span{
    display:block;
    height:26px;
    overflow:hidden;
    color:#000;
    font-size:1.2em
}
#as-box{
    position:fixed;
    top:0;
    overflow:hidden;
    padding:72px 5px 5px;
    width:100%
}
.wrap{
    width:100%;
    max-width:1300px;
    display:block;
    padding-left:160px;
    margin:0 auto;
    box-sizing:border-box
}

.m-hamburger{
    background:url("../../menu.svg")
}
amp-img.img-logo{
    display:inline-block;
    width:28px;
    margin-right:4px;
    margin-bottom:-6px
}
#toolbar{
    display:inline-block
}

amp-sidebar ul svg{
    margin-right:16px;
    width:24px;
    height:24px;
    margin-bottom:-3px
}
amp-sidebar ul svg.nl{
    width:28px;
    height:28px;
    margin-left:-3px
}
.post-content amp-selector svg{
    width:22px;
    height:22px;
    margin-bottom:-4px
}
.ads{
    text-align:center;
    font-style:italic;
    color:#aaa;
    margin:30px auto;
    width:100%;
    box-sizing:border-box
}
.ads small{
    margin-bottom:8px;
    display:inline-block;
    width:100%
}
.inarticle-ads{
    max-width:728px;
    display:block;
    width:100%;
    box-sizing:border-box;
    height:320px
}
.mgid-ads{
    margin:30px auto;
    width:100%;
    box-sizing:border-box
}
.sticky-ads{
    max-width:728px;
    display:block;
    width:100%;
    box-sizing:border-box;
    height:100px;
    margin:0 auto
}
:root:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) .inarticle-ads{
    margin-left:0px
}
.switch{
    position:relative;
    display:inline-block;
    width:50px;
    height:24px
}
.switch button{
    opacity:0
}
.switch input{
    opacity:0;
    width:0;
    height:0
}
.slider{
    position:absolute;
    cursor:pointer;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:var(--dn-surface-3);
    -webkit-transition:.4s;
    transition:.4s
}
.slider:before{
    position:absolute;
    content:"";
    height:18px;
    width:18px;
    left:3px;
    bottom:3px;
    background-color:white;
    -webkit-transition:.4s;
    transition:.4s
}
button.toggle-on + .slider{
    background-color:var(--dn-brand)
}
input:focus + .slider{
    box-shadow:var(--dn-ring)
}
button.toggle-on + .slider:before{
    -webkit-transform:translateX(25px);
    -ms-transform:translateX(25px);
    transform:translateX(25px)
}
.slider.round{
    border-radius:24px
}
.slider.round:before{
    border-radius:50%
}
/* FASE 5: reader nightmode -> token --dn-* (konsisten dgn site dark + bisa diatur Customizer; fallback OLED bila token absen) */
body.nightmode-on{
    background:var(--dn-bg,#000)
}
body.nightmode-on .m-card,body.nightmode-on footer{
    background:var(--dn-card,#1f2129)
}
body.nightmode-on .post-content,body.nightmode-on .copyright,body.nightmode-on .crumbs{
    color:var(--dn-text,#bcc1c9)
}
body.nightmode-on .chapter-nav a,body.nightmode-on main a,body.nightmode-on footer a{
    color:var(--dn-text-muted,#aaa)
}
body.nightmode-on h1,body.nightmode-on h2,body.nightmode-on header a,body.nightmode-on a.logo,body.nightmode-on .s-input{
    color:var(--dn-text,#ccc)
}
body.nightmode-on .chapter-nav{
    background:var(--dn-surface-2,#2f3139)
}
body.nightmode-on header{
    background:var(--dn-surface,#1f2129)
}
body.nightmode-on header,body.nightmode-on .main-title{
    border-bottom:1px solid var(--dn-border,#5f6169)
}
body.nightmode-on .sharer{
    border-top:1px solid var(--dn-border,#5f6169)
}

/* Tema baca nyaman-mata: rendah saturasi, hangat, kontras teks cukup (bukan #000).
   style-5 Sepia (paper) · style-3 Sage (hijau, istirahat mata) · style-1 Grey (hangat) */

/*style-5 — Sepia / paper*/
body.style-5{
    background:#efe3ca
}
body.style-5 .m-card,body.style-5 footer{
    background:#f5ecd8
}
body.style-5 .post-content,body.style-5 .copyright,body.style-5 .crumbs,
body.style-5 #entry-content,body.style-5 .par,body.style-5 .par p{
    color:#5a4a33
}
body.style-5 .chapter-nav a,body.style-5 main a,body.style-5 footer a{
    color:#5a4a33
}
body.style-5 h1,body.style-5 h2{
    color:#4a3c28
}
body.style-5 .chapter-nav{
    background:#f5ecd8
}
/* Header = bar teal global (bukan lagi bar paper). Logo/link/search header
   TETAP putih (site-chrome header a{color:#fff}); jangan diwarnai gelap. */
body.style-5 .main-title{
    border-bottom:1px solid #e3d4b3
}
body.style-5 .sharer{
    border-top:1px solid #e3d4b3
}

/*style-3 — Sage (hijau lembut, paling istirahat utk mata)*/
body.style-3{
    background:#dde7da
}
body.style-3 .m-card,body.style-3 footer{
    background:#e9f0e6
}
body.style-3 .post-content,body.style-3 .copyright,body.style-3 .crumbs,
body.style-3 #entry-content,body.style-3 .par,body.style-3 .par p{
    color:#36433b
}
body.style-3 .chapter-nav a,body.style-3 main a,body.style-3 footer a{
    color:#36433b
}
body.style-3 h1,body.style-3 h2{
    color:#2c3730
}
body.style-3 .chapter-nav{
    background:#e9f0e6
}
body.style-3 .main-title{
    border-bottom:1px solid #cddcc8
}
body.style-3 .sharer{
    border-top:1px solid #cddcc8
}

/*style-1 — Grey hangat*/
body.style-1{
    background:#e7e5e0
}
body.style-1 .m-card,body.style-1 footer{
    background:#f0eeea
}
body.style-1 .post-content,body.style-1 .copyright,body.style-1 .crumbs,
body.style-1 #entry-content,body.style-1 .par,body.style-1 .par p{
    color:#3c3b37
}
body.style-1 .chapter-nav a,body.style-1 main a,body.style-1 footer a{
    color:#3c3b37
}
body.style-1 h1,body.style-1 h2{
    color:#2f2e2b
}
body.style-1 .chapter-nav{
    background:#f0eeea
}
body.style-1 .main-title{
    border-bottom:1px solid #d9d6d0
}
body.style-1 .sharer{
    border-top:1px solid #d9d6d0
}

/* Judul chapter (.main-title) di mode paper — warna HANGAT/bertema, bukan hitam.
   Dulu ikut `body.style-N h1` (#4a3c28 dst) yang tampak hitam pekat + tak menyatu
   dgn latar. Selector `.main-title` (spec 0,2,0) memastikan menang atas base
   :where(h1)=--dn-text. Tiap mode pinjam hue-nya sendiri → judul jadi identitas.
   White (style-4) & Dark (nightmode) sengaja tak diubah. */
body.style-5 .main-title{ color:#6d4620 }   /* Sepia  → chestnut hangat */
body.style-3 .main-title{ color:#2f5138 }   /* Sage   → forest green    */
body.style-1 .main-title{ color:#42392c }   /* Grey   → warm charcoal   */

/* Header bar reader = teal global di SEMUA mode. Logo "XiaNovel" + link + search
   WAJIB putih (dulu mode paper mewarnainya gelap → hitam di atas teal, tak terbaca).
   Eksplisit + spec tinggi supaya menang atas sisa aturan lama mana pun.
   Mobile: logo = `a.m-title > h2` → h2-nya kena `body.style-N h2` (0,1,2) → wajib
   di-override khusus (`.m-title h2` = 0,2,2) biar tetap putih. */
body.style-1 header a, body.style-3 header a, body.style-5 header a,
body.style-1 .logo, body.style-3 .logo, body.style-5 .logo,
body.style-1 .m-title, body.style-3 .m-title, body.style-5 .m-title,
body.style-1 .m-title h2, body.style-3 .m-title h2, body.style-5 .m-title h2,
body.style-1 .s-input, body.style-3 .s-input, body.style-5 .s-input{ color:#fff }

.req{
    display:block;
    width:calc(100% - 34px);
    box-sizing:border-box;
    color:#666;
    text-align:center;
    border:1px solid #eaeaea;
    margin:16px;
    padding:12px;
    border-radius:4px
}
#mgid_iframe{
    height:340px
}
.inarticle-ads.matched{
    height:400px;
    margin-top:10px
}
.link-box{
    padding-left:26px;
    margin:0 0 8px
}
.link-box li{
    color:#555;
    border-bottom:1px solid #eee;
    padding:8px 0
}
h3.link-title{
    margin-bottom:8px
}
.link-box a:hover{
    text-decoration:underline
}
a.title{
    color:#555
}
.stars{
    background:url(../images/star.svg) repeat-x;
    background-size:20%;
    height:15px;
    width:75px;
    clear:both;
    direction:ltr;
    position:relative;
    display:inline-block;
    margin-right:5px
}
.stars span.score{
    display:block;
    background:url(../images/stars.svg) repeat-x;
    height:15px
}
.w-0{
    width:0%
}
.w-5{
    width:5%
}
.w-10{
    width:10%
}
.w-15{
    width:15%
}
.w-20{
    width:20%
}
.w-25{
    width:25%
}
.w-30{
    width:30%
}
.w-35{
    width:35%
}
.w-40{
    width:40%
}
.w-45{
    width:45%
}
.w-50{
    width:50%
}
.w-55{
    width:55%
}
.w-60{
    width:60%
}
.w-65{
    width:65%
}
.w-70{
    width:70%
}
.w-75{
    width:75%
}
.w-80{
    width:80%
}
.w-85{
    width:85%
}
.w-90{
    width:90%
}
.w-95{
    width:95%
}
.w-100{
    width:100%
}
.square-ads{
    display:block;
    float:left;
    margin:12px 24px 12px 0;
    width:50%;
    min-width:300px;
    height:auto
}
svg#i-hd{
    width:80px;
    height:80px
}
svg path.bg{
    fill:#ddd
}
svg path.ppl{
    fill:#f5f6fd
}
.top-ava .ava,.top-ava svg#i-hd{
    width:36px;
    height:36px
}
.container-alt svg#i-hd{
    width:36px;
    height:36px
}
.donations{
    text-align:center;
    background:#ccf0fd;
    border-radius:8px;
    margin:12px 0;
    padding:4px 8px;
    font-weight:700
}
.donations a{
    border-radius:8px
}
@media only screen and (max-width:1112px){
    #lang-list{
        right:0;
        padding-top:26px
    }
    article,.sidebar-container{
        float:none;
        margin:0 auto
    }
    .sidebar-container{
        max-width:760px
    }
    header{
        height:50px;
        box-sizing:border-box;
        position:fixed;
        top:0;
        z-index:25;
        padding:5px 0
    }
    .head-container{
        display:none
    }
    .wrap{
        padding-left:0
    }
    .container-alt{
        display:block
    }
    #as-box{
        padding:50px 0 5px
    }
    button.hamburger{
        display:inline-block
    }
    main.container{
        margin-top:60px
    }
}
@media only screen and (max-width:760px){
    .inarticle-ads.matched{
        height:600px
    }
    .m-card{
        margin-top:10px
    }
    .post-content{
        padding:0 10px
    }
    .ads,.inarticle-ads{
        width:100%
    }
    .ads{
        margin-left:-26px
    }
}
@media only screen and (max-width:690px){
    .sticky-ads{
        height:80px
    }
}
@media only screen and (max-width:548px){
    .toc{
        padding-right:4px
    }
}
@media (max-width:480px){
    .square-ads{
        width:100%;
        float:none;
        margin:12px auto
    }
    #mgid_iframe{
        height:1070px
    }
}
@media only screen and (max-width:464px){
    .m-card{
        padding:10px
    }
    .ads{
        margin-left:-20px
    }
}
@media only screen and (max-width:400px){
    .toc{
        font-size:14px
    }
}
#mgid-inarticle{
    height:260px
}
#mgid-under{
    height:320px
}
.beaver-under{
    display:block;
    margin:0 auto;
    width:500px;
    max-width:100%;
    height:300px;
    overflow:hidden
}
span.edit-btn{
    display:inline-flex;
    align-items:center;
    margin-top:10px;
    padding:7px 14px;
    border:1px solid var(--dn-border);
    border-radius:var(--dn-radius-control);
    color:var(--dn-text-muted);
    font-family:var(--dn-font-head);
    font-size:var(--dn-fs-sm);
    font-weight:var(--dn-fw-semibold);
    cursor:pointer;
    transition:var(--dn-transition)
}
span.cancel{
    color:var(--dn-text-muted)
}
.cancel:hover{
    color:var(--dn-text);
    background:var(--dn-surface-2);
    border-color:var(--dn-brand)
}
form#readingoptionsform{
    margin-top:10px
}
button#settings{
    position:relative;
    padding:8px 14px 8px 34px;
    margin-top:12px;
    float:right;
    color:var(--dn-text);
    font-family:var(--dn-font-head);
    font-size:var(--dn-fs-sm);
    font-weight:var(--dn-fw-semibold);
    background:var(--dn-surface-2);
    border:1px solid var(--dn-border);
    border-radius:var(--dn-radius-control);
    cursor:pointer;
    transition:var(--dn-transition)
}
button#settings::before{
    content:"";
    position:absolute;
    left:10px;
    top:50%;
    width:18px;
    height:18px;
    transform:translateY(-50%);
    background-color:currentColor;
    -webkit-mask:url(../images/cog-outline.svg) center/contain no-repeat;
    mask:url(../images/cog-outline.svg) center/contain no-repeat
}
button#settings:hover{
    color:var(--dn-brand-ink);
    background:var(--dn-brand-tint);
    border-color:var(--dn-brand)
}
span#saved{
    position:fixed;
    left:50%;
    bottom:24px;
    transform:translateX(-50%);
    z-index:99999;
    padding:9px 18px;
    color:var(--dn-on-brand);
    background:var(--dn-ok);
    border-radius:var(--dn-radius-pill);
    box-shadow:var(--dn-shadow-pop);
    font-family:var(--dn-font-head);
    font-size:var(--dn-fs-sm);
    font-weight:var(--dn-fw-semibold);
    text-align:center
}
#saving,span.note{
    color:#777;
    font-size:14px;
    line-height:16px;
    display:inline-block
}
span.note{
    margin-top:8px
}
label{
    display:inline-block;
    width:92px
}
.par p{
    line-height:1.8;
    margin:0 0 1.1em
}
.par p:last-child{
    margin-bottom:0
}
/* FASE 5: skala global --dn-reader-scale (Customizer) dikali ukuran pilihan user (binding AMP fontsize utuh) */
.fontsize-10{
    font-size:calc(10px * var(--dn-reader-scale,1))
}
.fontsize-12{
    font-size:calc(12px * var(--dn-reader-scale,1))
}
.fontsize-14{
    font-size:calc(14px * var(--dn-reader-scale,1))
}
.fontsize-16{
    font-size:calc(16px * var(--dn-reader-scale,1))
}
.fontsize-18{
    font-size:calc(18px * var(--dn-reader-scale,1))
}
.fontsize-20{
    font-size:calc(20px * var(--dn-reader-scale,1))
}
.fontsize-22{
    font-size:calc(22px * var(--dn-reader-scale,1))
}
.fontsize-24{
    font-size:calc(24px * var(--dn-reader-scale,1))
}
.fontsize-26{
    font-size:calc(26px * var(--dn-reader-scale,1))
}
.fontsize-28{
    font-size:calc(28px * var(--dn-reader-scale,1))
}
.fontsize-30{
    font-size:calc(30px * var(--dn-reader-scale,1))
}
.fontsize-32{
    font-size:calc(32px * var(--dn-reader-scale,1))
}
.fontsize-34{
    font-size:calc(34px * var(--dn-reader-scale,1))
}
.fontsize-36{
    font-size:calc(36px * var(--dn-reader-scale,1))
}
@media only screen and (max-width:760px){
    #mgid-inarticle{
        height:280px
    }
}
@media only screen and (max-width:646px){
    #mgid-inarticle{
        height:300px
    }
}
@media only screen and (max-width:622px){
    #mgid-inarticle{
        height:330px
    }
}
@media only screen and (max-width:532px){
    #mgid-inarticle{
        height:400px
    }
    #mgid-under{
        height:1170px
    }
    .beaver-under{
        width:333px
    }
}
@media only screen and (max-width:412px){
    #mgid-inarticle{
        height:410px
    }
    #mgid-under{
        height:1010px
    }
}
@media only screen and (max-width:385px){
    #mgid-inarticle{
        height:450px
    }
    #mgid-under{
        height:970px
    }
    .beaver-under{
        width:166px
    }
}
@media only screen and (max-width:344px){
    #mgid-inarticle{
        height:470px
    }
    #mgid-under{
        height:890px
    }
}
@media only screen and (max-width:312px){
    #mgid-inarticle{
        height:500px
    }
    #mgid-under{
        height:850px
    }
}