/*
Theme Name: TechStack365
Theme URI: https://techstack365.com
Author: Lokchandar Ekambaram
Description: Editorial liquid-glass theme for TechStack365. Light and dark modes with a header toggle, frosted panels, Fraunces/Newsreader serif typography and a single ember accent. Design-only: renders your existing posts, pages and links exactly as they are. Custom logo, colors and fonts via Appearance > Customize. Works alongside free Elementor: Elementor-built pages and posts render full width.
Version: 1.1.15
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: techstack365
*/

*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#181a21;
  --ink:#ece8e1;
  --ink-2:rgba(236,232,225,.72);
  --ink-3:rgba(236,232,225,.45);
  --hair:rgba(236,232,225,.14);
  --accent:#e8853d;
  --panel:rgba(255,255,255,.05);
  --panel-brd:rgba(255,255,255,.1);
  --wash1:rgba(232,133,61,.08);
  --wash2:rgba(96,120,160,.10);
  --header-bg:rgba(24,26,33,.55);
  --code-bg:rgba(12,13,18,.85);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-serif:'Newsreader',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
html.light{
  --bg:#f3f0e9;
  --ink:#1d1a16;
  --ink-2:rgba(29,26,22,.72);
  --ink-3:rgba(29,26,22,.48);
  --hair:rgba(29,26,22,.14);
  --accent:#c2611d;
  --panel:rgba(255,255,255,.5);
  --panel-brd:rgba(29,26,22,.09);
  --wash1:rgba(194,97,29,.07);
  --wash2:rgba(120,140,110,.09);
  --header-bg:rgba(243,240,233,.6);
  --code-bg:#1d1a16;
}
html,body{background:var(--bg)}
body{
  font-family:var(--font-body);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(900px 480px at 82% -6%, var(--wash1), transparent 70%),
    radial-gradient(760px 520px at -10% 34%, var(--wash2), transparent 70%),
    radial-gradient(700px 460px at 96% 62%, var(--wash1), transparent 72%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  transition:background-color .25s ease,color .25s ease;
}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 36px}
.mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
img{max-width:100%;height:auto}

/* glass */
.gp{
  background:var(--panel);
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
  border:1px solid var(--panel-brd);
  border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09), 0 10px 28px rgba(10,10,14,.10);
}
html.light .gp{ box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 10px 26px rgba(60,50,35,.07); }

/* header */
.site-header{border-bottom:1px solid var(--hair);background:var(--header-bg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:50}
.hbar{display:flex;align-items:center;gap:40px;padding:14px 36px;max-width:1240px;margin:0 auto;position:relative}
.brand{display:flex;align-items:center;min-width:0}
.wordmark{font-family:var(--font-mono);font-size:14px;font-weight:700;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--accent)}
.custom-logo-link,.brand-img{display:inline-flex;align-items:center}
.custom-logo,.brand-img img{max-height:38px;width:auto;display:block}
html:not(.light) .custom-logo-link,html:not(.light) .brand-img{background:#f4f6f8;padding:5px 12px;border-radius:10px}
.menu-btn{display:none;appearance:none;border:1px solid var(--panel-brd);background:var(--panel);border-radius:8px;cursor:pointer;width:38px;height:34px;flex:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;margin-left:auto}
.menu-btn span{display:block;width:16px;height:2px;background:var(--ink);border-radius:1px}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:30px;list-style:none}
.main-nav a{font-size:13px;color:var(--ink-2);letter-spacing:.01em;text-decoration:none}
.main-nav a:hover{color:var(--ink)}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{color:var(--ink);border-bottom:1px solid var(--accent);padding-bottom:3px}

