/* Horrible World / v3 – personal software archive */
:root{--bg:#0b1420;--bg2:#111d2d;--bg3:#152236;--line:#26394b;--text:#eaf0f4;--muted:#a5b3c0;--subtle:#778ba1;--aqua:#94c6d0;--gold:#cbb386;--paper:#ecf0f2;--ink:#1a2838;--wide:1200px;color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.65}body::before{content:"";position:fixed;inset:0;z-index:-1;opacity:.32;pointer-events:none;background:linear-gradient(90deg,transparent calc(100% - 1px),#1b2b3b calc(100% - 1px)) 0 0/80px 80px,linear-gradient(transparent calc(100% - 1px),#1b2b3b calc(100% - 1px)) 0 0/80px 80px}a{text-decoration:none;color:inherit}button{font:inherit}a:focus-visible,button:focus-visible{outline:2px solid var(--aqua);outline-offset:4px}img{display:block;max-width:100%}.container{width:min(var(--wide),calc(100% - 96px));margin-inline:auto}.mono{font-family:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;letter-spacing:.02em}.micro{font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:650}.muted{color:var(--muted)}.faint{color:var(--subtle)}.accent{color:var(--aqua)}.line{height:1px;background:var(--line)}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
.site-header{height:84px;border-bottom:1px solid var(--line);background:#0b1420f5}.header-inner{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:inline-flex;gap:13px;align-items:center;white-space:nowrap}.brand-symbol{font-family:ui-monospace,monospace;font-size:14px;font-weight:750;color:var(--bg);width:33px;height:33px;background:var(--text);display:grid;place-items:center;border-radius:3px}.brand-name{font-size:16px;font-weight:680;letter-spacing:-.035em}.brand-line{height:23px;width:1px;background:var(--line);margin:0 3px}.brand-descriptor{font-size:11px;color:var(--subtle);letter-spacing:.07em}.topnav{display:flex;align-items:center;gap:34px;font-size:13px;color:var(--muted)}.topnav a{padding:8px 0;transition:color .15s}.topnav a:hover,.topnav a[aria-current="page"]{color:var(--text)}.topnav a[aria-current="page"]{box-shadow:0 1px 0 var(--aqua)}.header-link{border:1px solid #37485b;padding:9px 13px;border-radius:3px;font-size:12px;white-space:nowrap;transition:background .15s}.header-link:hover{background:#18273a}
.masthead{padding:96px 0 88px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr);column-gap:100px;align-items:end}.issue-line{display:flex;align-items:center;gap:16px;margin-bottom:28px}.issue-line .dash{height:1px;width:40px;background:var(--aqua)}.eyebrow{color:var(--aqua)}.masthead h1{font-size:clamp(52px,6.4vw,94px);letter-spacing:-.087em;line-height:1.06;font-weight:590;margin:0}.masthead .intro{margin:26px 0 0;font-size:17px;line-height:1.9;color:#b7c6d4;max-width:570px;letter-spacing:-.025em}.masthead-right{align-self:stretch;display:flex;align-items:flex-end;padding-bottom:2px}.index-sheet{width:100%;border:1px solid #314051;background:rgba(17,29,45,.83)}.index-top{display:flex;justify-content:space-between;align-items:center;padding:13px 17px;border-bottom:1px solid #314051;color:#91a7b9}.index-top b{font-size:10px;color:#b1c0d1;font-weight:550}.index-row{display:flex;align-items:center;gap:13px;padding:14px 17px;border-bottom:1px solid #243547}.index-row:last-child{border-bottom:0}.index-num{font-size:11px;color:var(--subtle);min-width:23px}.index-label{flex:1;font-weight:560;font-size:13px}.index-tag{font-size:10px;color:var(--subtle);letter-spacing:.04em}.index-dot{width:6px;height:6px;background:#729e9a;border-radius:50%}.index-dot.gold{background:#bf9f70}.index-dot.lilac{background:#b4a1d0}
.jump-row{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:18px 0 54px;border-top:1px solid var(--line);color:var(--subtle);font-size:11px}.scroll-mark{display:flex;align-items:center;gap:13px}.scroll-mark svg{stroke:var(--aqua)}
.section-title{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 28px}.section-title h2{font-size:30px;font-weight:590;letter-spacing:-.055em;margin:0}.section-title p{margin:0;font-size:12px;color:var(--subtle)}.section-overline{color:var(--aqua);margin-bottom:8px}.work-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.work-card{border:1px solid #304153;background:var(--bg2);position:relative;overflow:hidden;transition:border-color .2s,transform .2s}.work-card:hover{border-color:#7f9aae;transform:translateY(-2px)}.work-card.featured{grid-column:1/-1;display:grid;grid-template-columns:42% 58%;min-height:440px}.work-details{padding:42px 40px;display:flex;flex-direction:column}.work-card.featured .work-details{padding:46px 45px}.work-type{display:flex;align-items:center;gap:12px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#a7bdc9}.work-type .work-bar{height:5px;width:18px;background:#4c92a0}.work-type.game .work-bar{background:#be9c6a}.work-type.files .work-bar{background:#869ebf}.work-name{margin:23px 0 12px;line-height:1.05;letter-spacing:-.055em;font-size:clamp(31px,4vw,48px);font-weight:610}.work-card:not(.featured) .work-name{font-size:32px;margin-top:17px}.work-copy{color:#aab9c8;line-height:1.85;max-width:430px;margin:0;font-size:14px;letter-spacing:-.018em}.work-footer{margin-top:auto;padding-top:40px;display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}.work-tech{font-size:10px;color:#738a9f;white-space:nowrap}.work-open{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:600;color:var(--text);transition:gap .15s}.work-open:hover{gap:15px}.work-open .arrow{font-size:17px;color:var(--aqua)}.work-card.game-card .work-open .arrow{color:var(--gold)}.work-card .cover{overflow:hidden;position:relative;border-left:1px solid #304153}.work-card.featured .cover{min-height:420px}.cover-flow{background:#070f1b;display:flex;align-items:center;justify-content:center;padding:0}.cover-flow img{position:absolute;width:125%;max-width:none;height:100%;object-fit:cover;object-position:35% center;opacity:.93;filter:saturate(.78)}.cover-flow::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px 12px #09132088;pointer-events:none}.cover-label{position:absolute;z-index:2;left:18px;bottom:18px;background:#09111ae0;color:#bfcedc;border:1px solid #405368;font-size:10px;letter-spacing:.09em;padding:6px 9px;backdrop-filter:blur(8px)}.work-card:not(.featured) .cover{height:245px;border-left:none;border-top:1px solid #304153}.work-card:not(.featured) .work-details{min-height:255px}.cover-game{background:#191222}.cover-game img{height:100%;width:100%;object-fit:cover;object-position:center 43%;opacity:.94}.cover-game::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px 10px #110d17aa;pointer-events:none}
.ff-scene{height:100%;background:#e8edf2;padding:24px 23px 0;color:#24344a;position:relative;overflow:hidden;font-family:ui-sans-serif,system-ui,sans-serif}.ff-window{border:1px solid #b9c7d4;background:#f8fafc;box-shadow:0 15px 30px #25384a26;max-width:100%;height:245px}.ff-toolbar{height:40px;display:flex;align-items:center;padding:0 14px;border-bottom:1px solid #d8e0e8;gap:8px}.ff-brand{font-size:12px;font-weight:770;letter-spacing:-.04em;margin-right:auto}.ff-dot{height:7px;width:7px;border:1px solid #a8b8c7;border-radius:50%}.ff-body{display:grid;grid-template-columns:122px 1fr;height:205px}.ff-side{background:#f1f5f8;border-right:1px solid #dce5ec;padding:15px 11px}.ff-side .srow{height:7px;background:#b8c8d4;border-radius:2px;margin-bottom:17px}.ff-side .srow:nth-child(1){background:#8ba6b9;width:65%}.ff-side .srow:nth-child(2){width:80%}.ff-side .srow:nth-child(3){width:58%}.ff-side .srow:nth-child(4){width:85%}.ff-content{padding:15px 17px}.ff-head{font-size:11px;font-weight:720;margin-bottom:12px;letter-spacing:-.02em}.ff-foldergrid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.ff-folder{height:66px;border:1px solid #dce5ed;border-radius:4px;background:#fff;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px}.ff-folder-icon{width:20px;height:13px;background:#87a9c9;border-radius:2px;position:relative}.ff-folder-icon::before{content:"";position:absolute;top:-4px;left:0;width:9px;height:5px;background:#87a9c9;border-radius:2px 2px 0 0}.ff-folder:nth-child(2) .ff-folder-icon{background:#a2b4c9}.ff-folder:nth-child(2) .ff-folder-icon::before{background:#a2b4c9}.ff-folder:nth-child(3) .ff-folder-icon,.ff-folder:nth-child(3) .ff-folder-icon::before{background:#b6a7ce}.ff-folder small{font-size:8px;color:#586c81}
.section-gap{margin-top:102px}.section-divider{border-top:1px solid var(--line);padding-top:25px}.secondary-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.secondary-panel{border-top:1px solid #3b5267;padding:27px 0 20px;min-height:188px;display:flex;flex-direction:column}.secondary-panel .mini-label{color:var(--aqua);font-size:10px;letter-spacing:.14em}.secondary-panel h3{font-size:24px;font-weight:560;letter-spacing:-.045em;margin:15px 0 10px}.secondary-panel p{font-size:13px;line-height:1.85;color:var(--muted);max-width:410px;margin:0}.secondary-panel .mini-link{font-size:12px;margin-top:auto;padding-top:25px;width:fit-content}.mini-link:hover{text-decoration:underline;text-underline-offset:4px}.site-footer{margin-top:110px;border-top:1px solid var(--line);padding:33px 0 44px}.foot-grid{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.foot-grid span,.foot-grid a{color:var(--subtle);font-size:11px}.foot-grid a:hover{color:var(--text)}
/* project and inner pages */
.subhead{padding-top:44px;color:var(--subtle)}.breadcrumbs{display:flex;align-items:center;gap:10px;font-size:11px}.breadcrumbs a:hover{color:var(--text)}.inner-hero{padding:70px 0 58px;display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:end}.inner-hero h1{font-size:clamp(54px,7vw,90px);font-weight:590;line-height:1.02;letter-spacing:-.085em;margin:14px 0 0}.inner-hero p{color:#b9c8d5;line-height:1.9;font-size:16px;margin:0}.inner-kicker{font-size:11px;letter-spacing:.16em;color:var(--aqua);text-transform:uppercase}.inner-cover{background:#0c1523;border:1px solid #314659;position:relative;overflow:hidden;min-height:450px}.inner-cover.flow{display:flex;align-items:center;justify-content:center}.inner-cover.flow img{max-width:none;width:100%;height:100%;object-fit:cover;object-position:28% center;position:absolute}.inner-cover.game img{position:absolute;width:100%;height:100%;object-fit:cover}.inner-cover.files{height:440px}.inner-cover.files .ff-scene{padding:65px 50px 0}.inner-cover.files .ff-window{height:370px}.inner-cover.files .ff-body{height:330px;grid-template-columns:160px 1fr}.inner-cover.files .ff-folder{height:105px}.inner-cover.files .ff-foldergrid{gap:14px}.inner-cover.files .ff-head{font-size:14px}.inner-cover.files .ff-folder small{font-size:11px}.inner-cover.files .ff-folder-icon{transform:scale(1.3);transform-origin:left bottom}.inner-cover.files .ff-content{padding:28px}.inner-cover.files .ff-side{padding:26px 17px}.inner-cover.files .ff-toolbar{height:40px}.inner-cover .screenshot-stamp{position:absolute;z-index:2;left:22px;bottom:19px;padding:6px 11px;border:1px solid #455b70;background:#0b1420ee;color:#c4d0dc;font-size:10px;letter-spacing:.1em}.detail-grid{display:grid;grid-template-columns:1fr 2fr;gap:65px;padding:55px 0 60px;border-bottom:1px solid var(--line)}.detail-grid h2{font-size:24px;font-weight:570;letter-spacing:-.04em;margin:0}.detail-grid p{margin:0;color:#aec0cf;line-height:2;font-size:15px}.factlist{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;border-bottom:1px solid var(--line);padding:32px 0 60px}.fact-key{font-size:10px;color:var(--subtle);letter-spacing:.14em;text-transform:uppercase}.fact-val{font-size:14px;margin-top:9px}.detail-links{display:flex;gap:15px;flex-wrap:wrap;padding-top:45px}.outline-button{border:1px solid #536a7c;padding:14px 19px;font-size:13px;transition:background .2s}.outline-button:hover{background:#203249}.outline-button.primary{border-color:#a3b3c1;background:#e0e8ee;color:#0c1726}.outline-button.primary:hover{background:#fff}.next-projects{padding-top:85px}.next-head{font-size:11px;letter-spacing:.14em;color:var(--subtle);text-transform:uppercase;margin:0 0 20px}.next-link{border-top:1px solid var(--line);padding:23px 0;display:flex;justify-content:space-between;align-items:center;font-size:29px;letter-spacing:-.05em}.next-link:last-child{border-bottom:1px solid var(--line)}.next-link:hover{color:var(--aqua)}.next-link .next-meta{font-size:12px;letter-spacing:0;color:var(--subtle)}.plain-hero{padding:95px 0 54px;max-width:780px}.plain-hero h1{font-size:clamp(51px,7vw,79px);letter-spacing:-.07em;font-weight:580;line-height:1.12;margin:16px 0 20px}.plain-hero p{color:var(--muted);max-width:650px;font-size:16px}.empty-box{padding:55px 38px 65px;border:1px solid var(--line);background:#121e2d;min-height:230px}.empty-box .big-num{font-size:45px;letter-spacing:-.06em;color:#91a4b6}.empty-box p{color:var(--muted);margin:10px 0 0;font-size:14px}.about-copy{max-width:750px;padding-bottom:75px}.about-copy p{font-size:17px;line-height:2;color:#b6c6d3}.about-links{display:flex;gap:20px;margin-top:38px;font-size:13px}.about-links a{text-decoration:underline;text-underline-offset:5px}
@media(max-width:1000px){.container{width:min(var(--wide),calc(100% - 56px))}.masthead{grid-template-columns:1fr 320px;gap:34px}.masthead h1{font-size:68px}.work-card.featured{grid-template-columns:45% 55%}.work-details,.work-card.featured .work-details{padding:29px 27px}.work-tech{display:none}.inner-hero{gap:40px}}
@media(max-width:760px){.site-header{height:auto;min-height:76px}.header-inner{padding:17px 0;flex-wrap:wrap;gap:13px}.brand-descriptor,.brand-line,.header-link{display:none}.topnav{gap:23px;font-size:12px}.container{width:calc(100% - 36px)}.masthead{padding:77px 0 52px;display:block}.masthead h1{font-size:clamp(51px,11vw,74px)}.masthead .intro{font-size:15px;margin-top:23px}.masthead-right{margin-top:36px}.index-sheet{max-width:540px}.jump-row{padding-bottom:32px}.work-grid{grid-template-columns:1fr;gap:16px}.work-card.featured{grid-column:auto;display:flex;flex-direction:column;min-height:auto}.work-card.featured .cover{height:270px;min-height:0;border-left:0;border-top:1px solid #304153;order:-1}.work-card.featured .work-details{min-height:285px}.work-card:not(.featured) .cover{height:235px;order:-1}.work-card:not(.featured){display:flex;flex-direction:column}.work-card:not(.featured) .work-details{min-height:255px}.cover-flow img{width:100%;height:100%;object-position:28% center}.work-card .work-name{margin:19px 0 11px}.section-gap{margin-top:80px}.secondary-grid{grid-template-columns:1fr;gap:0}.secondary-panel{min-height:155px}.site-footer{margin-top:72px}.inner-hero{grid-template-columns:1fr;padding:60px 0 40px;gap:20px}.inner-hero h1{font-size:62px}.inner-cover{min-height:320px}.inner-cover.files{height:320px}.inner-cover.files .ff-scene{padding:35px 25px 0}.inner-cover.files .ff-window{height:300px}.inner-cover.files .ff-body{height:260px;grid-template-columns:105px 1fr}.inner-cover.files .ff-side{padding:20px 9px}.inner-cover.files .ff-folder{height:70px}.inner-cover.files .ff-foldergrid{gap:6px}.inner-cover.files .ff-content{padding:18px 11px}.inner-cover.files .ff-folder small{font-size:8px}.detail-grid{grid-template-columns:1fr;gap:15px;padding:35px 0}.factlist{grid-template-columns:1fr 1fr;gap:26px}.plain-hero{padding-top:70px}.plain-hero h1{font-size:56px}}
@media(max-width:420px){.brand-name{font-size:14px}.topnav{gap:14px}.header-inner{gap:10px}.masthead h1{font-size:49px}.issue-line{margin-bottom:22px}.section-title h2{font-size:26px}.work-card.featured .cover,.work-card:not(.featured) .cover{height:205px}.work-card.featured .work-details,.work-details{padding:24px}.work-copy{font-size:13px}.inner-hero h1{font-size:51px}.next-link{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.work-card,.work-open{transition:none}}

/* Language selector: intentionally subtle; layout preserved from v3. */
.language-control{display:flex;align-items:center;gap:2px;flex-shrink:0;border:1px solid #37485b;border-radius:3px;padding:3px;background:#111d2c}
.language-control button{cursor:pointer;border:0;border-radius:2px;background:transparent;color:#8194a7;font:600 10px/1.1 ui-monospace,"SFMono-Regular",Consolas,monospace;letter-spacing:.04em;min-width:28px;min-height:27px;padding:6px 7px;transition:background .15s,color .15s}
.language-control button:hover{color:#eaf0f4;background:#24364b}
.language-control button[aria-pressed="true"]{color:#0b1420;background:#d2e2e8}
@media(max-width:760px){.header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:14px}.header-inner>.brand{grid-column:1;grid-row:1}.header-inner>.language-control{grid-column:2;grid-row:1}.header-inner>.topnav{grid-column:1 / -1;grid-row:2;justify-content:space-between;gap:12px}.header-inner>.header-link{display:none}}
@media(prefers-reduced-motion:reduce){.language-control button{transition:none}}


/* v3.1: commissioned project illustrations, preserving the existing layout & typography. */
.work-card .cover.cover-art{display:block;isolation:isolate;background:#0e1a2a}
.work-card .cover.cover-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;opacity:1;filter:none;transition:transform .35s ease}
.work-card.featured .cover.cover-art>img{object-position:right center;transform:scale(1.50);transform-origin:right center}
.work-card.featured .cover.cover-art:hover>img{transform:scale(1.53)}
.work-card:not(.featured) .cover.cover-art{height:auto;min-height:0;aspect-ratio:16/9}
.work-card:not(.featured) .cover.cover-art:hover>img{transform:scale(1.025)}
.work-card .cover.cover-art::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:none;background:linear-gradient(0deg,rgba(6,13,24,.52) 0%,transparent 24%);}
.work-card .cover.cover-art .cover-label{z-index:2;color:#edf1f7;background:rgba(8,14,24,.74);border-color:rgba(219,229,242,.24);backdrop-filter:blur(7px)}
.inner-cover.cover-art-detail{height:auto;min-height:0;aspect-ratio:1672/941;background:#0c1523}
.inner-cover.cover-art-detail>img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center center;display:block}
.inner-cover.cover-art-detail>.screenshot-stamp{color:#eef2f7;background:rgba(8,14,24,.77);border-color:rgba(219,229,242,.3);backdrop-filter:blur(6px)}
@media(max-width:760px){.work-card.featured .cover.cover-art,.work-card:not(.featured) .cover.cover-art{height:auto;min-height:0;aspect-ratio:16/9}.work-card.featured .cover.cover-art>img{object-position:right center;transform:scale(1.60)}.work-card.featured .cover.cover-art:hover>img{transform:scale(1.63)}.inner-cover.cover-art-detail{height:auto;min-height:0;aspect-ratio:1672/941}}
@media(max-width:420px){.work-card.featured .cover.cover-art,.work-card:not(.featured) .cover.cover-art{height:auto;aspect-ratio:16/9}.work-card .cover.cover-art .cover-label{font-size:9px;left:10px;bottom:10px}.inner-cover.cover-art-detail>.screenshot-stamp{font-size:9px;left:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.work-card .cover.cover-art>img{transition:none}}


/* v3.2: artwork aspect ratio & cache-safe correction.
   All three illustrations are native 1672×941. Never stretch to a portrait panel. */
#work .work-card:not(.featured) > .cover.cover-art {
  display:block;
  box-sizing:border-box;
  position:relative;
  width:100%;
  height:auto;
  min-height:0;
  max-height:none;
  aspect-ratio:1672 / 941;
  overflow:hidden;
  flex:none;
}
#work .work-card:not(.featured) > .cover.cover-art > img {
  display:block;
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
  object-position:center center;
  transform:none;
}
#work .work-card:not(.featured) > .cover.cover-art:hover > img {
  transform:scale(1.015);
}
@media (max-width:760px) {
  #work .work-card.featured > .cover.cover-art {
    width:100%;
    height:auto;
    min-height:0;
    aspect-ratio:1672 / 941;
    flex:none;
  }
}

/* Avoid header overflow on mid-size tablets after adding language selection. */
@media (min-width:761px) and (max-width:950px){.header-inner>.header-link{display:none}}