body{margin:0;background:#F4F4F1;color:#000;font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}a:hover{color:inherit;opacity:.75}
a:focus-visible,button:focus-visible{outline:3px solid var(--ac,#F4A13A);outline-offset:3px}
button{font:inherit}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px));box-sizing:border-box}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.ln{display:block;overflow:hidden;padding-block:.08em;margin-block:-.08em}
.ch{display:inline-block}
.cd{font-family:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace}
.cd .p{color:#8C8C85}.cd .k{color:var(--ac,#F4A13A)}.cd .s{color:#F4F4F1}.cd .pr{color:#C9C9C2}.cd .tg{color:#F07A3A}.cd .cm{color:#7E7E77}
.caret{display:inline-block;width:.5em;height:1.15em;vertical-align:-.22em;margin-left:1px;background:var(--ac,#F4A13A);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pop{transition:opacity .45s ease,transform .5s cubic-bezier(.2,.7,.2,1),background-color .6s ease}
.pop.off{opacity:0;transform:translateY(10px)}
.fresh{background:rgba(244,161,58,.16)}
.px{font-family:"Press Start 2P",ui-monospace,monospace;-webkit-font-smoothing:none;font-smooth:never}
.seg{flex:1 1 0;background:#1E1E1C}
.seg.on{background:var(--ac,#F4A13A)}
.blink-soft{animation:blink 1.1s steps(1) infinite}
.spin{animation:spin .9s linear infinite}
.demo-open{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;height:44px;margin-top:6px;padding:0 18px;background:transparent;color:#000;border:2px solid #000;border-radius:999px;font-size:15px;font-weight:600;cursor:pointer;transition:background-color .2s,color .2s}
.demo-open:hover{background:#000;color:#F4F4F1}
.demo-close{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px;background:#F4F4F1;color:#000;border:0;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer}
.demo-scroll{overflow-y:auto;overscroll-behavior:contain}
.fx-btn{display:inline-flex;align-items:center;height:48px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;text-decoration:none}
.opt{appearance:none;-webkit-appearance:none;border:2px solid #000;background:transparent;color:#000;border-radius:14px;padding:12px 16px;min-height:56px;font-size:16px;font-weight:600;text-align:left;cursor:pointer;transition:background-color .2s,color .2s}
.opt:hover{background:rgba(0,0,0,.07)}
.opt.sel{background:#000;color:#F4F4F1}
.opt.chip{border-radius:999px;min-height:48px;padding:10px 20px}
.fld{width:100%;box-sizing:border-box;border:2px solid #000;background:rgba(255,255,255,.5);border-radius:12px;padding:14px 16px;font-family:inherit;font-size:16px;line-height:1.5;color:#000}
.fld::placeholder{color:#55554F}
.fld:focus-visible{outline:3px solid #000;outline-offset:2px}
.online{display:inline-block;width:8px;height:8px;border-radius:50%;background:#4CC97A;box-shadow:0 0 0 0 rgba(76,201,122,.6);animation:onl 2s ease-out infinite}
@keyframes onl{0%{box-shadow:0 0 0 0 rgba(76,201,122,.6)}100%{box-shadow:0 0 0 8px rgba(76,201,122,0)}}
.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 18px;border:0;border-radius:999px;background:#F4F4F1;color:#000;font-size:15px;font-weight:600;white-space:nowrap;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hint.dark{background:#000;color:#F4F4F1}
.hint.inline{position:static;transform:none;align-self:flex-start;box-shadow:none;height:40px}
.hint-dot{width:8px;height:8px;border-radius:50%;background:var(--ac,#F4A13A);animation:hp 1.4s ease-out infinite}
@keyframes hp{0%{box-shadow:0 0 0 0 rgba(244,161,58,.7)}100%{box-shadow:0 0 0 9px rgba(244,161,58,0)}}
@media (prefers-reduced-motion:reduce){.hint-dot{animation:none}}
.skill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:999px;border:1.5px solid #3A3A36;font-size:15px;font-weight:500;color:#F4F4F1;transition:border-color .35s,background-color .35s,opacity .35s}
.skill .ic{width:22px;height:22px;border-radius:50%;background:var(--ac,#F4A13A);display:inline-flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.skill.off{opacity:.3;border-style:dashed}
.skill.off .ic{transform:scale(0)}
.skill.pop{border-color:var(--ac,#F4A13A);background:rgba(244,161,58,.16)}
.lv-wrap{position:relative}
.lv-track{position:absolute;top:23px;left:calc((100% - 96px) / 10);right:calc((100% - 96px) / 10);height:2px;background:#D9D9D3}
.lv-fill{position:absolute;left:0;top:0;height:100%;width:calc(var(--p,100) * 1%);background:var(--ac,#F4A13A)}
.lvmap{list-style:none;margin:0;padding:0;position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.lv{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;transition:opacity .4s}
.lv.off{opacity:.35}
.lv-node{position:relative;z-index:1;width:48px;height:48px;box-sizing:border-box;border-radius:50%;background:#F4F4F1;border:2px solid #D9D9D3;display:flex;align-items:center;justify-content:center;margin-bottom:8px;font-family:"Archivo",sans-serif;font-stretch:125%;font-weight:800;font-size:18px;color:#8C8C85;transition:background-color .4s,border-color .4s,color .4s,box-shadow .4s}
.lv.on .lv-node{background:#000;border-color:#000;color:var(--ac,#F4A13A)}
.lv.cur .lv-node{background:var(--ac,#F4A13A);border-color:var(--ac,#F4A13A);color:#000;box-shadow:0 0 0 7px rgba(244,161,58,.25)}
.here{display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:6px 12px;border-radius:999px;background:#000;color:#F4F4F1;font-size:13px;font-weight:600}
@media (max-width:899px){.lvmap{grid-template-columns:minmax(0,1fr);gap:32px}.lv{align-items:flex-start;text-align:left;padding-left:72px;min-height:48px;position:relative}.lv-node{position:absolute;left:0;top:0;margin:0}.lv-track{left:23px;right:auto;top:24px;bottom:24px;width:2px;height:auto}.lv-fill{width:100%;height:calc(var(--p,100) * 1%)}}
@media (prefers-reduced-motion:reduce){.online{animation:none}.skill,.skill .ic,.lv,.lv-node{transition:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.startbtn{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease,background-color .25s ease}
.startbtn:hover{transform:scale(1.04);border-color:var(--ac,#F4A13A)!important;box-shadow:0 0 0 6px rgba(244,161,58,.12),0 0 44px rgba(244,161,58,.35);background:#1C1408!important}
.startbtn:active{transform:scale(.98)}
.ring{position:absolute;top:0;left:0;width:100%;height:100%;box-sizing:border-box;border-radius:50%;border:2px solid var(--ac,#F4A13A);animation:ring 2s cubic-bezier(.2,.6,.3,1) infinite}
.ring.r2{animation-delay:1s}
@keyframes ring{0%{transform:scale(1);opacity:.7}100%{transform:scale(2.1);opacity:0}}
.shine{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:999px;pointer-events:none;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);background-size:250% 100%;animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%,55%{background-position:150% 0}100%{background-position:-50% 0}}
@media (prefers-reduced-motion:reduce){.ring,.shine{animation:none;opacity:0}.startbtn{transition:none}}
.proc-flow{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);align-items:stretch}
.link{position:relative;min-height:48px}
.link .bar{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;background:#2A2A27;transition:background-color .4s}
.link.done .bar{background:var(--ac,#F4A13A)}
.link .dot{position:absolute;top:50%;left:0;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--ac,#F4A13A);opacity:0}
.link.flow .dot{opacity:1;animation:fx .55s linear infinite}
@keyframes fx{from{left:0}to{left:calc(100% - 10px)}}
@keyframes fy{from{top:0}to{top:calc(100% - 10px)}}
@media (max-width:1099px){.proc-flow{grid-template-columns:minmax(0,1fr)}.link{min-height:56px}.link .bar{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;margin:0 0 0 -1px}.link .dot{left:50%;top:0;margin:0 0 0 -5px}.link.flow .dot{animation-name:fy}}
@media (prefers-reduced-motion:no-preference){.sun{animation:set 1.6s cubic-bezier(.2,.7,.2,1) both}@keyframes set{from{transform:translateY(-14%)}to{transform:translateY(0)}}}
@media (prefers-reduced-motion:reduce){.pop{transition:none}.caret{animation:none}.blink-soft{animation:none}.link.flow .dot{animation:none;left:50%}}