@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');
:root{--navy:#061d69;--blue:#006fc4;--cyan:#6dffff;--desktop:#087f82;--silver:#c0c0c0;--white:#fff;--black:#080808;--shadow:#808080;--light:#fff;--font-ui:"MS Sans Serif","Tahoma","Arial",sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{height:100svh;margin:0;padding:clamp(6px,1vw,14px);color:var(--black);font-family:Arial,"Helvetica Neue",sans-serif;background:#dedede;overflow:hidden;}
.site-shell{position:relative;width:min(1680px,100%);height: calc(97svh - clamp(12px,2vw,28px));margin:0 auto;background:var(--silver);border:3px outset #fff;border-radius:clamp(18px,2.5vw,38px);box-shadow:0 18px 48px rgba(0,0,0,.2),inset 0 0 0 1px #777;overflow:visible}
.site-shell::before{content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.55);border-radius:clamp(12px,2vw,29px);pointer-events:none;z-index:20}
.site-scroll{position:absolute;inset:0;border-radius:inherit;overflow-x:hidden;overflow-y:auto;scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none}.site-scroll::-webkit-scrollbar{display:none}
a{color:inherit}
button{font:inherit}
.hero{min-height:calc(100svh - clamp(20px,4vw,56px));position:relative;display:grid;place-items:center;overflow:hidden;color:white;background:radial-gradient(circle at 50% 50%,#aaffff 0,#5eeaf1 11%,#14bddd 28%,#0874bd 52%,#073e93 76%,#041757 100%)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,transparent 20%,rgba(0,0,30,.28) 100%);pointer-events:none}
.topbar{position:absolute;z-index:2;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:24px 4vw;font-family:"VT323",monospace;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.topbar nav{display:flex;gap:28px}
.topbar a{text-decoration:none;opacity:.78;transition:opacity .2s}
.topbar a:hover{opacity:1}
.hero-copy{position:relative;z-index:1;text-align:center;text-shadow:0 2px 16px rgba(0,27,87,.18)}
.hero-copy .eyebrow{font-family:"VT323",monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;margin:0 0 20px}
h1{margin:0;font-family:"VT323",monospace;font-weight:400;font-size:clamp(68px,12vw,172px);letter-spacing:-.025em;line-height:.78}
h1 span{display:block;font-size:.22em;letter-spacing:.28em;margin-top:28px;text-transform:uppercase}
.enter{position:absolute;z-index:2;bottom:30px;left:50%;transform:translateX(-50%);font-family:"VT323",monospace;text-decoration:none;font-size:11px;letter-spacing:.18em;text-transform:uppercase;display:grid;gap:10px;justify-items:center}
.enter::after{content:"↓";font-size:19px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}

.desktop{min-height:100%;position:relative;padding: 70px 4vw 92px;background-color:var(--desktop);background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:4px 4px;font-family:var(--font-ui)}
.desktop-icons{position:sticky;top:28px;float:left;width:72px;height:max-content;margin-left:-1.8vw;display:grid;gap:20px;z-index:9}
.desktop-icon{width:72px;color:#fff;text-shadow:1px 1px #000;text-align:center;font-size:12px;cursor:pointer;border:1px solid transparent;background:none;padding:3px}
.desktop-icon:hover,.desktop-icon:focus{border:1px dotted #fff;outline:none}
.desktop-icon .pixel-icon{display:grid;place-items:center;width:36px;height:32px;margin:0 auto 5px;background:#f1d85f;border:2px outset #fff;color:#082875;font-weight:bold;box-shadow:2px 2px #003f62;text-shadow: 1px 1px #fff;}
.instagram-launcher{position:relative}.instagram-menu{display:none;position:absolute;left:80px;top:0;width:190px;padding:7px;background:var(--silver);border:2px outset #fff;box-shadow:4px 4px 0 rgba(0,0,0,.4);color:#111;text-shadow:none}.instagram-launcher:hover .instagram-menu,.instagram-launcher:focus-within .instagram-menu{display:block}.instagram-menu::before{content:"INSTAGRAM";display:block;padding:3px 6px 7px;font:13px "VT323",monospace}.instagram-menu a{display:block;padding:8px 7px;border:1px solid transparent;font:13px "VT323",monospace;text-decoration:none;white-space:nowrap}.instagram-menu a:hover,.instagram-menu a:focus{background:#000080;color:#fff;outline:none}
.windows{width:min(1080px,calc(100% - 110px));margin-left:auto;display:grid;grid-template-columns:1.02fr .98fr;gap:22px;align-items:start}
.window{background:var(--silver);border:2px outset var(--white);box-shadow:3px 3px 0 rgba(0,0,0,.38);min-width:0}
.window:nth-child(3){grid-column:1/-1}
.titlebar{height:28px;background:linear-gradient(90deg,#000080,#1084d0);color:white;display:flex;align-items:center;justify-content:space-between;padding:3px 4px 3px 7px;font-family:"VT323",monospace;font-size:18px;font-weight:400;letter-spacing:.02em;user-select:none}
.window-actions{display:flex;gap:2px}
.window-actions button{width:21px;height:20px;padding:0;background:var(--silver);border:2px outset white;color:#111;line-height:14px;font-weight:bold;pointer-events: none;}
.window-actions button:active{border-style:inset}
.menubar{height:27px;display:flex;align-items:center;gap:18px;padding:0 10px;font-family:"VT323",monospace;font-size:14px;border-bottom:1px solid #858585}
.window-body{margin:8px;padding:clamp(22px,4vw,48px);background:#c0c0c0;border:2px inset #fff;min-height:260px}
.window-body h2{font-family:Arial,sans-serif;font-size: clamp(32px,5vw,64px);letter-spacing:-.06em;line-height:.92;margin:0 0 24px;font-weight:500}
.window-body p{font-family:Arial,"Helvetica Neue",sans-serif;font-size: 13px;line-height: 1;margin:0;color: #000;}
.profile-meta{display:grid;grid-template-columns:90px 1fr;gap:7px 15px;margin-top:18px;font-size:9px}
.profile-meta dt{color:#666}.profile-meta dd{margin:0;font-weight:bold}
.profile-intro{display:grid;grid-template-columns:170px 1fr;gap:30px;align-items:start;margin-bottom:20px}.avatar-frame{background:#fff;border:3px outset #fff;padding: 3px 5px 6px 3px;box-shadow:2px 2px 0 #111;aspect-ratio:1;overflow:hidden}.avatar-frame img{width:100%;height:100%;object-fit:cover;display:block}.profile-heading{padding-top:0}.profile-heading h2{font-family:'VT323','DotGothic16',monospace;font-size: 2.8rem;letter-spacing:.01em;line-height:.75;margin-bottom:12px;text-shadow:2px 2px #fff}.profile-role{font-family:"VT323",monospace!important;font-size: 15px!important;font-weight:400!important;margin:0 0 10px!important;letter-spacing:.02em;}.profile-short{font-size:10px!important;line-height:1.55!important;max-width:420px}.profile-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.profile-actions a{background:var(--silver);border:2px outset white;padding:7px 13px;font-family:"VT323",monospace;font-size:14px;text-decoration:none}.profile-actions a:active{border-style:inset}.status-screen{margin:0 0 18px;padding:7px 10px;background:#050505;border:2px inset #fff;color:#32ff75;font-family:"VT323",monospace;font-size:13px;overflow:hidden;white-space:nowrap}.status-screen span{display:inline-block;animation:statusMove 13s linear infinite}@keyframes statusMove{from{transform:translateX(0)}to{transform:translateX(-38%)}}.about-copy{display:grid;gap:10px;border:2px inset #fff;background: #fff;padding:16px}.about-copy::before{content:"PROFILE_README.TXT";font-family:"VT323",monospace;font-size:12px}.about-copy p{font-family:Arial,"Helvetica Neue",sans-serif;font-size: 12px;line-height:1.75}.skills{display:grid;gap:14px;margin-top:25px}
.skill-row{border:2px inset #fff;padding:18px;background: #fff;}.skill-row h3{font-family:"VT323",monospace;margin:0 0 8px;font-size:24px;font-weight:400;text-transform:lowercase}.skill-row p{font-family:Arial,"Helvetica Neue",sans-serif;font-size:10px;line-height:1.75}.skill-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{background:var(--silver);border:2px outset white;padding:6px 10px;font-family:"VT323",monospace;font-size:13px}
.filterbar{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}.filterbar button{background:var(--silver);border:2px outset white;padding:7px 13px;font-family:"VT323",monospace;font-size:14px;text-transform:lowercase;cursor:pointer}.filterbar button:active,.filterbar button.active{border-style:inset;background:#000080;color:#fff}
.projects{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}

.project{position:relative;background:#ddd;border:2px outset white;text-decoration:none;overflow:hidden;aspect-ratio:1.18;animation:fileIn .45s both;animation-delay:calc(var(--i)*25ms)}

.project[hidden]{display:none}.project img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82);transition:transform .35s ease,filter .35s ease}.project:hover img{transform:scale(1.035);filter:saturate(1)}
.project-info{position:absolute;left:4px;right:4px;bottom:4px;padding:6px 8px;background:rgba(192,192,192,.94);border:2px outset white;display:flex;justify-content:space-between;gap:8px;font-family:"VT323",monospace;font-size:10px;text-transform:uppercase}.project:hover .project-info{background:#000080;color:#fff}
@keyframes fileIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.cursor{display:inline-block;width: 2px;height:1em;vertical-align:-.15em;background:#111;margin-left:5px;animation:blink .85s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.boot{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;background:#030303;color:#ddd;font:14px/1.7 monospace;transition:opacity .5s,visibility .5s;}.boot.done{opacity:0;visibility:hidden}.boot-box{width:min(500px,84vw)}.boot-line{width:0;overflow:hidden;white-space:nowrap;animation:type 1.15s steps(36) forwards}.boot-line:nth-child(2){animation-delay:.35s}.boot-line:nth-child(3){animation-delay:.7s}@keyframes type{to{width:100%}}
.hero::before{content:"";position:absolute;width:55vmax;height:55vmax;border-radius:50%;background:rgba(165,255,255,.24);filter:blur(45px);animation:breathe 5s ease-in-out infinite}@keyframes breathe{50%{transform:scale(1.12);opacity:.68}}
.window{opacity:0;transform:translateY(18px) scale(.985);transition:opacity .55s ease,transform .55s ease}.window.in-view{opacity:1;transform:none}.titlebar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);transform:translateX(-100%);animation:sheen 7s ease-in-out infinite;pointer-events:none}.titlebar{position:relative;overflow:hidden}@keyframes sheen{15%,100%{transform:translateX(100%)}}
.contact-body{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end}
.contact-link{display:inline-block;background:var(--silver);border:3px outset white;padding: 10px 19px;font-weight:bold;text-decoration:none;white-space:nowrap;font-size: 1rem;}
.contact-link:active{border-style:inset}
.taskbar{position:absolute;bottom:0;left:0;width:100%;height:42px;background:var(--silver);border-top:2px outset #fff;display:flex;align-items:center;padding: 4px 25px;gap:8px;z-index:10}
.start{height:33px;border:2px outset white;background:var(--silver);font-weight:bold;padding:0 12px;display:flex;align-items:center;gap:7px}
.start b{color:#f00;text-shadow:1px 1px #00f}.task-name{height:33px;min-width:190px;border:2px inset white;padding:6px 10px;font-size:13px;font-weight:bold}.clock{margin-left:auto;border:2px inset white;padding:6px 10px;font-size:12px}
.window.is-minimized{display:none}.window.is-closed{display:none}

/* 作品ポップアップ全体 */
.work-popup {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, 0.48);
  border-radius: inherit;
  backdrop-filter: blur(2px);
  overflow: visible;
  animation: popupBgFade 0.25s ease both;
}

.work-popup[hidden] {
  display: none;
}

/* 右側の作品ウィンドウ */
.work-popup-window {
  width: min(72%, 1040px);
  height: calc(100% - 24px);
  margin: 12px -10px 12px auto;
  display: grid;
  grid-template-rows: 30px 1fr;
  background: var(--silver);
  border: 3px outset #fff;
  /* border-radius: 30px; */
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.35);
  overflow: hidden;
  animation: popupFadeUp 0.35s ease both;
}
.work-popup-bar{display:flex;align-items:center;justify-content:space-between;padding:3px 4px 3px 14px;background:linear-gradient(90deg,#000080,#1084d0);color:#fff;font:18px "VT323",monospace}
.work-popup-close{width:23px;height:21px;padding:0;background:var(--silver);border:2px outset #fff;font:bold 12px var(--font-ui);cursor:pointer}.work-popup-close:active{border-style:inset}
.work-popup-frame{width:100%;height:100%;border:0;background:var(--desktop)}
/* 背景のフェード */
@keyframes popupBgFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ウィンドウのフェードアップ */
@keyframes popupFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
#works {
  scroll-margin-top: 20px;
}

footer{background:#050505;color:#aaa;padding:30px 4vw;font-size:11px;display:flex;justify-content:space-between;letter-spacing:.1em;text-transform:uppercase}
@media(max-width:800px){body{padding:4px}.site-shell{width: 97%;height:calc(100svh - 8px);border-radius:16px;position: absolute;top: 4px;left: 0;right: 0;}.site-shell::before{inset:5px;border-radius:11px}.site-scroll{inset:0}.desktop{padding:12px 12px 72px}.desktop-icons{top:0;float:none;width:auto;margin:0 0 12px;padding:8px;display:flex;justify-content:center;gap:8px;background:rgba(192,192,192,.96);border:2px outset #fff;box-shadow:0 3px 0 rgba(0,0,0,.25)}.instagram-menu{top:65px;left:auto;right:0}.windows{width:100%;display:block}.window{margin-bottom:16px}.window:nth-child(2){margin-left:5vw}.window:nth-child(3){margin-left:1vw}.menubar{overflow:hidden}.window-body{padding:24px 20px}.profile-intro{grid-template-columns:100px 1fr;gap:18px}.profile-role{font-size:19px}.projects{grid-template-columns:repeat(2,1fr);gap:5px}.project-info{font-size:9px}.contact-body{grid-template-columns:1fr}.task-name{min-width:0;flex:1}.clock{display:none}
	.work-popup-window{width: 100%;height: calc(80% - 12px);margin:6px -3px 6px auto;/* border-radius:18px; */position: absolute;bottom: -12px;}footer{display:block;line-height:1.8}}
@media(max-width:480px){.projects{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.window{opacity:1;transform:none}}