/* theme toggle */
.toggle{display:flex;align-items:center;gap:2px;margin-left:26px;padding:3px;border-radius:999px;
  background:var(--panel);border:1px solid var(--panel-brd);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.toggle button{appearance:none;border:0;background:transparent;cursor:pointer;display:flex;align-items:center;gap:6px;
  font-family:var(--font-body);font-size:11.5px;color:var(--ink-3);padding:5px 12px;border-radius:999px}
.toggle button.on{background:var(--ink);color:var(--bg);font-weight:600}
.toggle button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* hero */
.hero{display:grid;grid-template-columns:2fr 1fr;gap:60px;padding:80px 0 64px;border-bottom:1px solid var(--hair)}
.kicker{display:flex;align-items:center;gap:14px;margin-bottom:32px}
.kicker .tick{width:28px;height:1px;background:var(--accent)}
h1.display{font-family:var(--font-display);font-weight:480;font-size:84px;line-height:.98;letter-spacing:-.02em}
h1.display em{font-style:italic;color:var(--accent)}
.lede{margin-top:28px;font-size:17px;line-height:1.7;color:var(--ink-2);max-width:480px}
.hero-meta{margin-top:40px;display:flex;gap:34px;flex-wrap:wrap}
.hero-meta>div{border-left:1px solid var(--hair);padding-left:14px}
.hero-meta .mono{display:block;margin-bottom:5px}
.hero-meta b{font-size:13.5px;font-weight:500;color:var(--ink)}
.hero-side{align-self:end;padding-bottom:2px;display:flex;flex-direction:column;gap:16px}
.side-block{padding:18px 20px}
.side-block p{font-size:13px;line-height:1.65;color:var(--ink-2);margin-top:9px}
.side-block p b{color:var(--ink);font-weight:500}
.side-block a{color:var(--accent);text-decoration:none}

/* section headers */
.sec{display:flex;align-items:baseline;gap:20px;padding:56px 0 0}
.sec h2{font-family:var(--font-display);font-weight:500;font-size:30px;letter-spacing:-.01em}
.sec .rule{flex:1;height:1px;background:var(--hair);transform:translateY(-6px)}
.sec .mono a{color:var(--accent);text-decoration:none}

/* index list */
.index{margin-top:14px;display:flex;flex-direction:column;gap:10px;padding-bottom:8px}
.idx-row{display:grid;grid-template-columns:64px 1fr auto;gap:28px;align-items:baseline;padding:19px 24px;text-decoration:none}
.idx-row .n{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.idx-row h3{font-family:var(--font-display);font-weight:500;font-size:21px;line-height:1.32;letter-spacing:-.005em;max-width:640px}
.idx-row .r{text-align:right;white-space:nowrap}
.idx-row .r .mono{display:block;margin-bottom:6px}
.idx-row .r .d{font-size:12px;color:var(--ink-2)}
.idx-row:hover h3{color:var(--accent)}

/* series strip */
.series-strip{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:8px;padding-bottom:64px;border-bottom:1px solid var(--hair)}
.series-strip .intro{padding-top:26px}
.series-strip .intro p{margin-top:16px;font-size:15px;line-height:1.75;color:var(--ink-2);max-width:420px}
.s-steps{margin-top:18px;padding:8px 24px}
.s-step{display:flex;gap:18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hair)}
.s-step:last-child{border-bottom:none}
.s-step .n{font-family:var(--font-mono);font-size:11px;color:var(--accent);letter-spacing:.1em;width:52px;white-space:nowrap;flex:none}
.s-step h4{font-family:var(--font-display);font-weight:500;font-size:17px}
.s-step h4 a{text-decoration:none}
.s-step .st{margin-left:auto;font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase}

/* quote */
.mission{padding:80px 0;border-bottom:1px solid var(--hair)}
.mission blockquote{font-family:var(--font-display);font-weight:450;font-style:italic;font-size:38px;line-height:1.28;letter-spacing:-.01em;max-width:900px}
.mission blockquote i{font-style:italic;color:var(--accent)}
.mission .attr{margin-top:26px}

/* subscribe (decorative for now) */
.subscribe{margin:64px 0;padding:44px 48px;display:flex;align-items:center;gap:40px;border-radius:12px;
  background:linear-gradient(135deg, var(--panel), transparent 60%), radial-gradient(560px 220px at 88% 120%, var(--wash1), transparent 70%);
  backdrop-filter:blur(20px) saturate(140%);-webkit-backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--panel-brd);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 18px 44px rgba(10,10,14,.14);
}
.subscribe h2{font-family:var(--font-display);font-weight:500;font-size:26px;letter-spacing:-.01em}
.subscribe p{margin-top:8px;font-size:14px;line-height:1.65;color:var(--ink-2);max-width:380px}
.sub-form{margin-left:auto;display:flex;gap:0;border:1px solid var(--hair);border-radius:6px;overflow:hidden;background:var(--panel)}
.sub-form input{border:0;background:transparent;padding:14px 20px;font-size:13.5px;color:var(--ink);width:240px;font-family:var(--font-body)}
.sub-form input::placeholder{color:var(--ink-3)}
.sub-form input:focus{outline:none}
.sub-form button{border:0;cursor:pointer;padding:14px 22px;font-size:13px;font-weight:600;background:var(--accent);color:#fdf7ef;font-family:var(--font-body)}
.sub-note{display:none;margin-top:12px;font-size:12px;color:var(--accent)}
.sub-form.sent + .sub-note,.sub-note.show{display:block}

/* footer */
.site-footer{padding:54px 0 52px}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:44px;padding-bottom:36px}
.fgrid .brand-img img,.fgrid .custom-logo{max-height:34px}
.fgrid .wordmark{font-size:15px}
.ftag{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-3);max-width:30ch}
.fh{display:flex;align-items:center;gap:9px;margin:0 0 16px;font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.fh::before{content:"";width:3px;height:13px;border-radius:2px;background:var(--accent)}
.fh-gap{margin-top:28px}
.fjoin{display:flex;gap:10px;max-width:320px;margin:0}
.fjoin input[type=email]{flex:1;min-width:0;font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--hair);border-radius:10px;padding:10px 13px}
.fjoin input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.fjoin input[type=email]::placeholder{color:var(--ink-3)}
.fjoin button{font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--accent);border:0;border-radius:10px;padding:10px 18px;cursor:pointer}
.fjoin button:hover{filter:brightness(1.08)}
.fsoc{display:flex;gap:10px;flex-wrap:wrap}
.fsoc a{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-3);border:1px solid var(--hair);border-radius:10px}
.fsoc a:hover{color:var(--accent);border-color:var(--accent)}
.fsoc svg{width:17px;height:17px;fill:currentColor}
.fquick{display:flex;flex-direction:column;max-width:320px}
.fquick a{padding:10px 0;font-size:14px;color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--hair)}
.fquick a:hover{color:var(--accent)}
.fjoin-real .wpforms-container{margin:0}
.fjoin-real .wpforms-container .wpforms-field{padding:0;margin:0 0 10px}
.fjoin-real .wpforms-container input[type=email]{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--panel);border:1px solid var(--hair)!important;border-radius:10px;padding:10px 13px}
.fjoin-real .wpforms-container input[type=email]:focus{outline:2px solid var(--accent);outline-offset:1px}
.fjoin-real .wpforms-container .wpforms-submit,.fjoin-real .wpforms-container button[type=submit]{font:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff!important;background:var(--accent)!important;border:0;border-radius:10px;padding:11px 18px;cursor:pointer}
.fjoin-real .wpforms-container .wpforms-field-label{color:var(--ink-2)}
.frow{display:flex;align-items:center;gap:34px;padding-top:26px;border-top:1px solid var(--hair);flex-wrap:wrap}
.frow .mono{font-size:12px;color:var(--ink-3)}
.frow nav{margin-left:auto;display:flex;gap:26px}
.frow nav a{font-size:12.5px;color:var(--ink-3);text-decoration:none}
.frow nav a:hover{color:var(--ink)}
@media (max-width:860px){.fgrid{grid-template-columns:1fr;gap:34px}}

