/* ==========================================================
   DOCU VICE 0.4 — documentation milestone
   ========================================================== */
@import url("aether.css");
@import url("character.css");
:root{
	--dv-bg:#080b22;
	--dv-bg-2:#101637;
	--dv-surface:rgba(15,24,57,.78);
	--dv-surface-strong:rgba(9,15,39,.94);
	--dv-cyan:#00f0ff;
	--dv-pink:#ff5ca8;
	--dv-purple:#bc6cff;
	--dv-peach:#ffb86b;
	--dv-text:#edfaff;
	--dv-muted:#a9b9d6;
	--dv-border:rgba(0,240,255,.18);
	--dv-radius:18px;
	--dv-shadow:0 18px 60px rgba(0,0,0,.35),0 0 30px rgba(0,240,255,.08);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--dv-bg)}
body.docu-vice{
	background:
		radial-gradient(circle at 8% 8%,rgba(0,240,255,.12),transparent 26%),
		radial-gradient(circle at 92% 10%,rgba(188,108,255,.14),transparent 28%),
		radial-gradient(circle at 55% 100%,rgba(255,92,168,.12),transparent 34%),
		linear-gradient(145deg,var(--dv-bg),var(--dv-bg-2) 55%,#170b2c)!important;
	color:var(--dv-text)!important;
	min-height:100vh
}
body.docu-vice:before{
	content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.14;
	background-image:linear-gradient(rgba(0,240,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(0,240,255,.16) 1px,transparent 1px);
	background-size:72px 72px
}
body.docu-vice a{color:var(--dv-cyan);transition:color .2s ease,transform .2s ease,text-shadow .2s ease}
body.docu-vice a:hover{color:var(--dv-pink)}
.dv-progress{position:fixed;left:0;right:0;top:0;height:3px;z-index:9999;background:rgba(255,255,255,.03)}
.dv-progress span{display:block;width:100%;height:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--dv-cyan),var(--dv-purple),var(--dv-pink));box-shadow:0 0 12px var(--dv-cyan)}
.dv-header{position:relative;z-index:20;background:rgba(7,12,33,.82)!important;border-bottom:1px solid var(--dv-border);backdrop-filter:blur(18px);box-shadow:0 8px 30px rgba(0,0,0,.28)}
.dv-header__inner{display:flex!important;align-items:center;justify-content:space-between;gap:25px;padding-top:14px!important;padding-bottom:14px!important}
.dv-brand{display:flex!important;align-items:center;gap:11px;text-decoration:none!important}
.dv-brand__mark{display:grid;place-items:center;width:34px;height:34px;color:var(--dv-cyan);border:1px solid rgba(0,240,255,.38);transform:rotate(45deg);box-shadow:0 0 18px rgba(0,240,255,.18)}
.dv-brand__mark::first-letter{transform:rotate(-45deg)}
.dv-brand__name{color:#fff;font-weight:800;letter-spacing:.08em}
.dv-brand__logo img{max-height:56px;width:auto}
.dv-header__tools{display:flex;align-items:center;gap:12px}
.dv-header-search form{display:flex}
.dv-header-search input[type=search],.dv-header-search input[type=text]{width:260px}
.dv-menu-toggle{display:none;width:44px;height:40px;padding:8px!important;background:transparent!important;border:1px solid var(--dv-border)!important}
.dv-menu-toggle span:not(.screen-reader-text){display:block;height:2px;background:var(--dv-cyan);margin:5px 0;box-shadow:0 0 8px rgba(0,240,255,.35)}
.dv-navbar{position:relative;z-index:19;background:rgba(9,14,37,.76)!important;border-bottom:1px solid rgba(255,255,255,.06)!important}
.dv-navbar .nav-menu>li>a{color:var(--dv-text)!important;letter-spacing:.05em}
.dv-navbar .nav-menu>li.current-menu-item>a,.dv-navbar .nav-menu>li>a:hover{color:var(--dv-cyan)!important;text-shadow:0 0 12px rgba(0,240,255,.55)}
.dv-main{position:relative;z-index:2;background:transparent!important}
.dv-shell{position:relative}
input[type=search],input[type=text],input[type=email],input[type=url],textarea{
	background:rgba(4,9,27,.75)!important;color:#fff!important;border:1px solid rgba(0,240,255,.22)!important;border-radius:11px!important
}
input:focus,textarea:focus{outline:none!important;border-color:var(--dv-pink)!important;box-shadow:0 0 0 3px rgba(255,92,168,.08),0 0 22px rgba(255,92,168,.1)!important}
button,input[type=submit],.button{
	background:linear-gradient(135deg,var(--dv-cyan),#4d8dff)!important;color:#071026!important;border:0!important;border-radius:9px!important;font-weight:800!important;letter-spacing:.05em;transition:.22s!important
}
button:hover,input[type=submit]:hover,.button:hover{background:linear-gradient(135deg,var(--dv-pink),var(--dv-purple))!important;color:#fff!important;transform:translateY(-2px)}
/* Home */
.dv-home{width:min(1180px,92%);margin:0 auto;padding:78px 0 70px}
.dv-hero{text-align:center;padding:35px 0 55px}
.dv-kicker,.dv-doc__eyebrow,.dv-sidebar__label,.dv-toc__title{font:700 11px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.22em;color:var(--dv-cyan)}
.dv-hero h1{margin:14px 0 10px;font-size:clamp(40px,6vw,72px);color:#fff;text-shadow:0 0 30px rgba(0,240,255,.18)}
.dv-hero p{max-width:700px;margin:0 auto 28px;color:var(--dv-muted);font-size:17px}
.dv-search{width:min(760px,100%);margin:auto;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 18px;background:var(--dv-surface);border:1px solid rgba(0,240,255,.26);border-radius:16px;box-shadow:var(--dv-shadow);backdrop-filter:blur(18px)}
.dv-search__icon{font-size:26px;color:var(--dv-cyan)}.dv-search input{flex:1;background:transparent!important;border:0!important;box-shadow:none!important}.dv-search button{padding:13px 18px}
.dv-portal{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dv-card{position:relative;min-height:210px;padding:28px;text-decoration:none!important;background:linear-gradient(145deg,rgba(20,31,70,.8),rgba(11,17,44,.76));border:1px solid var(--dv-border);border-radius:var(--dv-radius);box-shadow:var(--dv-shadow);overflow:hidden;backdrop-filter:blur(14px)}
.dv-card:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(0,240,255,.08),transparent 70%);transform:translateX(-110%);transition:.55s}
.dv-card:hover{transform:translateY(-5px);border-color:rgba(0,240,255,.56);box-shadow:0 22px 60px rgba(0,0,0,.4),0 0 28px rgba(0,240,255,.14)}.dv-card:hover:before{transform:translateX(110%)}
.dv-card__mark{display:block;color:var(--dv-cyan);font:700 12px ui-monospace,monospace;letter-spacing:.15em}
.dv-card__title{display:block;margin:27px 0 8px;font-size:20px;font-weight:800;color:#fff}
.dv-card__text{display:block;color:var(--dv-muted);font-size:14px;line-height:1.65}
.dv-card__link{position:absolute;bottom:24px;right:25px;color:var(--dv-pink);font:700 11px ui-monospace,monospace;letter-spacing:.12em}
.dv-updates{margin-top:70px;padding:30px;background:rgba(11,17,43,.66);border:1px solid rgba(188,108,255,.18);border-radius:20px;backdrop-filter:blur(16px)}
.dv-section-head{display:flex;align-items:center;gap:15px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:18px}.dv-section-head span{color:var(--dv-pink);font:700 11px ui-monospace,monospace}.dv-section-head h2{margin:0;color:#fff;font-size:22px}
.dv-update{display:grid;grid-template-columns:145px 1fr;gap:25px;padding:22px 0;border-bottom:1px solid rgba(255,255,255,.06)}.dv-update:last-child{border-bottom:0}.dv-update__meta{color:var(--dv-muted);font:11px ui-monospace,monospace}.dv-dot{display:inline-block;width:7px;height:7px;margin-right:9px;border-radius:50%;background:var(--dv-cyan);box-shadow:0 0 10px var(--dv-cyan)}.dv-update h3{margin:0 0 5px;font-size:17px}.dv-update h3 a{color:#fff}.dv-update p{margin:0;color:var(--dv-muted);font-size:13px}
/* Documentation */
.dv-sidebar{background:transparent!important}
.dv-sidebar__inner{position:sticky;top:24px;margin:24px 12px 24px 0;padding:22px!important;background:rgba(10,17,43,.78);border:1px solid var(--dv-border);border-radius:16px;box-shadow:var(--dv-shadow);backdrop-filter:blur(16px)}
.dv-sidebar__label{margin-bottom:20px;color:var(--dv-purple)}
.dv-sidebar .widget{margin-bottom:25px!important;background:transparent!important;border:0!important}
.dv-sidebar .widget-title{color:#fff!important;font-size:15px!important;border-bottom:1px solid rgba(255,255,255,.08)!important;padding-bottom:10px!important}
.dv-sidebar li{border-bottom:1px solid rgba(255,255,255,.04)!important}
.dv-sidebar li a{display:block;padding:9px 7px!important;color:var(--dv-muted)!important}.dv-sidebar li a:hover{color:var(--dv-cyan)!important;padding-left:11px!important}
.dv-content{background:transparent!important}
.dv-content__inner{padding:28px 0 65px!important}
.dv-doc-layout{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px}
.dv-doc{padding:38px 42px;background:rgba(11,18,44,.74);border:1px solid var(--dv-border);border-radius:20px;box-shadow:var(--dv-shadow);backdrop-filter:blur(14px)}
.dv-doc__header{margin-bottom:32px;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.08)}
.dv-doc__header .entry-title{margin:.35em 0 .2em!important;color:#fff!important;font-size:clamp(34px,5vw,52px)!important;line-height:1.08!important}
.dv-doc__meta,.dv-doc__meta a{color:var(--dv-muted)!important;font-size:12px!important}
.dv-doc__image img{width:100%;height:auto;border-radius:14px;border:1px solid var(--dv-border);box-shadow:0 15px 45px rgba(0,0,0,.3)}
.dv-doc__body{color:#dfeaf5!important;font-size:17px!important;line-height:1.8!important}
.dv-doc__body h2,.dv-doc__body h3,.dv-doc__body h4{scroll-margin-top:28px;color:#fff!important}
.dv-doc__body h2{margin-top:2.1em!important;padding-bottom:.35em;border-bottom:1px solid rgba(0,240,255,.13);font-size:30px!important}
.dv-doc__body h3{margin-top:1.7em!important;font-size:23px!important}
.dv-doc__body a{text-decoration-color:rgba(0,240,255,.38);text-underline-offset:3px}
.dv-doc__body blockquote{margin:28px 0!important;padding:18px 20px!important;background:rgba(188,108,255,.08)!important;border-left:3px solid var(--dv-purple)!important;border-radius:0 12px 12px 0;color:#e8dcff!important}
.dv-doc__body pre{position:relative;margin:28px 0!important;padding:52px 22px 22px!important;background:#070c1d!important;border:1px solid rgba(0,240,255,.18)!important;border-radius:14px!important;color:#d9faff!important;overflow:auto;box-shadow:inset 0 1px rgba(255,255,255,.03),0 12px 30px rgba(0,0,0,.22)}
.dv-doc__body pre:before{content:"CODE";position:absolute;left:18px;top:16px;color:var(--dv-purple);font:700 10px ui-monospace,monospace;letter-spacing:.18em}
.dv-doc__body code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(0,240,255,.08);color:#adf8ff;padding:.12em .38em;border-radius:5px}
.dv-doc__body pre code{background:transparent;padding:0;color:inherit}
.dv-copy-code{position:absolute;right:13px;top:11px!important;padding:7px 10px!important;font-size:10px!important;z-index:2}
.dv-doc__body table{width:100%!important;margin:28px 0!important;border-collapse:separate!important;border-spacing:0!important;overflow:hidden;border:1px solid var(--dv-border)!important;border-radius:13px;background:rgba(6,11,29,.55)}
.dv-doc__body th{background:rgba(0,240,255,.08)!important;color:#fff!important}.dv-doc__body th,.dv-doc__body td{padding:13px 15px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.06)!important}.dv-doc__body tr:last-child td{border-bottom:0!important}
.dv-doc__body img{max-width:100%;height:auto}
.dv-toc__panel{position:sticky;top:25px;padding:20px 18px;background:rgba(8,14,36,.78);border:1px solid rgba(188,108,255,.18);border-radius:15px;backdrop-filter:blur(15px)}
.dv-toc__title{color:var(--dv-pink);margin-bottom:15px}.dv-toc__links a{display:block;padding:6px 0;color:var(--dv-muted)!important;font-size:12px;line-height:1.4;text-decoration:none}.dv-toc__links a:hover,.dv-toc__links a.is-active{color:var(--dv-cyan)!important}.dv-toc__links a.dv-toc-h3{padding-left:12px;font-size:11px}.dv-toc__empty{color:#71809c;font-size:11px}
.dv-post-nav .navigation{margin:28px 0!important;padding:18px!important;background:rgba(10,17,43,.65);border:1px solid var(--dv-border);border-radius:14px}
.dv-footer{position:relative;z-index:3;background:rgba(6,10,28,.92)!important;border-top:1px solid rgba(0,240,255,.13)!important;color:var(--dv-muted)!important}
.dv-footer__inner{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-top:28px!important;padding-bottom:28px!important}.dv-footer__brand{display:flex;align-items:center;gap:13px;color:#fff;font-weight:700}.dv-footer__links{display:flex;gap:16px}
@media(max-width:1100px){.dv-doc-layout{grid-template-columns:1fr}.dv-toc{order:-1}.dv-toc__panel{position:relative;top:auto}.dv-toc__links{columns:2}.dv-toc__empty{column-span:all}}
@media(max-width:900px){.dv-portal{grid-template-columns:repeat(2,1fr)}.dv-home{padding-top:52px}.dv-menu-toggle{display:block}.dv-navbar .dv-nav{display:none}.dv-navbar.is-open .dv-nav{display:block}.dv-navbar .nav-menu li{float:none!important}.dv-header-search{display:none}.dv-sidebar{float:none!important;width:auto!important}.dv-sidebar__inner{position:relative;top:auto;margin-right:0}.dv-content{float:none!important;width:auto!important}}
@media(max-width:600px){.dv-home{width:90%;padding-top:34px}.dv-portal{grid-template-columns:1fr}.dv-update{grid-template-columns:1fr;gap:7px}.dv-doc{padding:26px 20px}.dv-doc__body{font-size:16px!important}.dv-toc__links{columns:1}.dv-footer__inner{flex-direction:column;text-align:center}.dv-search{gap:7px}.dv-search button{padding:11px}}


/* ==========================================================
   MILESTONE 5 — listings, comments, 404, components
   ========================================================== */
.dv-listing-head{margin:28px 0 26px;padding:30px 32px;background:rgba(10,17,43,.7);border:1px solid var(--dv-border);border-radius:18px;box-shadow:var(--dv-shadow)}
.dv-listing-head h1{margin:.3em 0 .15em!important;color:#fff!important;font-size:clamp(34px,5vw,50px)!important}
.dv-listing-head p,.dv-listing-description{color:var(--dv-muted);margin:0}
.dv-results{display:grid;gap:18px}
.dv-result-card{position:relative;padding:26px 28px;background:rgba(11,18,44,.74);border:1px solid var(--dv-border);border-radius:16px;box-shadow:0 14px 40px rgba(0,0,0,.24);transition:.22s}
.dv-result-card:hover{transform:translateY(-3px);border-color:rgba(0,240,255,.45)}
.dv-result-card__meta{color:var(--dv-purple);font:700 10px ui-monospace,monospace;letter-spacing:.14em}
.dv-result-card h2{margin:.55em 0 .35em!important;font-size:23px!important}.dv-result-card h2 a{color:#fff!important}
.dv-result-card p{color:var(--dv-muted);margin:0 0 22px}
.dv-result-card__link{font:700 10px ui-monospace,monospace;letter-spacing:.13em;color:var(--dv-pink)!important}
.dv-pagination{margin:28px 0}.dv-pagination .nav-links{display:flex;flex-wrap:wrap;gap:8px}
.dv-pagination .page-numbers{display:inline-grid;place-items:center;min-width:38px;height:38px;padding:0 10px;background:rgba(10,17,43,.75);border:1px solid var(--dv-border);border-radius:9px;text-decoration:none}
.dv-pagination .page-numbers.current,.dv-pagination .page-numbers:hover{background:linear-gradient(135deg,var(--dv-cyan),#4d8dff);color:#071026!important}
.dv-empty-state{padding:45px 35px;text-align:center;background:rgba(10,17,43,.7);border:1px dashed rgba(188,108,255,.35);border-radius:18px}
.dv-empty-state>span{color:var(--dv-pink);font:700 10px ui-monospace,monospace;letter-spacing:.18em}
.dv-empty-state h2{color:#fff!important}.dv-empty-state p{color:var(--dv-muted)}
.dv-error-page{width:min(900px,92%);margin:0 auto;padding:100px 0}
.dv-error-panel{text-align:center;padding:60px 35px;background:rgba(10,17,43,.74);border:1px solid var(--dv-border);border-radius:22px;box-shadow:var(--dv-shadow)}
.dv-error-code{font-size:clamp(90px,18vw,190px);font-weight:900;line-height:.8;color:transparent;-webkit-text-stroke:2px var(--dv-cyan);text-shadow:0 0 30px rgba(0,240,255,.22)}
.dv-error-panel h1{color:#fff!important;margin:.7em 0 .25em}.dv-error-panel p{color:var(--dv-muted);margin-bottom:28px}
.dv-error-actions{margin-top:26px}
.dv-comments{margin:30px 0;padding:28px;background:rgba(10,17,43,.7);border:1px solid rgba(188,108,255,.18);border-radius:18px}
.dv-comment-list{list-style:none;margin:0;padding:0}.dv-comment-list>li{margin:0 0 18px;padding:18px;background:rgba(6,11,29,.5);border:1px solid rgba(255,255,255,.06);border-radius:13px}
.dv-comment-list .comment-author{color:#fff}.dv-comment-list .comment-metadata a{color:var(--dv-muted)!important;font-size:11px}
.dv-comment-title{color:#fff!important}.dv-comment-form p{margin-bottom:14px}.dv-comment-form label{display:block;margin-bottom:6px;color:var(--dv-muted);font-size:12px}
.dv-comment-form input[type=text],.dv-comment-form input[type=email],.dv-comment-form input[type=url],.dv-comment-form textarea{width:100%}
.dv-callout{margin:20px 0;padding:18px 20px;border-radius:12px;background:rgba(10,17,43,.68);border-left:3px solid var(--dv-cyan);box-shadow:0 10px 30px rgba(0,0,0,.18)}
.dv-callout strong{display:block;margin-bottom:6px;color:#fff}.dv-callout p{margin:0;color:var(--dv-muted)}
.dv-callout--success{border-left-color:#6cffc1}.dv-callout--warning{border-left-color:var(--dv-peach)}
.dv-badge{display:inline-block;padding:4px 8px;border:1px solid rgba(0,240,255,.3);border-radius:999px;color:var(--dv-cyan);font:700 9px ui-monospace,monospace;letter-spacing:.14em;background:rgba(0,240,255,.06)}
.dv-badge--pink{color:var(--dv-pink);border-color:rgba(255,92,168,.35);background:rgba(255,92,168,.07)}.dv-badge--purple{color:var(--dv-purple);border-color:rgba(188,108,255,.35);background:rgba(188,108,255,.07)}
.dv-hex-button{display:inline-block;padding:13px 22px;background:linear-gradient(135deg,var(--dv-cyan),#4d8dff);color:#071026!important;text-decoration:none!important;font-weight:900;font-size:11px;letter-spacing:.12em;clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%,0 50%);box-shadow:0 0 22px rgba(0,240,255,.18);transition:.22s}
.dv-hex-button:hover{background:linear-gradient(135deg,var(--dv-pink),var(--dv-purple));color:#fff!important;transform:translateY(-2px)}
.dv-hex-button--secondary{background:rgba(10,17,43,.7);color:var(--dv-cyan)!important;border:1px solid rgba(0,240,255,.35)}
.dv-components-demo{width:min(1050px,92%);margin:0 auto;padding:40px 0 70px}.dv-component-section{margin:24px 0;padding:28px;background:rgba(10,17,43,.65);border:1px solid var(--dv-border);border-radius:18px}.dv-component-section h2{color:#fff!important;margin-top:0}
@media(max-width:600px){.dv-result-card{padding:22px 20px}.dv-comments{padding:20px}.dv-error-page{padding:55px 0}.dv-error-panel{padding:45px 22px}}


/* ==========================================================
   MILESTONE 6 — appearance controls, accessibility, polish
   ========================================================== */
.dv-skip-link{position:fixed;left:14px;top:10px;z-index:100000;transform:translateY(-150%);padding:10px 14px;background:#fff;color:#091026!important;border-radius:8px;font-weight:800;transition:.18s}
.dv-skip-link:focus{transform:translateY(0)}
:focus-visible{outline:2px solid var(--dv-pink)!important;outline-offset:3px!important}
body.dv-accent-pink{--dv-cyan:#ff5ca8;--dv-pink:#00f0ff}
body.dv-accent-purple{--dv-cyan:#bc6cff;--dv-pink:#ff5ca8}
body.dv-accent-peach{--dv-cyan:#ffb86b;--dv-pink:#ff5ca8}
body.dv-effects-reduced:before{opacity:.06}
body.dv-effects-reduced .dv-card,
body.dv-effects-reduced .dv-doc,
body.dv-effects-reduced .dv-sidebar__inner,
body.dv-effects-reduced .dv-toc__panel{backdrop-filter:none;box-shadow:0 12px 35px rgba(0,0,0,.18)}
body.dv-effects-off:before{display:none}
body.dv-effects-off .dv-card,
body.dv-effects-off .dv-doc,
body.dv-effects-off .dv-sidebar__inner,
body.dv-effects-off .dv-toc__panel,
body.dv-effects-off .dv-updates,
body.dv-effects-off .dv-listing-head{backdrop-filter:none;box-shadow:none}
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
	.dv-card:hover,.dv-result-card:hover,.dv-hex-button:hover,button:hover,input[type=submit]:hover,.button:hover{transform:none!important}
}
@media(max-width:900px){}

/* Milestone 7 — sample documentation content */
.dv-doc__body ol,.dv-doc__body ul{margin:1.2em 0 1.5em 1.4em}
.dv-doc__body li{margin:.45em 0}
.dv-doc__body .dv-hex-button{margin:.6em 0}

/* ==========================================================
   MILESTONE 8 — revised home portal + Codex
   Dark mode is the only site color mode.
   ========================================================== */
.dv-portal--four{
	grid-template-columns:repeat(2,minmax(0,1fr));
	max-width:980px;
	margin:0 auto;
}
.dv-portal--four .dv-card{min-height:230px}

.dv-codex{
	width:min(1180px,92%);
	margin:0 auto;
	padding:62px 0 80px
}
.dv-codex__hero{
	max-width:860px;
	margin:0 auto 42px;
	text-align:center;
	padding:30px
}
.dv-codex__hero h1{
	margin:.25em 0 .3em;
	color:#fff;
	font-size:clamp(46px,7vw,78px);
	text-shadow:0 0 32px rgba(0,240,255,.17)
}
.dv-codex__intro{
	color:var(--dv-muted);
	font-size:16px;
	line-height:1.75
}
.dv-codex__intro .dv-callout{text-align:left}

.dv-codex-grid{
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	gap:18px
}
.dv-codex-card{
	position:relative;
	display:block;
	min-height:235px;
	padding:28px;
	text-decoration:none!important;
	background:linear-gradient(145deg,rgba(20,31,70,.8),rgba(11,17,44,.76));
	border:1px solid var(--dv-border);
	border-radius:18px;
	box-shadow:var(--dv-shadow);
	overflow:hidden;
	transition:.24s
}
a.dv-codex-card:hover{
	transform:translateY(-5px);
	border-color:rgba(0,240,255,.55);
	box-shadow:0 20px 55px rgba(0,0,0,.4),0 0 28px rgba(0,240,255,.13)
}
.dv-codex-card__mark{
	color:var(--dv-purple);
	font:700 10px ui-monospace,monospace;
	letter-spacing:.16em
}
.dv-codex-card h2{
	margin:32px 0 10px!important;
	color:#fff!important;
	font-size:24px!important
}
.dv-codex-card p{
	color:var(--dv-muted);
	line-height:1.65;
	font-size:14px
}
.dv-codex-card__link{
	position:absolute;
	right:24px;
	bottom:22px;
	color:var(--dv-pink);
	font:700 10px ui-monospace,monospace;
	letter-spacing:.14em
}
.dv-codex-card--placeholder{
	border-style:dashed;
	opacity:.58
}
.dv-codex-card--placeholder:after{
	content:"";
	position:absolute;
	inset:0;
	background:repeating-linear-gradient(
		135deg,
		transparent 0 10px,
		rgba(255,255,255,.015) 10px 20px
	);
	pointer-events:none
}

.dv-art-placeholder-grid{
	display:grid;
	grid-template-columns:repeat(2,minmax(0,1fr));
	gap:15px;
	margin:24px 0
}
.dv-art-placeholder{
	display:grid;
	place-items:center;
	min-height:180px;
	border:1px dashed rgba(0,240,255,.25);
	border-radius:14px;
	background:linear-gradient(145deg,rgba(0,240,255,.04),rgba(188,108,255,.05));
	color:var(--dv-muted);
	font:700 11px ui-monospace,monospace;
	letter-spacing:.15em
}

@media(max-width:900px){
	.dv-codex-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
	.dv-portal--four,
	.dv-codex-grid,
	.dv-art-placeholder-grid{grid-template-columns:1fr}
}