/* VICOO is the base, not a decorative add-on.
   Source grammar: Yhazrin/VICOO apps/web/index.html and README.
   3px ink / 4px hard shadow / dotted canvas / friendly rounded controls.
   Yhazrin keeps its paper, Futura-first type and coral signal. */
:root{--vicoo-ink:var(--brand-ink);--vicoo-yellow:#ffd166;--vicoo-green:#0df259;--vicoo-blue:#62b6ed;--vicoo-lilac:#b6a0ed;--vicoo-line:3px;--vicoo-shadow:4px 4px 0 var(--ink);--sun:var(--vicoo-yellow)}
body{background-color:var(--paper);background-image:radial-gradient(#17181d14 .9px,transparent .9px);background-size:24px 24px}
.site-head{border-bottom:3px solid var(--ink);background:var(--card);padding-block:19px}
.wordmark{font-weight:800;font-size:27px;letter-spacing:-1.2px;gap:12px}
.wordmark__suffix{font-size:19px;font-weight:600;margin-left:10px;letter-spacing:-.7px}
.wordmark>.journal-bot{width:38px;height:43px;color:var(--ink)}
.head-nav{gap:12px;font-weight:600}
.head-nav a{padding:7px 15px;border:2px solid transparent;border-radius:11px}
.head-nav a:not(.nav-home)::after{display:none}
.head-nav a[aria-current]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.head-nav a:not([aria-current]):not(.nav-home):hover{background:var(--vicoo-yellow);border-color:var(--ink)}
.head-nav .nav-home{padding:8px 18px;border:3px solid var(--ink);border-radius:14px;box-shadow:3px 3px 0 var(--ink);margin-left:16px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.head-nav .nav-home:hover{background:var(--vicoo-yellow);color:var(--ink);transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.intro{padding:55px 0 64px;grid-template-columns:1.18fr 1fr;gap:6%}
.intro__from{font-size:13px;font-weight:600;gap:10px;margin-bottom:22px}
.live-dot{width:10px;height:10px;border:2px solid var(--ink);background:var(--vicoo-green)}
.intro h1{font-size:clamp(64px,6.7vw,99px);line-height:1.28;font-weight:800;letter-spacing:-5px}
.title-note{color:var(--coral);isolation:isolate}
.title-note::before{content:'';position:absolute;inset:6% -3% -1%;background:var(--vicoo-yellow);border:3px solid var(--ink);border-radius:14px;transform:rotate(-2deg);z-index:-1;box-shadow:4px 4px 0 var(--ink)}
.title-note svg{display:none}
.intro__lede{margin-top:29px;color:var(--ink);font-size:16px}
.intro__copy>.text-link{background:var(--card);border:3px solid var(--ink);border-radius:12px;padding:10px 18px;box-shadow:var(--vicoo-shadow);font-weight:600;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.intro__copy>.text-link:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink);text-decoration:none;background:var(--vicoo-yellow)}
.paper-stack{aspect-ratio:1.08;max-width:475px;margin-right:12px}
.paper-stack__back,.paper-stack__middle,.paper-stack__front{border:3px solid var(--ink);border-radius:22px;box-shadow:var(--vicoo-shadow)}
.paper-stack__back{background:var(--vicoo-blue);transform:rotate(-10deg);padding:12px 18px;font-weight:700}
.paper-stack__middle{background:var(--vicoo-yellow);transform:rotate(7deg);font-weight:700}
.paper-stack__front{padding:19px 29px 25px;transform:rotate(-3deg);background:var(--card)}
.paper-kicker{font-size:13px;font-weight:700;display:block;border-bottom:2px solid var(--ink);padding-bottom:10px}
.paper-drawing{height:47%;margin:13px 0 12px;display:grid;place-items:center}
.paper-drawing>.journal-bot{height:100%;width:auto;max-width:75%;overflow:visible}
.paper-hand{font-weight:700;font-size:25px;line-height:1.45;letter-spacing:-.8px}
.paper-lines{bottom:4%;right:1%}
.stack-caption{bottom:-16px;font-weight:500;background:var(--paper);padding-inline:8px}
.featured{border:3px solid var(--ink);border-radius:24px;background:var(--card);box-shadow:6px 6px 0 var(--ink);padding:25px;gap:40px;grid-template-columns:.92fr 1fr}
.featured__art{height:310px;border:3px solid var(--ink);border-radius:16px;background:var(--vicoo-yellow)}
.featured__art>.layer-pointer{padding:28px}
.featured__word{font-weight:800;font-size:clamp(60px,5.2vw,78px);letter-spacing:-4px;line-height:1.02}
.featured__symbol{width:49%;right:-10%;top:30%;color:var(--coral);filter:drop-shadow(3px 3px 0 var(--ink))}
.featured__symbol svg path{stroke:var(--ink);stroke-width:2px}
.featured__format{font-size:12px;font-weight:700;padding:5px 10px;background:var(--card);border:2px solid var(--ink);border-radius:8px;left:28px;bottom:20px}
.featured__copy{padding-right:15px}
.featured__copy h2{font-size:clamp(25px,2.4vw,35px);font-weight:700;line-height:1.45;letter-spacing:-1px}
.section-kicker{font-size:14px;font-weight:700}
.featured .section-kicker::before{content:'✦';display:grid;place-items:center;background:var(--vicoo-green);border:2px solid var(--ink);border-radius:7px;width:25px;height:25px;font-size:16px}
.featured .section-kicker{gap:10px}
.tag{border:2px solid var(--ink);border-radius:7px;font-size:11px;padding:3px 9px;background:var(--card);font-weight:600;transition:transform .2s var(--ease),background .2s}
.tag[href*='/ai/']{background:var(--vicoo-lilac)}
.tag[href*='%E5%89%8D%E7%AB%AF']{background:var(--vicoo-blue)}
.tag[href*='%E8%AE%BE%E8%AE%A1']{background:var(--vicoo-yellow)}
.tag:hover{background:var(--acid);transform:translateY(-2px)}
.pill-link{border:3px solid var(--ink);border-radius:12px;background:var(--coral);box-shadow:var(--vicoo-shadow);font-weight:600;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.pill-link:hover{background:var(--vicoo-yellow);color:var(--ink);transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.articles{padding-top:62px}
.section-head{margin-bottom:24px}
.section-head h2{font-weight:800;font-size:36px;letter-spacing:-1.4px}
.section-head .text-link{font-weight:600}
.filter-bar{border:3px solid var(--ink);border-radius:16px;padding:16px 19px;background:var(--vicoo-yellow);box-shadow:var(--vicoo-shadow)}
.filters{gap:5px}
.filters button{color:var(--ink);font-weight:600;padding:7px 13px;border-radius:9px;border:2px solid transparent}
.filters button[aria-pressed=true]{background:var(--ink);color:var(--card);border-color:var(--ink)}
.filters button:not([aria-pressed=true]):hover{background:var(--card);border-color:var(--ink)}
.search{border:2px solid var(--ink);border-radius:10px;padding:9px 12px;background:var(--card);width:260px}
.search input{font-size:13px}.search svg{stroke-width:2px;flex-shrink:0}
.sample-notice{border:0;margin:18px 0;padding:8px 0;color:var(--muted);background:transparent}
.article-list{display:flex;flex-direction:column;gap:18px;margin-top:21px}
.post-row{border:3px solid var(--ink);border-radius:20px;background:var(--card);box-shadow:var(--vicoo-shadow);padding:25px 27px;grid-template-columns:134px 1fr 42px;gap:25px}
.post-row__date{font-size:13px;font-weight:600}
.post-row__date span{font-size:11px;font-weight:400}
.post-row h3{font-weight:700;font-size:23px;letter-spacing:-.5px}
.post-row h3 a:hover{text-decoration-color:var(--ink)}
.post-row__tags{gap:8px;margin-bottom:10px}
.post-row .sample-label{border:0;font-size:10px;background:#17181d08;padding:3px 7px;border-radius:4px}
.row-arrow{width:40px;height:40px;font-size:24px;display:grid;place-items:center;border:2px solid var(--ink);border-radius:11px;background:var(--vicoo-yellow);line-height:1}
.row-arrow:hover{background:var(--vicoo-green);color:var(--ink);transform:translate(2px,-2px)}
.subscribe{background:var(--vicoo-yellow);border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);margin-top:65px;padding:40px 45px}
.subscribe h2{font-weight:700;font-size:34px;line-height:1.45}
.subscribe__link{border:3px solid var(--ink);box-shadow:var(--vicoo-shadow);font-weight:700;background:var(--card);border-radius:22px;padding:23px 30px;transform:rotate(-5deg);gap:48px}
.subscribe__link:hover{background:var(--acid);transform:rotate(0)}
.site-foot{border-top:4px solid var(--ink);background:var(--ink)}
.foot-word{font-weight:700;letter-spacing:-3px}.foot-word span{color:var(--vicoo-yellow)}
.foot-links a{font-weight:600}.foot-links a:hover{color:var(--vicoo-yellow)}
.archive-tags a{background:var(--card);border:2px solid var(--ink);border-radius:10px;font-weight:600}
.archive-tags a:hover{background:var(--vicoo-yellow);color:var(--ink)}
.archive-head h1{font-weight:800}
.archive-year{border-top:3px solid var(--ink);gap:24px}
.archive-year .post-row{margin:15px 0 22px}
.archive-year .post-row:first-child{border-top:3px solid var(--ink)}
/* The public blog borrows the art direction, not VICOO's dashboard structure.
   Long-form reading stays on a single quiet surface; no decorative text motion. */
.post-shell{padding-top:30px}
.post-shell>.back-link{font-weight:600;background:var(--card);border:2px solid var(--ink);border-radius:9px;padding:6px 12px;color:var(--ink)}
.article{margin-top:22px;background:var(--card);border:3px solid var(--ink);border-radius:24px;box-shadow:6px 6px 0 var(--ink);padding:0 40px 36px}
.post-head{padding-top:30px;border-bottom:2px solid var(--ink)}
.post-head h1{font-weight:800;font-size:clamp(39px,3.7vw,55px);line-height:1.35}
.post-head__summary{font-size:17px}
.author-dot{border:2px solid var(--ink);background:var(--vicoo-yellow);font-weight:700}
.post-head>.sample-notice{font-size:12px;border:2px solid var(--ink);padding:11px 15px;border-radius:10px;background:#ffd16635}
.read{grid-template-columns:minmax(0,1fr) 195px;gap:50px;padding-top:38px}
.read-aside__inner{border:2px solid var(--ink);border-radius:14px;padding:18px;background:var(--paper);box-shadow:3px 3px 0 var(--ink)}
.reading-bar{height:6px;border:1px solid var(--ink);border-radius:2px;background:var(--card)}
.reading-bar span{background:var(--vicoo-green)}
.toc{margin-top:25px}.toc>p{font-weight:700}.toc a[aria-current]{border-color:var(--coral);font-weight:600}
.share-button{font-weight:600;font-size:11px;border-bottom:2px solid var(--ink)}
.prose{font-size:16px;line-height:1.95}.prose h2{font-weight:700}.prose h3{font-weight:700}
.prose blockquote{border:2px solid var(--ink);border-radius:12px;padding:18px 24px;background:#ffd16630;box-shadow:3px 3px 0 var(--ink);font-size:19px}
.prose :not(pre)>code{border:1px solid #17181d30;background:#ffd16638}
.code-block{border:2px solid var(--ink);border-radius:13px;box-shadow:3px 3px 0 var(--ink)}
.code-block__head{background:var(--vicoo-yellow);border-bottom:2px solid var(--ink);color:var(--ink)}
.code-block__head button{font-weight:600;color:var(--ink)}
.prose .table-wrap{border:2px solid var(--ink);border-radius:12px}
.prose th{background:var(--vicoo-yellow);border-bottom:2px solid var(--ink)}
.callout{border:2px solid var(--ink);border-radius:12px;background:#62b6ed20;box-shadow:3px 3px 0 var(--ink)}
.callout--tip{background:#b9ed6338}.callout--warning{background:#ffd16642}.callout--takeaway{background:var(--ink);color:var(--card)}.callout--details{background:var(--paper)}
.prose-columns>blockquote{border:2px solid var(--ink);border-radius:12px;font-size:14px;padding:17px;background:var(--paper)}
.article--guide .prose>h2::before{border:2px solid var(--ink);border-radius:9px;background:var(--vicoo-yellow);font-weight:700}
.article--notes .prose{border-left:3px solid var(--coral)}
.related a{border:2px solid var(--ink);border-radius:13px;box-shadow:3px 3px 0 var(--ink);background:var(--paper)}
.related h2{font-weight:600}
.about .prose{background:var(--card);padding:30px 36px;border:3px solid var(--ink);border-radius:22px;box-shadow:var(--vicoo-shadow)}
.about h1{font-weight:800}
@media(prefers-reduced-motion:reduce){.layer-pointer,.subscribe__link{transform:none!important}.pill-link:hover,.row-arrow:hover,.tag:hover,.head-nav .nav-home:hover,.intro__copy>.text-link:hover{transform:none}}
/* Absolute art bounds stop intrinsic SVG sizing from pushing into the caption. */
.paper-drawing>.journal-bot{position:absolute;inset:0;margin:auto;width:100%;height:100%;max-width:100%}