/* single post */
.post-head{padding:64px 0 0;max-width:1240px;margin:0 auto}
.crumb{margin-bottom:40px}
.crumb a{color:var(--accent);text-decoration:none}
.post-head h1{font-family:var(--font-display);font-weight:480;font-size:54px;line-height:1.08;letter-spacing:-.015em;max-width:820px}
.pmeta{display:flex;align-items:center;gap:16px;margin-top:32px;padding:16px 24px}
.pmeta .sq{width:34px;height:34px;background:var(--accent);color:#fdf7ef;display:grid;place-items:center;font-family:var(--font-mono);font-size:12px;font-weight:700;border-radius:6px}
.pmeta .who b{display:block;font-size:13.5px;font-weight:600}
.pmeta .who span{font-size:12px;color:var(--ink-3)}
.pmeta .m{margin-left:auto;display:flex;gap:26px;flex-wrap:wrap}

/* article body (classic editor / Gutenberg content) */
.entry-content{max-width:1040px;margin:0 auto;padding:60px 36px 0;font-family:var(--font-serif);font-size:19px;line-height:1.78;color:var(--ink-2);overflow-wrap:break-word}
.entry-content>*{max-width:100%}
.entry-content p{margin-bottom:26px}
.single-post .entry-content>p:first-of-type::first-letter{font-family:var(--font-display);font-size:62px;line-height:.85;float:left;padding:6px 12px 0 0;color:var(--accent)}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4{font-family:var(--font-display);font-weight:500;letter-spacing:-.01em;color:var(--ink);margin:44px 0 20px}
.entry-content h2{font-size:29px}
.entry-content h3{font-size:24px}
.entry-content h4{font-size:20px}
.entry-content a{color:var(--accent)}
.entry-content ul,.entry-content ol{margin:0 0 26px 24px}
.entry-content li{margin-bottom:8px}
.entry-content li::marker{color:var(--ink-3)}
.entry-content blockquote{margin:34px 0;padding:22px 26px;border-left:2px solid var(--accent);background:var(--panel);font-style:italic;border-radius:0 10px 10px 0}
.entry-content pre{margin:34px 0;border-radius:8px;overflow:auto;background:var(--code-bg);border:1px solid var(--panel-brd);padding:20px 22px;max-width:100%;overflow-x:auto}
.entry-content code,.entry-content pre{font-family:var(--font-mono);font-size:13px;line-height:1.9}
.entry-content :not(pre)>code{background:var(--panel);border:1px solid var(--panel-brd);border-radius:4px;padding:2px 7px;font-size:.85em}
.entry-content pre code{color:rgba(236,232,225,.85);background:none;border:0;padding:0}
.entry-content table{display:block;width:100%;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:34px 0;font-size:16px}
.entry-content th,.entry-content td{border:1px solid var(--hair);padding:10px 14px;text-align:left}
.entry-content th{font-family:var(--font-body);font-size:13px}
.entry-content img{border-radius:8px;max-width:100%;height:auto}
.entry-content iframe{max-width:100%}
.entry-content .wp-caption,.entry-content .wp-caption-text{font-size:13px;color:var(--ink-3);font-family:var(--font-body)}
.entry-content .wp-embed,.entry-content .wp-block-embed{margin:34px 0}
.entry-content iframe.wp-embedded-content{border-radius:10px}

/*
 * Readability guard: older posts carry colors baked in by previous themes
 * and plugin "kit" stylesheets (dark teal on dark bg in dark mode).
 * Content text always follows the active mode. Code blocks keep their own
 * styling. Elementor-built content is excluded (it uses .elementor-body,
 * not .entry-content).
 */
.entry-content,
.entry-content p,
.entry-content li,
.entry-content td,
.entry-content th,
.entry-content dt,
.entry-content dd,
.entry-content blockquote,
.entry-content figcaption,
.entry-content label,
.entry-content legend,
.entry-content div,
.entry-content span,
.entry-content font,
.entry-content strong,
.entry-content b,
.entry-content em,
.entry-content i,
.entry-content u,
.entry-content small,
.entry-content mark{color:var(--ink-2)!important}
.entry-content h1,.entry-content h2,.entry-content h3,
.entry-content h4,.entry-content h5,.entry-content h6,
.entry-content h1 span,.entry-content h2 span,.entry-content h3 span,
.entry-content h4 span,.entry-content h5 span,.entry-content h6 span,
.entry-content h1 strong,.entry-content h2 strong,.entry-content h3 strong,
.entry-content h4 strong,.entry-content h5 strong,.entry-content h6 strong{color:var(--ink)!important}
.entry-content strong,.entry-content b{color:var(--ink)!important;font-weight:600}
.entry-content a,.entry-content a span,.entry-content a strong,.entry-content a b,.entry-content a em{color:var(--accent)!important}
.entry-content pre,.entry-content pre *,.entry-content code,.entry-content pre code span{color:rgba(236,232,225,.85)!important;background-color:transparent}
html.light .entry-content pre,html.light .entry-content pre *,html.light .entry-content pre code span{color:rgba(243,240,233,.9)!important}
.entry-content :not(pre)>code{color:var(--ink)!important;background:var(--panel)}
/* Kill baked-in light backgrounds in dark mode; keep images and code chrome intact */
html:not(.light) .entry-content [style*="background"]{background-color:transparent!important;background-image:none!important}
html:not(.light) .entry-content pre[style*="background"],html:not(.light) .entry-content code[style*="background"]{background-color:var(--code-bg)!important}
html:not(.light) .entry-content table[style*="background"],html:not(.light) .entry-content th[style*="background"],html:not(.light) .entry-content td[style*="background"]{background-color:transparent!important}

/* Easy Table of Contents: match the active mode */
#ez-toc-container,.ez-toc-container-counter{
  background:var(--panel)!important;border:1px solid var(--panel-brd)!important;border-radius:10px!important;
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
  width:100%!important;max-width:100%!important;float:none!important;margin:0 auto 34px!important;padding:18px 22px!important;
}
#ez-toc-container .ez-toc-title{color:var(--ink)!important;font-family:var(--font-body)!important;font-weight:600!important;font-size:15px!important}
#ez-toc-container .ez-toc-title-toggle{margin-left:10px}
#ez-toc-container a,#ez-toc-container a:visited{color:var(--ink-2)!important}
#ez-toc-container a:hover{color:var(--accent)!important}
#ez-toc-container li::before{color:var(--accent)!important}
#ez-toc-container .ez-toc-list-level-1>li>a{font-weight:500}
.ez-toc-widget-container ul.ez-toc-list li a{color:var(--ink-2)!important}

