@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+JP:wght@400;500&display=swap');
@font-face { font-family:'PixelMplus10'; src:url('https://cdn.jsdelivr.net/gh/itouhiro/PixelMplus@master/PixelMplus10-Regular.ttf') format('truetype'); font-style:normal; font-weight:400; font-display:swap; }
html { color-scheme:dark; background:#03060c; }
body { margin:0; }
#star-select { display:flex; flex-direction:column; min-height:100svh; --ui-scale:1.2; --ink:#ffffff; --muted:#a0a8b5; --accent:#25ed78; --skin:url('/assets/0kq-skin.png'); position:relative; isolation:isolate; width:100%; background:#03060c; color:var(--ink); color-scheme:dark; font:400 calc(14px * var(--ui-scale))/1.9 'Noto Sans JP',sans-serif; }
#star-select *,#star-select *::before,#star-select *::after { box-sizing:border-box; }
#star-select :is(h1,h2,p) { margin:0; }
#star-select :is(p,span,a,h2,ul,li) { font-family:inherit; }
#star-select a { color:inherit; text-decoration:none; }
#star-select a:hover { text-decoration:underline; text-underline-offset:calc(5px * var(--ui-scale)); }
#star-select :is(a,button):focus-visible { outline:calc(2px * var(--ui-scale)) solid var(--accent); outline-offset:calc(5px * var(--ui-scale)); }
#star-select button { font:inherit; color:inherit; cursor:var(--cursor-interaction,pointer); }
#star-select .starfield { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:-1; }
#star-select .banner { display:flex; align-items:center; padding:calc(24px * var(--ui-scale)) calc(48px * var(--ui-scale)) calc(8px * var(--ui-scale)); min-height:calc(100px * var(--ui-scale)); }
#star-select .brand img { display:block; width:calc(240px * var(--ui-scale)); height:auto; }
#star-select .selection { padding:calc(32px * var(--ui-scale)) calc(48px * var(--ui-scale)) calc(44px * var(--ui-scale)); }
#star-select .selection-main { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:calc(42px * var(--ui-scale)); min-height:calc(448px * var(--ui-scale)); }
#star-select .display { position:relative; min-width:0; overflow:clip; height:calc(420px * var(--ui-scale)); display:flex; align-items:center; justify-content:center; }
#star-select .display::before,#star-select .display::after { content:''; position:absolute; width:calc(12px * var(--ui-scale)); height:calc(12px * var(--ui-scale)); border-color:#586577; border-style:solid; opacity:.7; pointer-events:none; }
#star-select .display::before { top:calc(30px * var(--ui-scale)); left:calc(18px * var(--ui-scale)); border-width:calc(1px * var(--ui-scale)) 0 0 calc(1px * var(--ui-scale)); }
#star-select .display::after { bottom:calc(30px * var(--ui-scale)); right:calc(18px * var(--ui-scale)); border-width:0 calc(1px * var(--ui-scale)) calc(1px * var(--ui-scale)) 0; }
#star-select .object-stage { width:calc(280px * var(--ui-scale)); max-width:100%; height:calc(360px * var(--ui-scale)); position:relative; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
#star-select .object-stage:active { cursor:grabbing; }
#star-select .object-content,#star-select .ghost { position:absolute; inset:0; pointer-events:none; }
#star-select .object-pivot { position:absolute; left:50%; top:50%; width:1px; height:1px; transform-style:preserve-3d; transform:scale(var(--ui-scale)); }
#star-select .object-yaw { width:1px; height:1px; transform-style:preserve-3d; transform:rotateY(var(--yaw,-45deg)); }
#star-select .rig,#star-select .cuboid { position:absolute; transform-style:preserve-3d; }
#star-select .skin-face { position:absolute; background-image:var(--skin); background-repeat:no-repeat; image-rendering:pixelated; backface-visibility:hidden; }
#star-select .project-object { position:absolute; width:196px; height:196px; left:-98px; top:-98px; transform-style:preserve-3d; }
#star-select .icon-side { position:absolute; background:var(--edge); }
#star-select .icon-front { position:absolute; inset:0; background:var(--icon) center/contain no-repeat; backface-visibility:hidden; }
#star-select .ghost { opacity:0; }
#star-select .ghost-a { filter:sepia(1) saturate(5) hue-rotate(105deg); }
#star-select .ghost-b { filter:sepia(1) saturate(5) hue-rotate(300deg); }
#star-select .glitching .object-content { animation:selection-jitter .32s steps(1,end); }
#star-select .glitching .ghost-a { animation:selection-tear-a .32s steps(1,end); }
#star-select .glitching .ghost-b { animation:selection-tear-b .32s steps(1,end); }
@keyframes selection-jitter { 0%,100% { transform:translate(0,0); } 12% { transform:translate(calc(-5px * var(--ui-scale)),0); } 27% { transform:translate(calc(4px * var(--ui-scale)),calc(1px * var(--ui-scale))); } 38% { transform:translate(calc(-2px * var(--ui-scale)),0); } 55% { transform:translate(calc(3px * var(--ui-scale)),calc(-1px * var(--ui-scale))); } 72% { transform:translate(0,0); } }
@keyframes selection-tear-a { 0%,100% { opacity:0; } 10% { opacity:.75; clip-path:inset(18% 0 66%); transform:translateX(calc(13px * var(--ui-scale))); } 28% { clip-path:inset(45% 0 39%); transform:translateX(calc(-11px * var(--ui-scale))); } 48% { clip-path:inset(64% 0 18%); transform:translateX(calc(9px * var(--ui-scale))); } 68% { opacity:.55; clip-path:inset(33% 0 60%); transform:translateX(calc(-6px * var(--ui-scale))); } 84% { opacity:0; } }
@keyframes selection-tear-b { 0%,100% { opacity:0; } 15% { opacity:.7; clip-path:inset(56% 0 33%); transform:translateX(calc(-12px * var(--ui-scale))); } 35% { clip-path:inset(24% 0 64%); transform:translateX(calc(8px * var(--ui-scale))); } 55% { clip-path:inset(43% 0 40%); transform:translateX(calc(-7px * var(--ui-scale))); } 76% { opacity:.45; clip-path:inset(70% 0 24%); transform:translateX(calc(5px * var(--ui-scale))); } 88% { opacity:0; } }
#star-select .profile { min-width:0; padding:calc(22px * var(--ui-scale)) 0; }
#star-select .role { color:var(--accent); font:calc(11px * var(--ui-scale))/1.7 'IBM Plex Mono',monospace; letter-spacing:.04em; }
#star-select .selected-name { font:400 calc(60px * var(--ui-scale))/1.12 'PixelMplus10',monospace; letter-spacing:0; margin:calc(12px * var(--ui-scale)) 0 calc(24px * var(--ui-scale)); overflow-wrap:anywhere; }
#star-select .description { position:relative; min-height:calc(122px * var(--ui-scale)); color:#d0d6df; font-size:calc(13px * var(--ui-scale)); line-height:2; }
#star-select .description ul { margin:calc(10px * var(--ui-scale)) 0 0; padding-left:calc(17px * var(--ui-scale)); list-style-type:square; }
#star-select .description li { padding-left:calc(2px * var(--ui-scale)); }
#star-select .description li::marker { color:var(--accent); font-size:calc(10px * var(--ui-scale)); }
#star-select .letter { display:inline-block; white-space:pre; vertical-align:top; }
#star-select .letter.random { color:var(--accent); }
#star-select .profile-skills { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(calc(10px * var(--ui-scale)),2vw,calc(24px * var(--ui-scale))); width:100%; max-width:calc(336px * var(--ui-scale)); list-style:none; margin:calc(22px * var(--ui-scale)) 0; padding:0; }
#star-select .profile-skills[hidden] { display:none; }
#star-select .profile-skills li { display:flex; align-items:center; justify-content:center; min-width:0; }
#star-select .profile-skills img { display:block; width:calc(36px * var(--ui-scale)); max-width:100%; height:calc(36px * var(--ui-scale)); object-fit:contain; }
/* Center the Proxmox symbol with the other logos; its wordmark sits below. */
#star-select .profile-skills img[src="/assets/skills/proxmox.png"] { transform:translateY(calc(5px * var(--ui-scale))) scale(1.45); }
#star-select .tags { display:flex; flex-wrap:wrap; gap:calc(8px * var(--ui-scale)) calc(16px * var(--ui-scale)); margin:calc(20px * var(--ui-scale)) 0; font:calc(11px * var(--ui-scale))/1.7 'IBM Plex Mono',monospace; color:#aeb8c7; }
#star-select .tags span::before { content:'/'; margin-right:calc(7px * var(--ui-scale)); color:var(--accent); }
#star-select .project-link { display:inline-flex; align-items:center; min-height:calc(44px * var(--ui-scale)); gap:calc(32px * var(--ui-scale)); border-bottom:calc(2px * var(--ui-scale)) solid var(--accent); color:var(--accent); font-size:calc(12px * var(--ui-scale)); }
#star-select .project-link::after { content:'↗'; }
#star-select .roster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:calc(12px * var(--ui-scale)); margin-top:calc(28px * var(--ui-scale)); }
#star-select .slot { position:relative; text-align:left; padding:calc(18px * var(--ui-scale)) calc(16px * var(--ui-scale)); min-width:0; border:calc(3px * var(--ui-scale)) solid #3c4859; background:transparent; min-height:calc(120px * var(--ui-scale)); }
#star-select .slot:hover { border-color:#8fa0b6; }
#star-select .slot[aria-pressed=true] { border-color:var(--accent); }
#star-select .slot-top { display:flex; align-items:center; gap:calc(12px * var(--ui-scale)); margin-bottom:calc(13px * var(--ui-scale)); }
#star-select .slot-icon { width:calc(30px * var(--ui-scale)); height:calc(30px * var(--ui-scale)); object-fit:contain; image-rendering:pixelated; }
#star-select .skin-portrait { background:var(--skin) calc(-30px * var(--ui-scale)) calc(-30px * var(--ui-scale))/calc(240px * var(--ui-scale)) calc(240px * var(--ui-scale)); }
#star-select .slot strong { font:400 calc(15px * var(--ui-scale))/1.3 'PixelMplus10',monospace; letter-spacing:0; overflow-wrap:anywhere; }
#star-select .slot-label { font:400 calc(20px * var(--ui-scale))/1.5 'PixelMplus10',monospace; color:#b1bdcd; }
#star-select .about { position:relative; display:flex; justify-content:space-between; align-items:center; gap:calc(24px * var(--ui-scale)); padding:calc(32px * var(--ui-scale)) calc(48px * var(--ui-scale)); border-top:calc(1px * var(--ui-scale)) solid #293342; }
#star-select .about h2 { font:400 calc(20px * var(--ui-scale))/1.5 'PixelMplus10',monospace; margin-bottom:calc(8px * var(--ui-scale)); }
#star-select .about p { font-size:calc(12px * var(--ui-scale)); color:var(--muted); }
#star-select .about a { flex-shrink:0; font-size:calc(12px * var(--ui-scale)); min-height:calc(44px * var(--ui-scale)); display:inline-flex; align-items:center; color:var(--accent); }
#star-select .footer { margin-top:auto; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:calc(12px * var(--ui-scale)) calc(24px * var(--ui-scale)); padding:calc(18px * var(--ui-scale)) calc(48px * var(--ui-scale)); font:calc(11px * var(--ui-scale))/1.7 'IBM Plex Mono',monospace; color:#8996a8; }
#star-select .socials { display:flex; align-items:center; gap:calc(8px * var(--ui-scale)); margin-left:auto; }
#star-select .footer-info { display:grid; gap:calc(8px * var(--ui-scale)); min-width:0; }
#star-select .legal-links { display:flex; flex-wrap:wrap; gap:calc(4px * var(--ui-scale)) calc(24px * var(--ui-scale)); font:calc(12px * var(--ui-scale))/1.8 'Noto Sans JP',sans-serif; }
#star-select .legal-links a { display:inline-flex; align-items:center; min-height:calc(44px * var(--ui-scale)); color:#aeb8c7; }
#star-select .legal-page { width:100%; max-width:calc(1040px * var(--ui-scale)); margin:0 auto; padding:calc(48px * var(--ui-scale)) calc(48px * var(--ui-scale)) calc(80px * var(--ui-scale)); }
#star-select.legal-layout .starfield { position:fixed; }
#star-select .legal-copy { color:#d0d6df; font-size:calc(15px * var(--ui-scale)); line-height:2.1; overflow-wrap:anywhere; }
#star-select .legal-copy h1 { font:400 calc(40px * var(--ui-scale))/1.5 'PixelMplus10',monospace; color:var(--ink); margin:0 0 calc(36px * var(--ui-scale)); }
#star-select .legal-copy h2 { color:var(--ink); font-size:calc(19px * var(--ui-scale)); font-weight:500; line-height:1.8; margin:calc(36px * var(--ui-scale)) 0 calc(12px * var(--ui-scale)); }
#star-select .legal-copy p { margin:0 0 calc(24px * var(--ui-scale)); }
#star-select .legal-copy a { color:var(--accent); text-decoration:underline; text-underline-offset:calc(4px * var(--ui-scale)); }
#star-select .legal-copy dl { display:grid; grid-template-columns:calc(220px * var(--ui-scale)) minmax(0,1fr); gap:0 calc(24px * var(--ui-scale)); margin:calc(32px * var(--ui-scale)) 0 0; }
#star-select .legal-copy :is(dt,dd) { margin:0; padding:calc(20px * var(--ui-scale)) 0; border-top:calc(1px * var(--ui-scale)) solid #293342; }
#star-select .legal-copy dt { color:var(--ink); font-weight:500; }
@media(max-width:672px) {
 #star-select { --ui-scale:1; }
 #star-select .legal-page { padding:calc(32px * var(--ui-scale)) calc(22px * var(--ui-scale)) calc(48px * var(--ui-scale)); }
 #star-select .legal-copy { font-size:calc(14px * var(--ui-scale)); }
 #star-select .legal-copy h1 { font-size:calc(30px * var(--ui-scale)); margin-bottom:calc(28px * var(--ui-scale)); }
 #star-select .legal-copy h2 { font-size:calc(17px * var(--ui-scale)); }
 #star-select .legal-copy dl { grid-template-columns:minmax(0,1fr); }
 #star-select .legal-copy dt { padding:calc(20px * var(--ui-scale)) 0 calc(6px * var(--ui-scale)); }
 #star-select .legal-copy dd { padding:0 0 calc(20px * var(--ui-scale)); border:0; }
}
#star-select .socials a { display:flex; align-items:center; justify-content:center; width:calc(44px * var(--ui-scale)); height:calc(44px * var(--ui-scale)); color:#ffffff; }
#star-select .socials a:hover { color:var(--accent); }
#star-select .social-mark { display:block; width:calc(21px * var(--ui-scale)); height:calc(21px * var(--ui-scale)); background:currentColor; mask:var(--mark) center/contain no-repeat; -webkit-mask:var(--mark) center/contain no-repeat; }
#star-select .accessible-copy { position:absolute; width:calc(1px * var(--ui-scale)); height:calc(1px * var(--ui-scale)); padding:0; margin:calc(-1px * var(--ui-scale)); overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@media(max-width:912px) { #star-select .banner { padding:calc(22px * var(--ui-scale)) calc(26px * var(--ui-scale)) calc(8px * var(--ui-scale)); } #star-select .selection { padding:calc(22px * var(--ui-scale)) calc(26px * var(--ui-scale)) calc(32px * var(--ui-scale)); } #star-select .selection-main { gap:calc(18px * var(--ui-scale)); } #star-select .slot { padding:calc(16px * var(--ui-scale)) calc(12px * var(--ui-scale)); } #star-select .slot-top { display:block; } #star-select .slot-icon { display:block; margin-bottom:calc(12px * var(--ui-scale)); } #star-select .about,#star-select .footer { padding-left:calc(26px * var(--ui-scale)); padding-right:calc(26px * var(--ui-scale)); } }
@media(max-width:672px) { #star-select .banner { padding:calc(22px * var(--ui-scale)) calc(22px * var(--ui-scale)) calc(8px * var(--ui-scale)); min-height:calc(86px * var(--ui-scale)); } #star-select .brand img { width:calc(200px * var(--ui-scale)); } #star-select .selection { padding:calc(10px * var(--ui-scale)) calc(22px * var(--ui-scale)) calc(30px * var(--ui-scale)); } #star-select .selection-main { display:flex; flex-direction:column; gap:0; } #star-select .display { width:100%; height:calc(320px * var(--ui-scale)); flex-shrink:0; } #star-select .object-stage { height:calc(310px * var(--ui-scale)); } #star-select .object-pivot { transform:scale(calc(.9 * var(--ui-scale))); } #star-select .profile { width:100%; padding:calc(6px * var(--ui-scale)) 0 calc(14px * var(--ui-scale)); } #star-select .selected-name { font-size:calc(50px * var(--ui-scale)); margin-bottom:calc(20px * var(--ui-scale)); } #star-select .description { min-height:calc(132px * var(--ui-scale)); } #star-select .tags { margin-top:calc(12px * var(--ui-scale)); } #star-select .roster { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:calc(18px * var(--ui-scale)); gap:calc(10px * var(--ui-scale)); } #star-select .slot { min-height:calc(112px * var(--ui-scale)); } #star-select .slot-top { display:flex; gap:calc(9px * var(--ui-scale)); } #star-select .slot-icon { flex-shrink:0; margin:0; width:calc(24px * var(--ui-scale)); height:calc(24px * var(--ui-scale)); } #star-select .skin-portrait { background-position:calc(-24px * var(--ui-scale)) calc(-24px * var(--ui-scale)); background-size:calc(192px * var(--ui-scale)) calc(192px * var(--ui-scale)); } #star-select .slot strong { font-size:calc(13px * var(--ui-scale)); } #star-select .slot-label { font-size:calc(20px * var(--ui-scale)); } #star-select .about { display:block; padding:calc(26px * var(--ui-scale)) calc(22px * var(--ui-scale)); } #star-select .about h2 { font-size:calc(20px * var(--ui-scale)); } #star-select .about a { margin-top:calc(10px * var(--ui-scale)); } #star-select .footer { padding:calc(16px * var(--ui-scale)) calc(22px * var(--ui-scale)); font-size:calc(10px * var(--ui-scale)); gap:calc(12px * var(--ui-scale)); } }
@media(prefers-reduced-motion:reduce) { #star-select .glitching :is(.object-content,.ghost-a,.ghost-b) { animation:none; } }