@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.3.0/400.css");
@import url("https://cdn.jsdelivr.net/npm/@fontsource/geist-mono@5.3.0/500.css");

:root{--bg:#08090b;--line:#1b1f24;--hover:#303741;--text:#dfe3e8;--muted:#69717c;--dim:#3d444d;--blue:#7aa7ff}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

body{margin:0;background:var(--bg);color:var(--text);font-family:"Geist Mono",monospace;font-size:13px;line-height:1.7}

body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% -15%,rgba(100,145,220,.08),transparent 35%)}

a{text-decoration:none;color:inherit}
button,select,input,textarea{font-family:"Geist Mono",monospace;font-size:13px;outline:0}

::selection{background:var(--blue);color:#08090b}

.wrap{width:min(720px,calc(100% - 36px));margin:auto}

header{text-align:center;padding:78px 0 65px}

.avatar{width:108px;height:108px;margin:0 auto 25px;border:1px solid #7aa7ff80;border-radius:50%;overflow:hidden}

.avatar img{width:100%;height:100%;object-fit:cover;display:block}

h1{margin:0;color:#f1f3f5;font-size:clamp(30px,6vw,40px);font-weight:500;letter-spacing:-2px}

.cursor{display:inline-block;width:8px;height:29px;margin-left:6px;background:var(--blue);vertical-align:-2px;animation:blink 1.1s steps(1) infinite}

@keyframes blink{50%{opacity:0}}

.sub{margin-top:10px;color:var(--muted);font-size:12px}

nav{display:flex;justify-content:center;gap:24px;margin-top:25px}

nav a{color:var(--muted)}
nav a:hover,.contact a:hover,.back:hover{color:var(--blue)}

nav a:before{content:"./";color:var(--dim)}

section{margin-bottom:60px}

.title{display:flex;align-items:center;gap:10px;margin-bottom:17px;font-weight:500}

.title:before{content:"";width:4px;height:15px;background:var(--blue)}

.title:after{content:"";height:1px;background:var(--line);flex:1}

.about,.box{padding:23px 25px;border:1px solid var(--line);border-radius:6px;background:#0c0e11a6}

.about p,.box p{margin:0;color:#858d97}
.about p+p,.box p+p{margin-top:10px}
.about b,.box b{color:#c9ced5;font-weight:400}

.projects{border-top:1px solid var(--line)}

.project{display:grid;grid-template-columns:175px 1fr 20px;gap:15px;align-items:center;padding:14px 4px;border-bottom:1px solid var(--line);transition:.2s}

.project:hover{padding-left:10px;padding-right:10px;background:#7aa7ff06}

.project strong{color:var(--blue);font-weight:500}

.project small{color:var(--muted);font-size:11px}

.arrow{color:var(--dim);text-align:right}

.project:hover .arrow{color:var(--blue);transform:translateX(3px)}

.stack{color:var(--muted);font-size:12px}

.stack i{font-style:normal;color:var(--dim);margin:0 8px}

.contact{display:flex;gap:10px;flex-wrap:wrap}

.contact a{padding:9px 13px;border:1px solid var(--line);border-radius:4px;color:var(--muted);transition:.2s}

.back{display:inline-block;color:var(--muted);margin-bottom:35px}

.back:before{content:"← ";color:var(--dim)}

.project-page header{padding-bottom:45px}

.project-page h1{font-size:clamp(27px,5vw,36px)}

.project-page .sub{margin-top:8px}

textarea{width:100%;height:190px;resize:vertical;padding:14px;background:#08090b;color:var(--text);border:1px solid var(--line);border-radius:5px}

textarea:focus,input:focus,select:focus{border-color:var(--hover)}

.controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}

select,input,button{height:37px;padding:0 11px;background:#0c0e11;color:var(--muted);border:1px solid var(--line);border-radius:4px}

select{min-width:170px}
input{width:150px}
button{cursor:pointer}

button:hover{color:var(--blue);border-color:var(--hover)}

.result{min-height:130px;padding:14px;background:#08090b;border:1px solid var(--line);border-radius:5px;color:#aeb5be;white-space:pre-wrap;word-break:break-word}

.status{margin-top:8px;color:var(--dim);font-size:10px}

.status b{color:var(--blue);font-weight:400}

.methods{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.method{display:flex;justify-content:space-between;padding:10px 3px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}

.method span:last-child{color:var(--dim)}

.note{margin-top:20px;color:var(--dim);font-size:11px}

.link{margin-top:22px}
.link a{color:var(--blue)}

.controls-list{border-top:1px solid var(--line)}

.control{display:flex;justify-content:space-between;padding:10px 3px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px}

.control span:last-child{color:var(--dim)}

footer{padding:0 0 55px;text-align:center;color:var(--dim);font-size:10px}

footer b{color:var(--blue);font-weight:400}

.page{display:none}

.page:target{display:block}

body:not(:has(.page:target)) #home{display:block}

.game-video{width:100%;display:block;border:1px solid var(--line);border-radius:5px}

.script-box{border:1px solid var(--line);border-radius:6px;background:#080a0d;overflow:hidden}

.script-head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 13px;border-bottom:1px solid var(--line);color:#858d97;font-size:11px}

.copy-script{border:1px solid #2a3038;background:#11151a;color:#c9ced5;border-radius:5px;padding:7px 10px;font:inherit;cursor:pointer}

.copy-script:hover{background:#171c22;color:#fff}

.script-code{margin:0;padding:16px;max-height:560px;overflow:auto;color:#c9ced5;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;tab-size:2;white-space:pre}

.script-code code{font:inherit}

.copy-status{min-height:0;padding:0 13px;color:#858d97;font-size:10px}

.copy-status.show{padding:0 13px 10px}

.tutorial{line-height:1.65}

.tutorial ol{margin:0;padding-left:20px;color:#858d97}

.tutorial li+li{margin-top:10px}

.tutorial b{color:#c9ced5;font-weight:500}

.requirement{display:grid;gap:5px;margin-bottom:18px;padding:13px 14px;border:1px solid #2a3038;border-radius:6px;background:#0b0e12}

.requirement span{color:#858d97;font-size:11px}

.tutorial li::marker{color:#59616b;font-size:10px}

.download-list{border-top:1px solid var(--line)}

.download-item{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 4px;border-bottom:1px solid var(--line);transition:.2s}

.download-item:hover{padding-left:10px;padding-right:10px;background:#7aa7ff06}

.download-info{display:flex;flex-direction:column;min-width:0}

.download-info strong{color:var(--blue);font-weight:500}

.download-info small{color:var(--muted);font-size:11px}

.download-button{flex:0 0 auto;padding:8px 12px;border:1px solid var(--line);border-radius:4px;color:var(--muted);background:#0c0e11;transition:.2s;font-size:11px}

.download-button:hover{color:var(--blue);border-color:var(--hover);background:#111419}

@media(max-width:700px){
  .steamrip-code-wrap pre,
  .code-block-wrap pre,
  .code-container pre,
  pre.steamrip-code{
    max-height:520px;
    padding:16px;
    font-size:12px;
  }
}

.script-box{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}

.script-head{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}

.steamrip-code-wrap{
  position:relative;
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
  overflow:hidden;
}

.script-code{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  height:560px;
  max-height:560px;
  margin:0;
  padding:16px;
  box-sizing:border-box;
  overflow:auto;
  white-space:pre;
  overflow-wrap:normal;
  word-break:normal;
  color:#c9ced5;
  font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  tab-size:2;
}

.script-code code{
  display:block;
  width:max-content;
  min-width:100%;
  box-sizing:border-box;
  font:inherit;
}

.copy-script{
  flex:0 0 auto;
  white-space:nowrap;
}

@media(max-width:700px){
  .script-code{
    height:500px;
    max-height:500px;
    padding:14px;
    font-size:10px;
  }

  .script-head > span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
}

.project-page pre{font-family:"Geist Mono",monospace}

@media(max-width:600px){
  header{padding-top:48px}

  .wrap{width:calc(100% - 28px)}

  .project{grid-template-columns:1fr 18px}

  .project small{grid-column:1}

  .arrow{grid-column:2;grid-row:1/3}

  nav{gap:15px;flex-wrap:wrap}

  .controls>*{flex:1}

  select{min-width:0}

  input{width:auto}

  .download-item{align-items:flex-start}

  .download-button{padding:8px 10px}
}