/* Elementor-built pages/posts: full-width body, theme steps back */
.elementor-body{width:100%;padding:0;background:transparent}
.elementor-body .elementor-section-wrap,.elementor-body .elementor{max-width:100%}
.home .elementor-body p{margin-bottom:0}
/* The Post Grid cards (front page "Latest Posts"): fill row width, equal heights, aligned buttons */
.elementor-body .rt-tpg-container .rt-row{display:flex;flex-wrap:wrap;align-items:stretch}
.elementor-body .rt-tpg-container .rt-grid-item{display:flex}
.elementor-body .rt-tpg-container .rt-holder{display:flex;flex-direction:column;width:100%;height:100%}
.elementor-body .rt-tpg-container .rt-detail{display:flex;flex-direction:column;height:100%;width:100%}
.elementor-body .rt-tpg-container .tpg-el-excerpt{flex:1 0 auto}
.elementor-body .rt-tpg-container .rt-img-responsive{width:100%;height:auto}
.elementor-body .rt-tpg-container .entry-title a{text-decoration:none}


.endmark{display:flex;align-items:center;gap:16px;margin:52px auto 0;max-width:1040px;padding:0 36px}
.endmark .r{flex:1;height:1px;background:var(--hair)}
.endmark .sq2{width:8px;height:8px;background:var(--accent)}
.post-nav{max-width:1040px;margin:0 auto;padding:44px 36px 60px}
.post-nav a{display:block;padding:24px 28px;text-decoration:none}
.post-nav .mono{color:var(--accent);display:block;margin-bottom:12px}
.post-nav h3{font-family:var(--font-display);font-weight:500;font-size:28px;letter-spacing:-.01em}
.post-nav h3 i{font-style:italic;color:var(--ink-3);font-size:20px}
.author-band{max-width:1040px;margin:0 auto;padding:0 36px 64px}
.author-band .inner{padding:22px 26px;display:flex;gap:18px;align-items:flex-start}
.author-band .sq{width:44px;height:44px;background:var(--accent);color:#fdf7ef;display:grid;place-items:center;font-family:var(--font-mono);font-size:14px;font-weight:700;border-radius:6px}
.author-band b{font-size:14.5px}
.author-band p{font-size:13px;color:var(--ink-2);margin-top:4px;line-height:1.6;max-width:440px}
.author-band a.fl{margin-left:auto;font-size:12.5px;color:var(--accent);white-space:nowrap;text-decoration:none}

/* page (about/contact etc.) */
.page-head{padding:64px 0 0;max-width:1240px;margin:0 auto}
.page-head h1{font-family:var(--font-display);font-weight:480;font-size:64px;line-height:1.04;letter-spacing:-.02em}
.page-body{max-width:760px;margin:0 auto;padding:52px 36px 72px}

/* pagination */
.pagination{max-width:1240px;margin:24px auto 0;padding:0 36px 8px;display:flex;gap:14px;font-size:13px}
.pagination .page-numbers{color:var(--ink-2);text-decoration:none;border:1px solid var(--hair);border-radius:6px;padding:8px 14px}
.pagination .page-numbers.current{background:var(--ink);color:var(--bg);border-color:transparent}

/* comments */
.comments{max-width:1040px;margin:0 auto;padding:24px 36px 64px}
.comments h2,.comments h3{font-family:var(--font-display);font-weight:500;font-size:24px;margin-bottom:18px}
.comments ol{list-style:none}
.comment-body{padding:18px 22px;margin-bottom:12px}
.comment-meta{font-size:12px;color:var(--ink-3);margin-bottom:8px}
.comment-content{font-size:15px;line-height:1.7;color:var(--ink-2)}
.comment-respond label{display:block;font-size:12px;color:var(--ink-3);margin:14px 0 6px}
.comment-respond input[type=text],.comment-respond input[type=email],.comment-respond input[type=url],.comment-respond textarea{
  width:100%;background:var(--panel);border:1px solid var(--panel-brd);border-radius:6px;color:var(--ink);padding:10px 14px;font-family:var(--font-body);font-size:14px}
.comment-respond .submit{background:var(--accent);color:#fdf7ef;border:0;border-radius:6px;padding:12px 22px;font-weight:600;cursor:pointer;margin-top:14px}

/* search / archive / 404 */
.results-head{padding:64px 0 0;max-width:1240px;margin:0 auto}
.results-head h1{font-family:var(--font-display);font-weight:480;font-size:44px;letter-spacing:-.015em}
.search-form{display:flex;border:1px solid var(--hair);border-radius:6px;overflow:hidden;background:var(--panel);max-width:420px;margin-top:22px}
.search-form input{flex:1;border:0;background:transparent;padding:12px 16px;font-size:14px;color:var(--ink);font-family:var(--font-body)}
.search-form input:focus{outline:none}
.search-form button{border:0;background:var(--accent);color:#fdf7ef;padding:12px 20px;font-weight:600;cursor:pointer}

@media(max-width:760px){
  .wrap{padding:0 20px}
  .hbar{padding:10px 16px;gap:12px;flex-wrap:wrap}
  .custom-logo,.brand-img img{max-height:30px}
  .menu-btn{display:flex;order:3}
  .brand{order:1}
  .toggle{order:2;margin-left:auto}
  .main-nav{order:4;display:none;flex-basis:100%;margin-left:0;width:100%;
    background:var(--panel);border:1px solid var(--panel-brd);border-radius:10px;margin-top:10px;
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
  body.ts365-menu-open .main-nav{display:block}
  .main-nav ul{flex-direction:column;gap:0;padding:8px}
  .main-nav li{border-bottom:1px solid var(--hair)}
  .main-nav li:last-child{border-bottom:none}
  .main-nav a{display:block;padding:13px 14px;font-size:14px}
  .main-nav .current-menu-item>a,.main-nav .current_page_item>a{border-bottom:none;border-left:2px solid var(--accent);padding-bottom:13px}
  .hero{grid-template-columns:1fr;gap:40px;padding:52px 0 48px}
  h1.display{font-size:50px}
  .sec h2{font-size:25px}
  .idx-row{grid-template-columns:34px 1fr;gap:14px;padding:16px 18px}
  .idx-row .r{display:none}
  .idx-row h3{font-size:18px}
  .series-strip{grid-template-columns:1fr;gap:22px}
  .mission{padding:52px 0}
  .mission blockquote{font-size:25px}
  .subscribe{flex-direction:column;align-items:flex-start;gap:22px;padding:30px 24px}
  .sub-form{margin-left:0;width:100%}
  .sub-form input{flex:1;width:auto}
  .post-head h1,.page-head h1{font-size:34px}
  .pmeta .m{display:none}
  .entry-content{padding:40px 20px 0;font-size:17.5px}
  .post-nav{padding:32px 20px 44px}
  .author-band{padding:0 20px 48px}
  .author-band a.fl{display:none}
  .frow nav{margin-left:0}
}
@media(max-width:420px){
  .toggle button{font-size:10px;padding:5px 9px}
  h1.display{font-size:42px}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* About page template */
.about-hero{display:grid;grid-template-columns:2fr 1fr;gap:60px;padding:72px 0 64px;border-bottom:1px solid var(--hair)}
.about-hero h1{font-family:var(--font-display);font-weight:480;font-size:72px;line-height:1.02;letter-spacing:-.02em;margin-top:30px}
.about-hero h1 em{font-style:italic;color:var(--accent)}
.about-hero .lede{margin-top:26px}
.author-card{padding:24px 26px;align-self:end}
.author-card .row1{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.author-card .sq{width:46px;height:46px;background:var(--accent);color:#fdf7ef;display:grid;place-items:center;font-family:var(--font-mono);font-size:15px;font-weight:700;border-radius:6px}
.author-card b{font-size:15px;display:block}
.author-card .role{font-size:12px;color:var(--ink-3)}
.author-card p{font-size:13px;line-height:1.65;color:var(--ink-2)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:56px 0;border-bottom:1px solid var(--hair)}
.two-col h2{font-family:var(--font-display);font-weight:500;font-size:27px;letter-spacing:-.01em;margin-bottom:16px}
.two-col p{font-size:15px;line-height:1.8;color:var(--ink-2);margin-bottom:14px}
.two-col p b{color:var(--ink);font-weight:500}
.topics-close{padding:56px 0 64px}
.audience{display:flex;flex-wrap:wrap;gap:0;margin-top:20px;border-top:1px solid var(--hair)}
.audience div{padding:16px 24px 16px 0;margin-right:24px;padding-right:24px;border-right:1px solid var(--hair)}
.audience div:last-child{border-right:none}
.audience .mono{display:block;margin-bottom:6px;color:var(--accent)}
.audience b{font-size:14px;font-weight:500}
@media(max-width:760px){
  .about-hero{grid-template-columns:1fr;gap:40px;padding:48px 0}
  .about-hero h1{font-size:44px}
  .two-col{grid-template-columns:1fr;gap:36px}
  .audience div{width:50%;border-right:none;padding-right:0}
}

/* Contact page template */
.contact-hero{padding:72px 0 64px;border-bottom:1px solid var(--hair)}
.contact-hero h1{font-family:var(--font-display);font-weight:480;font-size:72px;line-height:1.02;letter-spacing:-.02em;margin-top:30px}
.contact-hero h1 em{font-style:italic;color:var(--accent)}
.channels{padding:56px 0 64px;border-bottom:1px solid var(--hair)}
.ch-row{display:grid;grid-template-columns:64px 1fr auto;gap:28px;align-items:center;padding:22px 26px;text-decoration:none}
.ch-row .n{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);letter-spacing:.1em}
.ch-row h3{font-family:var(--font-display);font-weight:500;font-size:21px;letter-spacing:-.005em;color:var(--ink)}
.ch-row .h{font-size:13px;color:var(--ink-2);margin-top:3px}
.ch-row .arrow{font-family:var(--font-display);font-size:22px;color:var(--accent)}
.ch-row:hover h3{color:var(--accent)}
.contact-meta{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:56px 0 64px}
.cmeta{padding:26px 30px}
.cmeta .mono{color:var(--accent);display:block;margin-bottom:12px}
.cmeta h3{font-family:var(--font-display);font-weight:500;font-size:20px;margin-bottom:8px}
.cmeta p{font-size:13.5px;line-height:1.65;color:var(--ink-2)}
@media(max-width:760px){
  .contact-hero{padding:48px 0}
  .contact-hero h1{font-size:44px}
  .contact-meta{grid-template-columns:1fr}
  .ch-row{grid-template-columns:30px 1fr auto;gap:14px;padding:18px}
}
.idx-row h3 span{color:var(--ink-3);font-size:15px;font-family:var(--font-body);letter-spacing:0;font-weight:400}

/*
 * Dark-mode adaptation for Elementor content.
 * Global colors flip to the dark palette, so anything built with
 * Elementor global colors adapts automatically. Known hard-coded light
 * surfaces (front page hero, post-grid cards) get dark panels.
 */
html:not(.light) body.elementor-kit-5,
html:not(.light) .elementor-kit-5{
  --e-global-color-primary:#ece8e1;
  --e-global-color-secondary:rgba(236,232,225,.82);
  --e-global-color-text:rgba(236,232,225,.72);
  --e-global-color-accent:#e8853d;
  --e-global-color-2586d50:#23262e;
  --e-global-color-bf28ce5:#23262e;
  --e-global-color-b22737b:rgba(236,232,225,.55);
}
html:not(.light) .elementor-body .rt-tpg-container .rt-holder,
html:not(.light) .elementor-body .rt-tpg-container .tpg-post-holder{
  background:var(--panel)!important;border:1px solid var(--panel-brd)!important;
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
}
html:not(.light) .elementor-body .rt-tpg-container .rt-detail{background:transparent!important}
html:not(.light) .elementor-body .rt-tpg-container .read-more a,
html:not(.light) .elementor-body .rt-tpg-container .readmore a{color:var(--accent)!important}
/* Front page hero: hard-coded white gradient and dark heading -> dark glass panel */
html:not(.light) .elementor-body .e-3964ab8{
  background-image:none!important;background-color:var(--panel)!important;
  border:1px solid var(--panel-brd)!important;border-radius:14px;
  backdrop-filter:blur(16px) saturate(130%);-webkit-backdrop-filter:blur(16px) saturate(130%);
}
html:not(.light) .elementor-body .e-9a3e27e-98cb0c7{color:var(--ink)!important}
html:not(.light) .elementor-body .e-f7cb141 p,
html:not(.light) .elementor-body .e-b6c73d6,
html:not(.light) .elementor-body .e-b6c73d6 p,
html:not(.light) .elementor-body .elementor-element-b6c73d6,
html:not(.light) .elementor-body .elementor-element-b6c73d6 p{color:var(--ink-2)!important}

/* Front page hero on phones: stack image and text, keep body copy legible */
@media(max-width:760px){
  .elementor-body .e-3964ab8{flex-direction:column!important;align-items:stretch!important;gap:14px}
  .elementor-body .elementor-element-776117b,.elementor-body .e-f7cb141{width:100%!important;max-width:100%!important}
  .elementor-body .elementor-element-776117b img,.elementor-body .elementor-element-9978d43 img{width:100%!important;max-width:100%!important;height:auto!important}
  .elementor-body .elementor-element-9978d43{max-width:100%!important;width:100%!important}
  .elementor-body .e-b6c73d6,.elementor-body .elementor-element-b6c73d6,.elementor-body .elementor-element-b6c73d6 p{font-size:13.5px!important;line-height:1.55!important;letter-spacing:0!important;word-spacing:0!important}
  .elementor-body .e-9a3e27e-98cb0c7{font-size:28px!important;line-height:1.25!important}
}


/* ---- v1.1.4 ---- */

/* WP accessibility utility (the_posts_pagination prints a visible label without it) */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;word-wrap:normal!important}

/* Sticky header must sit below the WP admin bar when logged in */
body.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){body.admin-bar .site-header{top:46px}}

/* Elementor-built single posts render through .entry-content (see single.php):
   keep Elementor's own containers fluid inside the reading column */
.elementor-single .elementor-section-wrap,.elementor-single .elementor{max-width:100%}
.elementor-single .e-con,.elementor-single .elementor-section{max-width:100%!important}

/* Elementor-built static pages (About / Contact) get the reading column via .page-body.entry-content */
.elementor-page{padding-top:52px}
.elementor-page .e-con,.elementor-page .elementor-section{max-width:100%!important}
.elementor-page a{overflow-wrap:anywhere}

/* In-post copy-to-clipboard boxes (inline <style> in post content bakes white chrome) */
html:not(.light) .copy-container{background:var(--panel)!important;border-color:var(--panel-brd)!important}
html:not(.light) .copy-container .copy-text{color:var(--ink)!important}
html:not(.light) .copy-container .copy-button svg{fill:var(--ink-2)!important}
html:not(.light) .copy-container button.copy-button:hover,html:not(.light) .copy-container button.copy-button:focus{background-color:var(--hover,rgba(255,255,255,.08))!important}
.copy-container .copy-text{font-family:var(--font-mono)!important;font-size:13px}

/* WPForms inside page content (Contact) */
.entry-content .wpforms-container{margin:26px 0}
.entry-content .wpforms-container .wpforms-field-label{font-family:var(--font-body);color:var(--ink)!important;font-weight:600}
.entry-content .wpforms-container input[type=text],.entry-content .wpforms-container input[type=email],
.entry-content .wpforms-container input[type=url],.entry-content .wpforms-container textarea,
.entry-content .wpforms-container select{background:var(--panel);border:1px solid var(--panel-brd);color:var(--ink);border-radius:8px;padding:12px 14px;font-family:var(--font-body);font-size:15px;max-width:100%}
.entry-content .wpforms-container input:focus,.entry-content .wpforms-container textarea:focus{border-color:var(--accent);outline:none}
.entry-content .wpforms-container .wpforms-submit, .entry-content .wpforms-container button[type=submit]{background:var(--accent)!important;color:#fff!important;border:0;border-radius:8px;padding:12px 28px;font-family:var(--font-body);font-weight:600;font-size:15px;cursor:pointer}
.entry-content .wpforms-container .wpforms-submit:hover{opacity:.9}

/* Light mode: post content pre blocks carry inline light-gray backgrounds - keep the terminal look */
html.light .entry-content pre[style*="background"]{background-color:var(--code-bg)!important}

/* v1.1.5: About/Contact pages use the wide article column like posts */
.page-body.elementor-page{max-width:1040px}

/* v1.1.5: Homepage hero - terminal card replaces the blob-shaped photo (Option B, user-picked).
   Pure CSS: the Elementor image widget stays editable, the terminal is drawn with ::before/::after. */
.home .e-3964ab8{background:radial-gradient(640px 320px at 85% 15%, var(--wash1), transparent 70%)}
.home .elementor-element-9978d43{width:min(540px,100%)!important;max-width:100%!important}
.home .elementor-element-9978d43 img{display:none!important}
.home .elementor-element-9978d43::before{content:"";display:block;height:34px;border-radius:14px 14px 0 0;background:var(--panel);border:1px solid var(--panel-brd);border-bottom:0;background-image:radial-gradient(circle at 20px 17px, #e8853d 5px, transparent 5.6px),radial-gradient(circle at 40px 17px, rgba(236,232,225,.35) 5px, transparent 5.6px),radial-gradient(circle at 60px 17px, rgba(236,232,225,.18) 5px, transparent 5.6px)}
.home .elementor-element-9978d43::after{content:"$ sqlplus / as sysdba\A\A SQL> alter session set container=DEMO;\A Session altered.\A\A SQL> show con_name\A CON_NAME = DEMO";white-space:pre;display:block;text-align:left;padding:16px 20px 20px;font-family:var(--font-mono);font-size:13px;line-height:1.95;color:rgba(236,232,225,.85);background:var(--code-bg);border:1px solid var(--panel-brd);border-top:0;border-radius:0 0 14px 14px}
.home .e-9a3e27e-98cb0c7::after{content:"";display:block;width:72px;height:3px;border-radius:2px;background:var(--accent);margin-top:20px}
@media (max-width:720px){.home .elementor-element-9978d43::after{font-size:11.5px}}

/* v1.1.5: About page body text spans the full wide column (Elementor widget default was 70.636%) */
.page-body.elementor-page .elementor-element-eac917c{width:100%!important;max-width:100%!important}

/* v1.1.6: mobile hero polish for 360-414px - tight terminal card, left-aligned paragraph (Elementor forces justify) */
@media (max-width:767px){
  .home .elementor-body .elementor-element-9978d43{margin:0 0 16px!important;padding:0!important;width:100%!important;max-width:100%!important}
  .home .elementor-element-9978d43::before{height:28px;background-image:radial-gradient(circle at 18px 14px, #e8853d 4.5px, transparent 5px),radial-gradient(circle at 35px 14px, rgba(236,232,225,.35) 4.5px, transparent 5px),radial-gradient(circle at 52px 14px, rgba(236,232,225,.18) 4.5px, transparent 5px)}
  .home .elementor-element-9978d43::after{font-size:11px;line-height:1.8;padding:12px 14px 14px}
  .home .elementor-body .e-9a3e27e-98cb0c7{font-size:26px!important;line-height:1.22!important}
  .home .e-9a3e27e-98cb0c7::after{margin-top:14px;width:56px}
  .home .elementor-body .e-b6c73d6,.home .elementor-body .elementor-element-b6c73d6,.home .elementor-body .elementor-element-b6c73d6 p{text-align:left!important;font-size:13.5px!important;line-height:1.6!important;letter-spacing:0!important}
}

/* v1.1.7: classic static pages (Privacy) match the About/Contact layout - no theme title band,
   the content's own heading leads the same wide column. Design only; content untouched. */
.page-head{display:none}
.page-body{max-width:1040px}
.page-body:not(.elementor-page) > h1.wp-block-heading:first-child{margin-top:0}
@media (max-width:760px){.page-body:not(.elementor-page){padding-left:20px;padding-right:20px}}

/* v1.1.7b: classic-page content title matches the About/Contact title treatment (sans, bold, same scale) */
.page-body:not(.elementor-page) > h1.wp-block-heading:first-child{font-family:var(--font-body);font-weight:700;font-size:34px;letter-spacing:-0.01em;line-height:1.2}
@media (max-width:760px){.page-body:not(.elementor-page) > h1.wp-block-heading:first-child{font-size:28px}}

/* v1.1.8: defend page shell against unscoped element selectors embedded in post HTML snippets
   (some posts carry <style> blocks with bare body{max-width:1100px;margin:2rem auto;color:#1a1a1a}) */
body{max-width:none!important;margin:0!important;padding:0!important;color:var(--ink)!important}
.post-head h1,.page-head h1,.results-head h1{color:var(--ink)}

/* v1.1.8: 'Copy Code' shortcode buttons carry inline light-gray styles with no text color -> unreadable in dark */
html:not(.light) .entry-content button[onclick*="clipboard"]{
  background:var(--panel)!important;border:1px solid var(--panel-brd)!important;color:var(--ink)!important;
}
html:not(.light) .entry-content button[onclick*="clipboard"]:hover{border-color:var(--accent)!important;color:var(--accent)!important}

/* v1.1.9: Option A - cover cards (uniform 16:9 crop, terminal fallback) + post featured banner + Read More pill */
.rt-tpg-container .rt-img-holder img{width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;display:block}
.rt-tpg-container .rt-grid-item:not(.has-post-thumbnail) .rt-detail::before{
  content:'$>_';display:flex;align-items:flex-end;box-sizing:border-box;aspect-ratio:16/9;padding:14px 16px;
  font-family:var(--font-mono);font-size:22px;letter-spacing:0;text-transform:none;color:var(--accent);
  background:linear-gradient(135deg,var(--panel) 0%,var(--code-bg) 100%);border-bottom:1px solid var(--hair);
}
.rt-tpg-container .read-more a{border:1px solid var(--accent)!important;color:var(--accent)!important;background:transparent!important;padding:7px 18px!important;border-radius:999px;font-weight:600;display:inline-block}
.rt-tpg-container .read-more a:hover{background:var(--accent)!important;color:#fff!important}
.post-feat{margin-top:30px;border-radius:14px;overflow:hidden;border:1px solid var(--hair)}
.post-feat img{width:100%;aspect-ratio:21/9;object-fit:cover;display:block}

/* ---- v1.1.13 ---- */

/* Read More pill hover/focus: the dark-mode color rule above
   (html:not(.light) .elementor-body ... .read-more a{color:var(--accent)}) outspecifies the
   hover rule, so the fill went accent-on-accent and the label vanished in dark mode.
   The hover/focus fill now wins in both modes with a readable white label, and the
   .readmore variant gets the same pill treatment. */
.rt-tpg-container .readmore a{border:1px solid var(--accent)!important;color:var(--accent)!important;background:transparent!important;padding:7px 18px!important;border-radius:999px;font-weight:600;display:inline-block}
.rt-tpg-container .read-more a:hover,.rt-tpg-container .read-more a:focus,
.rt-tpg-container .readmore a:hover,.rt-tpg-container .readmore a:focus{background:var(--accent)!important;color:#fff!important}
.rt-tpg-container .read-more a:focus-visible,.rt-tpg-container .readmore a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
html:not(.light) .elementor-body .rt-tpg-container .read-more a:hover,
html:not(.light) .elementor-body .rt-tpg-container .read-more a:focus,
html:not(.light) .elementor-body .rt-tpg-container .readmore a:hover,
html:not(.light) .elementor-body .rt-tpg-container .readmore a:focus{color:#fff!important}

/* ---- v1.1.13: homepage hero (Elementor first section) centered group with tighter side space ---- */
.elementor-body>.elementor>.e-con:first-child{padding-left:max(32px,calc((100% - 1400px)/2 + 32px))!important;padding-right:max(32px,calc((100% - 1400px)/2 + 32px))!important;box-sizing:border-box}
@media (min-width:768px){
.elementor-body>.elementor>.e-con:first-child{justify-content:space-between;gap:48px}
.elementor-body>.elementor>.e-con:first-child>.elementor-element-776117b{flex:1 1 52%;max-width:none}
.elementor-body>.elementor>.e-con:first-child>.elementor-element-eb1b702{flex:1 1 44%;max-width:none;width:auto}
.elementor-body>.elementor>.e-con:first-child>.elementor-element-eb1b702 .elementor-widget-image,.elementor-body>.elementor>.e-con:first-child>.elementor-element-eb1b702 img{width:100%;max-width:100%}
}
@media (max-width:600px){.elementor-body>.elementor>.e-con:first-child{padding-left:18px!important;padding-right:18px!important}}
@media (min-width:768px){.elementor-body>.elementor>.e-con:first-child>.elementor-element-eb1b702{justify-content:flex-end;align-items:flex-end}.elementor-body>.elementor>.e-con:first-child>.elementor-element-eb1b702 .elementor-widget-image{width:auto}}

/* ---- v1.1.14 ----
 * Older posts (AVDF Part 2) embed their own "table kit" <style> blocks
 * with class-based colors (white table, navy #0d3472 header, light zebra)
 * that broke in both modes. These !important rules re-skin those tables
 * with theme tokens: glass wrapper, subtle header wash, hairline borders,
 * muted sub-text, accent-bordered notes, translucent Yes/No badges.
 */
.entry-content .table-wrapper{margin:34px 0;background:var(--panel)!important;border:1px solid var(--panel-brd)!important;box-shadow:none!important;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%)}
.entry-content .table-wrapper table{margin:0!important}
.entry-content table{background:transparent!important;box-shadow:none!important}
.entry-content thead tr{background:var(--wash2)!important}
.entry-content thead th{color:var(--ink)!important;border-bottom:2px solid var(--hair)!important}
.entry-content tbody tr:nth-child(even){background:transparent!important}
.entry-content tbody tr:hover{background:var(--wash1)!important}
.entry-content tbody td{border-bottom:1px solid var(--hair)!important;color:var(--ink-2)!important}
.entry-content td.component,.entry-content td.db-name,.entry-content td.gg-version{color:var(--ink)!important}
.entry-content .spec-rec,.entry-content td.db-sub{color:var(--ink-3)!important}
.entry-content .na{color:var(--ink-3)!important}
.entry-content .nic-list,.entry-content .versions-list{margin:0!important;padding:0!important}
.entry-content .nic-list li,.entry-content .versions-list li{border-bottom-color:var(--hair)!important}
.entry-content .note{background:var(--wash1)!important;color:var(--ink-2)!important;border-left-color:var(--accent)!important}
.entry-content .badge-yes{background:rgba(38,150,84,.16)!important;color:#1f7a45!important}
.entry-content .badge-no{background:rgba(210,70,70,.14)!important;color:#b03a3a!important}
html:not(.light) .entry-content .badge-yes{color:#4fd389!important}
html:not(.light) .entry-content .badge-no{color:#ff8a8a!important}

/* footer quick-link icons + back-to-top (v1.1.15) */
.fquick a{display:flex;align-items:center;gap:11px}
.fquick a svg{width:15px;height:15px;flex:none;color:var(--ink-3);transition:color .2s ease}
.fquick a:hover svg{color:var(--accent)}
.to-top{position:fixed;right:26px;bottom:26px;z-index:60;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);background:var(--panel);border:1px solid var(--panel-brd);border-radius:12px;backdrop-filter:blur(14px) saturate(130%);-webkit-backdrop-filter:blur(14px) saturate(130%);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 22px rgba(10,10,14,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease,transform .25s ease,visibility .25s ease,color .2s ease,border-color .2s ease;cursor:pointer}
html.light .to-top{box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 20px rgba(60,50,35,.10)}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{color:var(--accent);border-color:var(--accent)}
.to-top svg{width:18px;height:18px}
@media (max-width:640px){.to-top{right:16px;bottom:16px;width:40px;height:40px}}