/*
Theme Name: Computa
Description: A lightweight Typecho archive theme for code and technical writing.
Version: 1.0.0
*/

:root {
    --paper: #f0eee8;
    --surface: #faf9f5;
    --ink: #171a22;
    --muted: #6c707a;
    --line: #d5d2ca;
    --coral: #ff6f59;
    --cyan: #54bfc5;
    --violet: #7770d8;
    --yellow: #e7b84a;
    --terminal: #1c202b;
    --terminal-2: #262b38;
    --code: #dfe3ec;
    --mono: Consolas, "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
    --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    --shadow: 0 24px 80px rgba(24, 28, 38, .14);
    --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 76px }
body { margin:0;background:var(--paper);color:var(--ink);font:15px/1.7 var(--sans);overflow-x:hidden }
body::before {
    content:"";
    position:fixed;
    inset:0;
    z-index:-2;
    pointer-events:none;
    opacity:.33;
    background-image:radial-gradient(rgba(23,26,34,.22) .55px,transparent .55px);
    background-size:6px 6px;
}
a { color:inherit;text-decoration:none }
img { display:block;max-width:100% }
button, input, textarea { font:inherit;color:inherit }
::selection { background:var(--cyan);color:#0c2427 }
.skip-link { position:fixed;left:18px;top:-60px;z-index:200;padding:9px 13px;background:var(--ink);color:white;font:12px var(--mono) }
.skip-link:focus { top:18px }

.topbar {
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:100;
    border-bottom:1px solid rgba(255,255,255,.12);
    background:rgba(20,23,31,.82);
    color:#e8eaf0;
    backdrop-filter:blur(16px);
}
.topbar-inner { width:min(1240px,calc(100% - 36px));height:58px;margin:auto;display:flex;align-items:center;gap:20px }
.window-dots { display:flex;gap:7px;align-items:center }
.window-dots i { width:11px;height:11px;border-radius:50%;background:var(--coral) }
.window-dots i:nth-child(2) { background:var(--yellow) }
.window-dots i:nth-child(3) { background:#5dc376 }
.topbar-path { overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--mono) }
.topbar-path span { color:var(--cyan) }
.topbar-path b { color:var(--coral);animation:cursor-blink .8s step-end infinite }
.topbar nav { margin-left:auto;display:flex;gap:25px;font:11px var(--mono) }
.topbar nav a { color:#aeb4c1;transition:color .2s }
.topbar nav a:hover { color:var(--cyan) }
.menu-toggle { display:none;margin-left:auto;border:0;background:none;color:#e8eaf0;font:11px var(--mono);cursor:pointer }
@keyframes cursor-blink { 50% { opacity:0 } }

.hero {
    position:relative;
    min-height:100svh;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:100px 24px 76px;
    background:
        linear-gradient(135deg,rgba(18,21,30,.92),rgba(24,29,42,.82)),
        radial-gradient(circle at 20% 20%,rgba(84,191,197,.24),transparent 35%),
        radial-gradient(circle at 80% 80%,rgba(119,112,216,.24),transparent 38%),
        #171b25;
}
.hero.has-image {
    background-image:linear-gradient(135deg,rgba(12,15,22,.76),rgba(19,23,34,.66)),var(--hero-image);
    background-size:cover;
    background-position:center 48%;
}
.hero.has-default-image {
    background-image:
        linear-gradient(110deg,rgba(9,13,27,.78),rgba(16,21,43,.38) 58%,rgba(20,24,42,.25)),
        url("assets/hero.webp");
    background-size:cover;
    background-position:center 48%;
}
.hero::after { content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 68%,var(--paper));pointer-events:none }
.hero-grid {
    position:absolute;
    inset:0;
    opacity:.17;
    background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);
    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,black,transparent 88%);
}
.hero-terminal {
    position:relative;
    z-index:2;
    width:min(780px,100%);
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    border-radius:16px;
    background:rgba(25,29,39,.86);
    color:var(--code);
    box-shadow:0 35px 100px rgba(0,0,0,.4);
    backdrop-filter:blur(14px);
    animation:terminal-in .9s var(--ease) both;
}
@keyframes terminal-in { from { opacity:0;transform:translateY(24px) scale(.97) } }
.terminal-chrome, .respond-bar, .entry-window-bar {
    min-height:42px;
    padding:0 15px;
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    border-bottom:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.045);
    font:10px var(--mono);
}
.terminal-chrome .window-dots, .entry-window-bar .window-dots { justify-self:start }
.terminal-chrome > span, .entry-window-bar > span { justify-self:center;color:#aeb4c1 }
.terminal-chrome > b, .entry-window-bar > b { justify-self:end;color:#737b8d;font-weight:400 }
.hero-terminal-body { padding:clamp(30px,6vw,58px) }
.coding-title {
    display:flex;
    width:max-content;
    max-width:100%;
    align-items:center;
    margin:0 auto 34px;
    color:#f4f5f8;
    font:clamp(18px,3.1vw,31px)/1.3 var(--mono);
    letter-spacing:-.035em;
}
.coding-title span { overflow:hidden;white-space:nowrap;animation:typing 2.4s steps(31,end) both }
.coding-title i { width:2px;height:1.15em;margin-left:5px;background:var(--coral);animation:cursor-blink .75s step-end infinite }
@keyframes typing { from { width:0 } to { width:100% } }
.hero-search { display:grid;grid-template-columns:auto 1fr auto;align-items:center;border:1px solid #454c5c;border-radius:9px;background:#141821;box-shadow:inset 0 1px 0 rgba(255,255,255,.05) }
.hero-search label { padding-left:17px;color:#d8dbe3;font:13px var(--mono) }
.hero-search label span { color:var(--cyan) }
.hero-search input { min-width:0;padding:16px 12px;border:0;outline:0;background:transparent;color:white;font:13px var(--mono) }
.hero-search input::placeholder { color:#737b8d }
.hero-search button { height:100%;padding:0 17px;border:0;border-left:1px solid #454c5c;background:transparent;color:var(--coral);font:12px var(--mono);cursor:pointer }
.hero-search:focus-within { border-color:var(--cyan);box-shadow:0 0 0 3px rgba(84,191,197,.13) }
.command-hints { display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:20px }
.command-hints span { padding:3px 8px;border:1px solid #3b4250;border-radius:5px;color:#8e96a7;font:9px var(--mono) }
.scroll-cue { position:absolute;z-index:3;bottom:30px;display:flex;flex-direction:column;align-items:center;color:#7e8491;font:9px var(--mono);letter-spacing:.08em }
.scroll-cue i { color:var(--coral);font:18px var(--mono);font-style:normal;animation:scroll-bob 1.5s ease-in-out infinite }
@keyframes scroll-bob { 50% { transform:translateY(6px) } }

.archive-shell { width:min(1080px,calc(100% - 40px));margin:auto;padding:110px 0 }
.archive-heading { display:grid;grid-template-columns:1fr minmax(260px,390px);gap:60px;align-items:end;margin-bottom:56px;padding-bottom:28px;border-bottom:1px solid var(--line) }
.code-label { color:var(--violet);font:10px var(--mono);letter-spacing:.1em }
.archive-heading h1 { margin:6px 0 0;font:700 clamp(36px,5vw,62px)/1.08 var(--mono);letter-spacing:-.07em }
.archive-heading p { margin:0;color:var(--muted);font:12px/1.8 var(--mono) }
.archive-owner { display:grid;grid-template-columns:58px 1fr;gap:16px;align-items:center }
.owner-avatar { position:relative;width:58px;height:58px;flex:0 0 auto }
.owner-avatar img { width:100%;height:100%;object-fit:cover;border:2px solid var(--surface);border-radius:13px;box-shadow:0 0 0 1px var(--line),0 8px 25px rgba(23,26,34,.12) }
.owner-avatar i { position:absolute;right:-2px;bottom:-2px;width:12px;height:12px;border:2px solid var(--paper);border-radius:50%;background:#55bd72;box-shadow:0 0 0 3px rgba(85,189,114,.14) }
.owner-handle { display:block;margin-bottom:5px;color:var(--violet);font:10px var(--mono) }
.archive-card { display:grid;grid-template-columns:minmax(280px,38%) 1fr;min-height:300px;margin-bottom:28px;overflow:hidden;border:1px solid var(--line);border-radius:15px;background:var(--surface);box-shadow:0 10px 30px rgba(23,26,34,.05);transition:transform .4s var(--ease),box-shadow .4s,border-color .3s }
.archive-card:hover { transform:translateY(-7px);border-color:#b9b5ac;box-shadow:var(--shadow) }
.card-cover { position:relative;min-height:270px;overflow:hidden;background:var(--terminal) }
.card-cover::after { content:"";position:absolute;inset:0;border-right:1px solid rgba(255,255,255,.08);background:linear-gradient(135deg,transparent,rgba(84,191,197,.1)) }
.card-cover img { width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease) }
.archive-card:hover .card-cover img { transform:scale(1.045) }
.cover-code { position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:30px;color:#98a0b1;font:11px/2 var(--mono) }
.cover-code span:nth-child(2) { color:#b6a9f3 }
.cover-code span:nth-child(3) { color:#91d3c9 }
.file-extension { position:absolute;z-index:2;right:14px;bottom:12px;color:rgba(255,255,255,.2);font:700 56px/1 var(--mono) }
.card-info { min-width:0;padding:34px 38px;display:flex;flex-direction:column }
.card-meta { display:flex;justify-content:space-between;gap:20px;color:var(--muted);font:9px var(--mono);letter-spacing:.08em }
.card-meta span { color:var(--coral) }
.card-info h2 { margin:24px 0 15px;font:700 clamp(23px,3vw,34px)/1.25 var(--mono);letter-spacing:-.05em }
.card-info h2 a:hover { color:var(--violet) }
.card-info > p { margin:0;color:var(--muted);font-size:14px }
.card-info footer { display:flex;align-items:end;justify-content:space-between;gap:18px;margin-top:auto;padding-top:28px }
.stack-list { display:flex;gap:6px;flex-wrap:wrap }
.stack-list span { padding:3px 7px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font:9px var(--mono) }
.read-command { flex:0 0 auto;font:10px var(--mono) }
.read-command i { display:inline-block;color:var(--coral);font-style:normal;transition:transform .2s }
.read-command:hover i { transform:translate(3px,-3px) }

.pagination { display:flex;justify-content:center;margin-top:50px }
.page-list { display:flex;gap:8px;padding:0;list-style:none;font:10px var(--mono) }
.page-list a, .page-list span { display:grid;min-width:38px;height:36px;padding:0 10px;place-items:center;border:1px solid var(--line);border-radius:6px;background:var(--surface) }
.page-list a:hover, .page-list .current a, .page-list .current span { border-color:var(--ink);background:var(--ink);color:white }
.empty { margin:50px auto;padding:40px;border:1px dashed var(--line);text-align:center;font:12px var(--mono) }
.empty span { color:var(--coral);font-size:30px }

.archive-page { padding-top:150px;min-height:80vh }
.entry { width:min(1260px,calc(100% - 40px));margin:auto;padding:110px 0 90px }
.entry-header { overflow:hidden;margin-bottom:50px;border:1px solid #303643;border-radius:15px;background:var(--terminal);color:var(--code);box-shadow:var(--shadow) }
.entry-title { padding:clamp(34px,7vw,74px) }
.entry-title > p { margin:0 0 24px;color:#8f97a7;font:11px var(--mono) }
.entry-title > p span { color:var(--cyan) }
.entry-title h1 { max-width:960px;margin:0;font:700 clamp(38px,6.4vw,78px)/1.08 var(--mono);letter-spacing:-.075em }
.entry-meta { display:flex;gap:18px;flex-wrap:wrap;margin-top:34px;color:#929aaa;font:10px var(--mono) }
.entry-meta span::before { content:"";display:inline-block;width:5px;height:5px;margin-right:7px;border-radius:50%;background:var(--coral);vertical-align:1px }
.entry-meta span:nth-child(2)::before { background:var(--cyan) }
.entry-meta span:nth-child(3)::before { background:var(--violet) }
.entry-meta span:nth-child(4)::before { background:var(--yellow) }
.entry-stack { margin-top:20px }
.entry-stack span { border-color:#414858;color:#aab1bf }
.entry-cover { margin:0 0 56px;overflow:hidden;border-radius:15px;background:var(--terminal) }
.entry-cover img { width:100%;height:auto;aspect-ratio:16/8;object-fit:cover }
.entry-layout { display:grid;grid-template-columns:210px minmax(0,780px);gap:70px;justify-content:center;align-items:start }
.entry-aside { position:sticky;top:90px;min-width:0 }
.aside-block { margin-bottom:30px;padding-bottom:25px;border-bottom:1px solid var(--line) }
.aside-block ol { padding:0;list-style:none }
.aside-block li { margin:8px 0 }
.aside-block li.is-sub { padding-left:12px }
.aside-block a { color:var(--muted);font:10px/1.5 var(--mono) }
.aside-block a:hover { color:var(--violet) }
.aside-block > p { margin:14px 0 3px;color:var(--muted);font:9px var(--mono) }
.aside-block > div { font-size:12px }
.aside-tags { display:flex;gap:5px;flex-wrap:wrap }
.aside-tags a { padding:2px 5px;background:#e4e1da;border-radius:4px }
.repo-link { display:block;padding:11px;border:1px solid var(--ink);border-radius:6px;text-align:center;font:10px var(--mono) }
.repo-link:hover { background:var(--ink);color:white }
.entry-main { min-width:0 }
.entry-content { font-size:16px;line-height:1.95;word-wrap:break-word }
.entry-content > :first-child { margin-top:0 }
.entry-content h2, .entry-content h3, .entry-content h4 { scroll-margin-top:90px;font-family:var(--mono);line-height:1.35;letter-spacing:-.04em }
.entry-content h2 { position:relative;margin:2.4em 0 .8em;font-size:29px }
.entry-content h2::before { content:"#";position:absolute;right:calc(100% + 10px);color:var(--coral) }
.entry-content h3 { margin:2em 0 .7em;font-size:22px }
.entry-content p { margin:1.3em 0 }
.entry-content a { color:#5750b2;text-decoration:underline;text-decoration-color:#b8b3e9;text-underline-offset:4px }
.entry-content img { height:auto;margin:30px auto;border-radius:10px }
.entry-content blockquote { margin:28px 0;padding:16px 20px;border-left:3px solid var(--cyan);background:#e6eeee;color:#555c65 }
.entry-content code { padding:.14em .38em;border-radius:4px;background:#dfdcd5;color:#513d78;font:88%/1.6 var(--mono) }
.entry-content pre { position:relative;margin:30px 0;padding:22px;overflow:auto;border:1px solid #303644;border-radius:11px;background:var(--terminal);color:var(--code);font:12px/1.8 var(--mono);tab-size:4 }
.entry-content pre code { padding:0;background:none;color:inherit;font:inherit }
.entry-content table { width:100%;border-collapse:collapse;font-size:13px }
.entry-content th, .entry-content td { padding:10px;border:1px solid var(--line);text-align:left }
.entry-content th { background:#e4e1da;font-family:var(--mono) }
.table-scroll { margin:28px 0;overflow:auto }
.copy-code { position:absolute;right:10px;top:9px;padding:4px 7px;border:1px solid #434a59;border-radius:4px;background:#272c39;color:#aab1bf;font:9px var(--mono);cursor:pointer }
.hl-comment { color:#7f8797;font-style:italic }
.hl-string { color:#91d3b0 }
.hl-number { color:#efb36e }
.hl-keyword { color:#bbabf2 }
.entry-footer { margin-top:70px;padding-top:26px;border-top:1px solid var(--line) }
.entry-license span { color:var(--coral);font:10px var(--mono) }
.entry-license p { color:var(--muted);font-size:12px }
.entry-footer nav { display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:30px }
.entry-footer nav div { min-width:0;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface) }
.entry-footer nav div:last-child { text-align:right }
.entry-footer nav span { display:block;color:var(--muted);font:9px var(--mono) }
.entry-footer nav a { display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:12px var(--mono) }

.comments { width:min(780px,calc(100% - 40px));margin:0 auto 100px;padding-top:50px;border-top:1px solid var(--line) }
.comments-heading { margin-bottom:20px }
.comments-heading h2 { margin:5px 0;font:700 26px var(--mono) }
.respond { overflow:hidden;border:1px solid #303643;border-radius:11px;background:var(--terminal);color:var(--code);box-shadow:var(--shadow) }
.respond-bar { grid-template-columns:auto 1fr }
.respond-bar > span { justify-self:center;color:#939baa;font:9px var(--mono) }
.respond form { padding:25px }
.comment-fields { display:grid;grid-template-columns:repeat(3,1fr);gap:10px }
.comment-fields label, .comment-message { display:flex;flex-direction:column;gap:5px;color:#aab1bf;font:9px var(--mono) }
.respond input, .respond textarea { width:100%;padding:10px;border:1px solid #414858;border-radius:5px;outline:0;background:#171b24;color:white;font:11px var(--mono);resize:vertical }
.respond input:focus, .respond textarea:focus { border-color:var(--cyan);box-shadow:0 0 0 3px rgba(84,191,197,.12) }
.comment-message { margin-top:12px }
.respond-submit { display:flex;justify-content:flex-end;align-items:center;gap:12px;margin-top:12px;font:10px var(--mono) }
.respond-submit button { padding:9px 13px;border:0;border-radius:5px;background:var(--coral);color:#241916;font:10px var(--mono);cursor:pointer }
.login-state { color:#aab1bf;font:10px var(--mono) }
.comment-list, .comment-children { padding:0;list-style:none }
.comment-list { margin-top:35px }
.comment-item { padding:22px 0;border-bottom:1px solid var(--line) }
.comment-item header { display:flex;align-items:center;gap:10px }
.comment-item header img { width:38px;height:38px;border-radius:8px }
.comment-item header strong { font:11px var(--mono) }
.comment-item header time { display:block;color:var(--muted);font:9px var(--mono) }
.comment-item header span { margin-left:5px;padding:2px 4px;border-radius:3px;background:#dedaf6;color:#5750b2;font:8px var(--mono) }
.comment-reply { margin-left:auto;font:9px var(--mono) }
.comment-reply a:hover { color:var(--coral) }
.comment-text { padding:7px 0 0 48px;color:var(--muted) }
.comment-text p { margin:.6em 0 }
.comment-children { margin-left:48px }

.tree-list h2 { margin:38px 0 8px;font:700 23px var(--mono) }
.tree-list h2 span { color:var(--coral) }
.tree-list a { display:grid;grid-template-columns:60px 1fr auto;gap:15px;padding:11px 0;border-bottom:1px solid var(--line);font:11px var(--mono) }
.tree-list time, .tree-list i { color:var(--muted);font-style:normal }
.tree-list a:hover span { color:var(--violet) }
.error-screen { min-height:100vh;padding:120px 20px;display:grid;place-items:center;background:var(--paper) }
.error-window { width:min(700px,100%);overflow:hidden;border:1px solid #303643;border-radius:14px;background:var(--terminal);color:var(--code);box-shadow:var(--shadow) }
.error-window > header { height:42px;padding:0 15px;display:flex;align-items:center;gap:calc(50% - 100px);border-bottom:1px solid #303643;background:var(--terminal-2);font:9px var(--mono) }
.error-window > div { padding:45px }
.error-window p { color:#929aaa;font:11px var(--mono) }
.error-window p span { color:var(--coral) }
.error-window h1 { margin:0;color:var(--coral);font:700 100px/1 var(--mono) }
.error-window pre { padding:15px;border:1px solid #343a48;border-radius:6px;background:#151821;color:#9ba3b3;font:11px/1.8 var(--mono) }
.error-window a { color:var(--cyan);font:11px var(--mono) }

.site-footer { padding:34px max(20px,calc((100% - 1080px)/2));display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);color:var(--muted);font:9px var(--mono) }
.site-footer div { display:flex;gap:10px }
.site-footer p { margin:0 }
.prompt { color:var(--violet) }
.reveal { opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease) }
.reveal.is-visible { opacity:1;transform:none }

@media (max-width: 800px) {
    .topbar nav { position:absolute;left:0;right:0;top:58px;padding:18px;display:none;flex-direction:column;gap:15px;background:var(--terminal);border-top:1px solid #303643 }
    body.menu-open .topbar nav { display:flex }
    .menu-toggle { display:block }
    .hero { min-height:92svh;padding-inline:15px }
    .hero.has-image, .hero.has-default-image { background-position:58% center }
    .hero-terminal-body { padding:32px 18px }
    .coding-title { font-size:clamp(14px,4.7vw,21px) }
    .hero-search { grid-template-columns:auto 1fr }
    .hero-search button { grid-column:1/-1;height:40px;border-top:1px solid #454c5c;border-left:0 }
    .archive-shell { width:min(100% - 30px,1080px);padding:80px 0 }
    .archive-heading { grid-template-columns:1fr;gap:18px;margin-bottom:35px }
    .archive-card { grid-template-columns:1fr }
    .card-cover { min-height:220px;aspect-ratio:16/9 }
    .card-info { padding:27px 22px }
    .card-info h2 { margin-top:17px }
    .card-info footer { align-items:start;flex-direction:column }
    .entry { width:min(100% - 24px,1260px);padding-top:88px }
    .entry-title { padding:36px 22px }
    .entry-title h1 { font-size:clamp(34px,10.5vw,52px) }
    .entry-layout { grid-template-columns:1fr;gap:20px }
    .entry-aside { position:static;display:grid;grid-template-columns:1fr 1fr;gap:15px }
    .entry-cover { border-radius:10px }
    .entry-content h2::before { position:static;margin-right:7px }
    .comment-fields { grid-template-columns:1fr }
    .comments { width:min(100% - 30px,780px) }
    .comment-children { margin-left:22px }
    .comment-text { padding-left:0 }
    .site-footer { flex-direction:column }
}

@media (max-width: 520px) {
    .topbar-inner { width:calc(100% - 24px) }
    .topbar-path { max-width:50vw }
    .command-hints { display:none }
    .terminal-chrome > b { display:none }
    .archive-heading h1 { font-size:36px }
    .entry-aside { grid-template-columns:1fr }
    .entry-footer nav { grid-template-columns:1fr }
    .entry-footer nav div:last-child { text-align:left }
    .error-window > div { padding:30px 20px }
    .error-window h1 { font-size:72px }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important }
    .reveal { opacity:1;transform:none }
    .coding-title span { width:auto }
}