/* Joyrodev: a little neon, still a human-scale independent studio. */
:root {
  color-scheme: dark;
  --bg: #10131e;
  --ink: #e6eaf4;
  --muted: #a4adc2;
  --green: #8ce8ce;
  --line: #2b3245;
  --mint: #203b3c;
  --orange: #b3a0f6;
  --mono: 'IBM Plex Mono', monospace;
  --display: 'Space Grotesk', 'Noto Sans KR', sans-serif;
}
body {
  background: radial-gradient(ellipse 650px 480px at 91% 7%, #30234645, transparent 85%), var(--bg);
}
::selection { background: #8ce8ce; color: #111c23; }
a, button { outline-color: var(--green); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline-color: var(--green); }
.header { border-bottom-color: #30354a; }
.brand { font-family: var(--display); letter-spacing: -1.2px; }
.brand-dot { color: #8ce8ce; text-shadow: 0 0 16px #8ce8ce66; }
.brand-mark { transform: none; gap: 3px; }
.brand-mark i { background: #8ce8ce; border-radius: 2px; }
.brand-mark i:nth-child(2), .brand-mark i:nth-child(3) { background: #b1a0ef; }
nav { color: #a4adc2; }
nav a:hover, .nav-active { color: #8ce8ce; }
.contact-button { color: #cbd3e6; border-color: #41485f; border-radius: 4px; }
.contact-button:hover { border-color: #b1a0ef; background: #b1a0ef0d; }
.eyebrow { color: #a3afc6; font-family: var(--mono); font-weight: 400; letter-spacing: 1.1px; }
.studio-coordinate { color: #7f8ca8; margin-left: 3px; }
.live-dot { background: #8ce8ce; box-shadow: 0 0 8px #8ce8ce50; }
.hero h1 { font-weight: 600; color: #edf0f7; }
.underline { color: #8ce8ce; }
.underline:after { background: #8ce8ce; height: 2px; bottom: 2px; transform: none; box-shadow: 0 0 16px #8ce8ce52; }
.hero-spark { color: #b6a3ff; font-size: 37px; text-shadow: 0 0 24px #a78bfa40; }
.hero-description { color: #a4aec4; }
.primary { background: #8ce8ce; color: #112c29; border-radius: 4px; font-weight: 600; box-shadow: 0 0 22px #8ce8ce0a; }
.primary:hover { background: #a4f1dd; box-shadow: 0 0 24px #8ce8ce22; }
.text-link { color: #c0c8dc; }
.text-link span { color: #b5a0f7; }
.hero-footnote { color: #8d99b3; }
.tiny-symbol { color: #8ce8ce; }
.hero-art {
  border-radius: 10px;
  border: 1px solid #40405b;
  background-color: #171d2a;
  background-image: linear-gradient(#80b8c309 1px, transparent 1px), linear-gradient(90deg, #80b8c309 1px, transparent 1px), radial-gradient(ellipse at 90% 25%, #8e5ebf27, transparent 75%);
  background-size: 28px 28px, 28px 28px, 100% 100%;
  box-shadow: 0 22px 75px #00000024, inset 0 0 50px #9d80e005;
}
.hero-art:before, .hero-art:after { content: ''; position: absolute; width: 23px; height: 23px; pointer-events: none; border-color: #8ce8ce; border-style: solid; }
.hero-art:before { left: -1px; top: -1px; border-width: 1px 0 0 1px; border-radius: 10px 0 0; }
.hero-art:after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; border-radius: 0 0 10px; }
.art-label { color: #a5b5c9; font-family: var(--mono); letter-spacing: 1px; }
.art-label>span:last-child { color: #7e8da8; margin-left: 4px; }
.orbit { border-color: #8292c019; border-style: dashed; }
.showcase-window { background: #1b2333; border-color: #566079; border-radius: 6px; transform: rotate(-2deg); box-shadow: 0 20px 45px #00000050; }
.window-bar { background: #242b3e; border-color: #3a4258; color: #a2adc2; }
.window-dots i { background: #64718c; }
.window-dots i:first-child { background: #b8a0f0; }
.window-dots i:last-child { background: #8ce8ce; }
.showcase-body aside { background: #192331; color: #a0b1c8; border-right: 1px solid #303c50; }
.moa-word { color: #d5efeb; }
.moa-word span { background: #28493f; color: #a7f1d9; border-radius: 3px; }
.side-active { color: #b1eddb; background: #28413f; border-radius: 2px; }
.side-bottom { color: #a2b0c6; }
.showcase-heading { color: #d9e3f1; }
.showcase-heading b span { color: #8ce8ce; }
.showcase-heading>span { border-color: #46546a; color: #a6d8ce; }
.mock-search { border-color: #3a475c; background: #202b3c; color: #a0afc4; border-radius: 3px; }
.mini-bookmark { background: #202b3b; border-color: #465169; border-radius: 3px; }
.mini-bookmark b { color: #d8e1ef; }
.mini-bookmark small { color: #9caec7; }
.art-shapes { background: #294d4b; }
.art-shapes i { background: #8ce8ce; }
.art-shapes i:nth-child(2) { background: #d7e9dc; }
.art-shapes i:nth-child(3) { background: #af9ded; }
.art-type { background: #35314c; color: #d9ccff; }
.mock-link, .mock-link small { color: #9aadc4; }
.timer-float {
  border-radius: 10px;
  background: #2e2941;
  border: 1px solid #9c89cb;
  transform: rotate(2deg);
  box-shadow: 0 12px 28px #00000040, 0 0 22px #a084d00c;
  color: #d9cdef;
  padding-top: 32px;
}
.timer-float strong { font-family: var(--display); color: #ddcffb; letter-spacing: -1px; }
.timer-float small { color: #bba9d5; }
.timer-line { background: #514465; }
.timer-line:before { background: #bca6e9; }
.timer-float i { border-color: #bca6e9; }
.note-float { background: #253442; border: 1px solid #587482; border-left: 2px solid #8ce8ce; border-radius: 3px; transform: rotate(3deg); box-shadow: 0 12px 30px #00000035; }
.note-float>span { color: #9db7c4; }
.note-float p { color: #deecef; }
.note-float>div { color: #9fb7c1; }
.note-float b { color: #8ce8ce; }
.floating-star { color: #b6a3ec; transform: none; font-family: var(--mono); font-size: 30px; font-weight: 400; }
.art-caption { font-family: var(--mono); color: #8c9db6; }
.studio-strip { color: #a7b2c7; }
.studio-strip i:not(.live-dot) { color: #9080bd; }
.section-heading>p { color: #9ca9bf; }
.count { font-family: var(--mono); color: #8ce8ce; }
.filter { color: #a0adc3; border-radius: 3px; }
.filter:hover { background: #242d40; }
.filter.active { color: #a9f1de; background: #243e3e; box-shadow: inset 0 0 0 1px #548e80; }
.sample-label { color: #93a0ba; font-family: var(--mono); letter-spacing: .4px; }
.project-card { background: #171d2b; border-color: #343d53; border-radius: 7px; }
.project-card:hover { box-shadow: 0 18px 40px #00000025; border-color: #729e9d; }
.project-preview { border-bottom: 1px solid #394356; }
.project-preview.mint { background: #203c3d; }
.project-preview.peach { background: #2d2942; }
.project-preview.lavender { background: #292e4b; }
.preview-corner { font-family: var(--mono); color: #b0c3d2; letter-spacing: 1px; }
.bookmark-preview { background: #1b2b37; border: 1px solid #557a7b; border-radius: 5px; transform: rotate(-3deg); box-shadow: 0 12px 28px #00000025; }
.bookmark-preview .preview-top { color: #b6e8d9; }
.preview-top small { color: #a2b9c4; }
.focus-preview { background: #292439; border: 1px solid #76638f; border-radius: 6px; transform: rotate(2deg); box-shadow: 0 12px 28px #00000025; }
.focus-preview .preview-top { color: #c4b2db; }
.focus-ring { border-color: #4c3c64; border-left-color: #b99ce7; border-top-color: #b99ce7; border-right-color: #b99ce7; }
.focus-ring small { color: #c2b1d7; }
.focus-ring strong { color: #e0d0f4; font-family: var(--display); }
.focus-play { background: #a489ca; color: #171223; border-radius: 3px; }
.phone-preview { background: #23293d; border-color: #68708f; border-radius: 17px; transform: rotate(-4deg); box-shadow: 0 15px 30px #00000030; }
.phone-island { background: #465170; }
.phone-top { color: #b5bde1; }
.phone-title { color: #e1e5f4; }
.phone-subtitle { color: #a1b0cf; }
.mood-row { color: #879ec7; }
.mood-row span:nth-child(2) { color: #bcadf2; }
.phone-note { background: #34364f; color: #d0c8e9; border: 1px solid #5c5a7c; border-radius: 4px; transform: none; }
.phone-date { color: #b1b6d4; font-family: var(--mono); }
.note-deco { color: #af9cde; }
.project-category { color: #a1aec4; }
.project-category .demo-badge { color: #b1bdd4; border-color: #45516c; border-radius: 2px; font-family: var(--mono); }
.app-icon { border-radius: 6px; }
.app-icon.mint { background: #305549; color: #a1f1d4; }
.app-icon.peach { background: #594775; color: #dec4fd; }
.app-icon.lavender { background: #434f75; color: #d5dfff; }
.project-title h2 small { color: #97a6c3; font-family: var(--display); }
.project-description { color: #a6b2c9; }
.project-bottom { border-color: #313b50; }
.platform { color: #98aac6; }
.detail-button { color: #bbddda; }
.detail-button span { color: #8ce8ce; }
.next-project { background: #151c29; border-color: #424b64; border-radius: 5px; }
.next-icon { color: #a393d0; font-family: var(--mono); }
.next-project p { color: #b6c1d4; }
.next-project p>span { color: #94a5bf; }
.next-tag { color: #9bbfb7; font-family: var(--mono); }
.about-section { background: #151a28; }
.about-visual { border: 1px solid #373e57; border-radius: 7px; background-color: #202639; background-image: linear-gradient(#99b6d609 1px, transparent 1px), linear-gradient(90deg,#99b6d609 1px, transparent 1px); background-size: 28px 28px; }
.about-code { color: #94adc3; font-family: var(--mono); }
.about-flower { transform: translate(-50%,-50%) rotate(0deg); }
.about-flower i { background: #4c4774; border: 1px solid #9c8dc044; border-radius: 18px 3px 18px 3px; }
.about-flower i:nth-child(2), .about-flower i:nth-child(3) { background: #2a5b55; border-color: #8ce8ce44; }
.about-flower>span { font: 500 40px var(--mono); color: #d0efe7; transform: none; }
.about-sign { color: #a5b0cb; }
.about-sign b { color: #e0e6f7; font-family: var(--display); }
.about-sign>span { color: #8ce8ce; }
.about-copy>p:not(.eyebrow) { color: #a7b3ca; }
.about-values { color: #b3c8d3; }
.note-row:hover { background: #b19ee907; }
.note-row .note-type { color: #b3a7dc; }
.note-row .note-index { color: #99a7c2; font-family: var(--mono); }
.note-row .note-arrow { color: #8ce8ce; }
.contact-section h2>span { color: #ac98de; }
.contact-section>div>p:last-child { color: #a4b1c8; }
.footer>span { color: #a2aec4; }
.footer>p { color: #94a3bf; font-family: var(--mono); }
.back-top { color: #8ce8ce; background: #1a2433; border-radius: 3px; }
.skip-link { color: #132a27; }
dialog { color-scheme: dark; background: #191f2f; border-color: #4b5470; border-radius: 8px; box-shadow: 0 35px 100px #00000080; }
dialog::backdrop { background: #090b15b8; }
.dialog-close { color: #b2bdd3; }
.dialog-label { color: #8ce8ce; font-family: var(--mono); }
.dialog-intro { color: #b5c0d5; }
.dialog-features { color: #b0bed5; }
.sample-notice { background: #23353c; color: #b5cfcf; border-radius: 4px; border-left: 2px solid #72ab9c; }
.demo-area { border-color: #3d4962; background: #141b29; border-radius: 5px; }
.demo-area input, .demo-area textarea { background: #202a3c; border-color: #52637b; color: #e2eaf6; }
.demo-area input::placeholder, .demo-area textarea::placeholder { color: #a0afc6; }
.secondary { background: #31394f; color: #d0daed; }
.demo-items li { background: #243c3f; color: #d2e9e6; }
.remove-item { color: #a7cfca; }
.demo-caption, .char-count { color: #9eacc5; }
.saved-entry { background: #35304c; color: #dfd5f6; }
.mood-picker button { background: #232c40; border-color: #4a5572; color: #bdb3e2; }
.mood-picker button[aria-pressed=true] { background: #51426c; border-color: #bda6e7; color: #f0e7ff; }
.toast { background: #8ce8ce; color: #112d27; border-radius: 4px; }
.projects .project-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
.projects .project-preview.game-preview { height: auto; padding: 0; aspect-ratio: 16 / 9; display: block; }
.game-preview { position: relative; overflow: hidden; background: #1e3240; }
.game-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.cover-expedition { object-position: center 60%; }
.game-preview:hover .game-cover { transform: scale(1.025); }
.game-image-label { position: absolute; top: 12px; left: 12px; background: #101820cc; color: #eef7fa; border: 1px solid #c8e2ec44; border-radius: 3px; font-size: 8px; padding: 5px 7px; }
.game-launch-icon { position: absolute; bottom: 12px; right: 12px; display: grid; place-content: center; width: 27px; height: 27px; color: #fff; border: 1px solid #ffffff70; border-radius: 4px; background: #10212d99; font-size: 17px; }
.monster-art { position: absolute; inset: 10% 12%; display: flex; align-items: center; justify-content: center; gap: 4%; filter: drop-shadow(0 6px 5px #1a412a55); }
.monster-art img { width: 39%; height: 90%; object-fit: contain; }
.monster-art span { font-size: 26px; color: #fffde3; text-shadow: 1px 2px #476a38; }
.game-live { display: flex; align-items: center; gap: 5px; font: 8px var(--mono); color: #a8d7ca; }
.game-live .live-dot { width: 4px; height: 4px; }
.app-icon.ocean { background: #294f69; color: #a4e8f8; }
.project-links { display: flex; align-items: center; gap: 17px; }
.play-button { color: #152c29; background: #8ce8ce; border-radius: 3px; display: inline-flex; align-items: center; gap: 12px; padding: 9px 12px; font-size: 10px; font-weight: 600; transition: background .2s; }
.play-button:hover { background: #b4f4e3; }
.play-button span { font-size: 15px; }
.game-detail-image { width: 100%; aspect-ratio: 16 / 9; border: 1px solid #49526c; border-radius: 5px; margin: 20px 0; }
.game-detail-image .game-launch-icon { display: none; }
.mine-gallery { position: absolute; inset: 4% 8%; display: flex; justify-content: center; gap: 6%; }
.mine-gallery img { display: block; width: 44%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px #07071255); }
.app-icon img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.app-icon:has(img) { display: block; overflow: hidden; }
.game-live.released { color: #a6efce; font: 500 9px var(--font); border: 1px solid #4a806f; border-radius: 3px; padding: 3px 5px; }
.store-download { display: flex; align-items: center; gap: 9px; background: #8ce8ce; color: #122f29; border: 1px solid #a5f0db; border-radius: 4px; padding: 11px 12px; margin: 0 0 17px; transition: background .2s; }
.store-download:hover { background: #b2f5e1; }
.store-symbol { font-size: 29px; line-height: 1; }
.store-wordmark { display: flex; flex-direction: column; gap: 3px; }
.store-wordmark strong { font: 600 15px var(--display); }
.store-wordmark small { font-size: 8px; color: #285b4f; }
.store-action { margin-left: auto; font-size: 10px; white-space: nowrap; }
.project-body .project-description { margin-bottom: 20px; }
.project-body .project-bottom { margin-top: auto; }
.play-button.web-play { color: #bed9d5; background: #263e40; border: 1px solid #466d68; }
.play-button.web-play:hover { background: #34514e; }
@media(max-width:560px) { .projects .project-grid { grid-template-columns: minmax(0,1fr); gap: 21px; } .project-links { gap: 15px; } .play-button { padding: 9px 11px; } .game-image-label { font-size: 7px; } }
.header { height: 84px; }
.projects.section { padding-top: 38px; padding-bottom: 48px; }
.projects .section-heading h1 { margin: 10px 0 8px; font-size: 36px; line-height: 1.5; letter-spacing: -1.6px; font-weight: 600; }
.collection-intro { color: #a4b1c8; font-size: 12px; line-height: 1.8; }
.projects-toolbar { margin: 23px 0 20px; }
.projects .project-preview { height: 195px; }
@media (max-width:850px) { .projects .section-heading h1 { font-size: 30px; } .projects .project-preview { height: 185px; } }
@media (max-width:560px) { .header { height: 72px; } .projects.section { padding-top: 27px; padding-bottom: 35px; } .projects .section-heading h1 { font-size: 27px; letter-spacing: -1.4px; margin: 9px 0 8px; } .collection-intro { font-size: 10px; max-width: 290px; } .projects-toolbar { margin: 19px 0 18px; } .projects .project-preview { height: 195px; } .projects .phone-preview { height: 205px; margin-top: 45px; } }
@media (max-width:1150px) { .timer-float { padding-top: 24px; } .hero-spark { font-size: 30px; } .studio-coordinate { display: none; } }
@media (max-width:850px) { .timer-float { padding-top: 30px; } .studio-coordinate { display: inline; } }
@media (max-width:560px) { .timer-float { padding-top: 20px; } .hero-spark { font-size: 25px; } .underline:after { height: 2px; bottom: 0; } .hero-art { border-radius: 7px; } .hero-art:before { border-radius: 7px 0 0; } .hero-art:after { border-radius: 0 0 7px; } .eyebrow { letter-spacing: .8px; } .studio-coordinate { display: none; } .art-label { letter-spacing: .5px; } .art-label>span:last-child { margin-left: 0; } .floating-star { font-size: 26px; } }