:root{color-scheme:light;--paper:#fff;--ink:#34363b;--lcd:#f8f9fa;--pixel:'DotGothic16','Courier New',monospace;--sans:'Noto Sans KR',Arial,sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);min-width:280px}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;font:inherit}button:focus-visible,a:focus-visible{outline:2px solid #3066b9;outline-offset:3px}button:disabled{cursor:default}a{color:inherit}.site-header{height:92px;margin:0 5%;display:flex;justify-content:space-between;align-items:center}.owner{text-decoration:none;font-size:14px;letter-spacing:-.2px}.owner span{display:block;margin-top:5px;color:#93969b;font-size:10px;letter-spacing:1px}.restart{border:0;background:none;color:#85888d;letter-spacing:1.4px;font:10px var(--sans);padding:12px}.restart span{font:18px Arial;margin-right:6px;vertical-align:-1px}.restart:hover{color:#333}
main{min-height:calc(100svh - 157px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 0 22px}.stage{width:100%;display:flex;flex-direction:column;align-items:center}.device{position:relative;isolation:isolate;width:min(680px,calc(100vw - 30px));aspect-ratio:1223/1286;flex-shrink:0}.device:before{content:'';position:absolute;z-index:-1;left:10%;right:8%;bottom:2.8%;height:13%;border-radius:50%;background:#24252a;opacity:.17;filter:blur(21px);transform:translateY(12px)}.device-photo{display:block;width:100%;height:100%;user-select:none;pointer-events:none}.lcd{position:absolute;overflow:hidden;background:#f9fafb;box-shadow:inset 0 0 4px #0005;isolation:isolate}.lcd-top{left:28.05%;top:10.03%;width:43.82%;height:31.18%}.lcd-bottom{left:28.05%;top:57.54%;width:43.82%;height:31.18%}.framebuffer{position:absolute;left:0;top:0;width:256px;height:192px;transform-origin:0 0;transform:scale(var(--sx,1),var(--sy,1));background:#f8f9fa;font-family:var(--pixel);color:#35373e;overflow:hidden}.lcd:after{position:absolute;inset:0;content:'';pointer-events:none;z-index:10;background:repeating-linear-gradient(0deg,transparent 0px,transparent 2px,#202b3710 2px,#202b3710 3px),repeating-linear-gradient(90deg,#ffffff06 0px,#ffffff06 1px,#28323b06 1px,#28323b06 2px);box-shadow:inset 0 0 3px 1px #0003}.lcd:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:11;background:linear-gradient(120deg,#ffffff19,transparent 35%,#c1ced709);opacity:.6}.hardware{position:absolute;inset:0;pointer-events:none}.hit{position:absolute;background:transparent;border:0;padding:0;pointer-events:auto;border-radius:50%;transition:background .1s}.hit:not(:disabled):hover{background:#fff2}.hit:not(:disabled):active{background:#0002;box-shadow:inset 0 2px 4px #0003}.d-up{left:10.78%;top:63.10%;width:5.5%;height:5.5%;border-radius:2px}.d-down{left:10.78%;top:70.40%;width:5.5%;height:5.5%;border-radius:2px}.d-left{left:6.65%;top:67.15%;width:5.7%;height:4.8%;border-radius:2px}.d-right{left:14.65%;top:67.15%;width:5.7%;height:4.8%;border-radius:2px}.h-x{left:82.9%;top:59.6%;width:6.3%;height:6%}.h-y{left:77.5%;top:65%;width:6.3%;height:6%}.h-a{left:88.3%;top:65%;width:6.3%;height:6%}.h-b{left:82.9%;top:70.1%;width:6.3%;height:6%}.h-start{left:77.1%;top:81.8%;width:8.4%;height:5.5%}.h-select{left:77.1%;top:87.3%;width:8.4%;height:5.5%}.stage-hint{font-size:12px;color:#92959b;margin:22px 0 0;min-height:19px;text-align:center}.key-guide{display:flex;gap:26px;margin-top:19px;color:#858991;font-size:11px}.key-guide>span{display:flex;align-items:center;gap:6px}.key-guide kbd{font:10px var(--sans);color:#747881;border:1px solid #e0e2e6;min-width:19px;padding:3px 5px;text-align:center;border-radius:3px;background:#fcfcfd}footer{min-height:65px;margin:0 5%;display:flex;justify-content:space-between;align-items:center;color:#a0a3a9;font-size:10px}
/* The interface uses a 256 × 192 coordinate space, independently of the photograph. */
.boot-logo{height:100%;position:relative;display:flex;align-items:center;justify-content:center;background:#fff}.boot-lockup{display:flex;align-items:center;gap:5px;transform:translateY(-6px);color:#424346}.boot-given{font:14px 'Michroma',Arial,sans-serif;letter-spacing:-1.2px}.boot-family{font:34px/.9 'Michroma',Arial,sans-serif;letter-spacing:-4px;margin-right:4px}.boot-squares{display:grid;gap:3px;width:16px}.boot-squares i{display:block;border:2px solid #74767a;width:16px;height:13px;border-radius:3px}.boot-squares i:last-child{border-color:#aaaeb3}.boot-fullname{position:absolute;width:100%;text-align:center;top:122px;left:0;font-size:9px;letter-spacing:.3px;color:#74767c}.boot-subtitle{position:absolute;bottom:22px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:2px;color:#a3a5ab}.boot-welcome{height:100%;background:#fff;padding:22px 13px 8px;text-align:center}.boot-welcome h1{font:11px var(--pixel);margin:0 0 16px;letter-spacing:.1px}.boot-welcome h1 span{color:#b6a44c}.boot-welcome p{font-size:10px;line-height:1.7;margin:0 0 7px}.boot-welcome .boot-owner{color:#5c79a7;font-size:12px;margin-bottom:8px}.touch-start{position:absolute;bottom:12px;left:8px;width:240px;border:0;background:none;padding:6px 0;font:9px var(--pixel);color:#757a82}.touch-start:focus-visible{outline-offset:0}.boot-copyright{font-size:8px;color:#a2a6ad;margin-top:12px}.startup .boot-lockup{animation:logo-arrive 1.4s both}.startup .boot-squares i:first-child{animation:top-square 1.25s both}.startup .boot-squares i:last-child{animation:bottom-square 1.25s both}.startup .boot-fullname{animation:fade-in 1.9s both}.startup .boot-welcome>*{animation:fade-in 1.8s both}.startup .touch-start{animation:fade-in 2s both}.flash{position:absolute;inset:0;background:#fff;pointer-events:none;z-index:20;animation:white-flash 1.7s both}
@keyframes logo-arrive{0%,12%{opacity:0;filter:blur(2px)}48%{opacity:.5}100%{opacity:1;filter:blur(0)}}@keyframes top-square{0%{transform:translateY(-40px);opacity:0}50%{opacity:1}85%,100%{transform:translateY(0);opacity:1}}@keyframes bottom-square{0%{transform:translateY(40px);opacity:0}50%{opacity:1}85%,100%{transform:translateY(0);opacity:1}}@keyframes fade-in{0%,45%{opacity:0}100%{opacity:1}}@keyframes white-flash{0%{opacity:1}30%{opacity:.5}65%,100%{opacity:0}}
.system-bar{height:18px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;background:linear-gradient(#f0f2f5,#c9cfd9);border-bottom:1px solid #9fa8b7;font-size:9px;line-height:1;color:#565d6a}.battery{font-family:Arial,sans-serif;font-size:10px;color:#626a78}.file-preview{height:158px;position:relative;background:linear-gradient(128deg,#d3d9e5,#8899b4);overflow:hidden;color:#fff;text-shadow:1px 1px #4d5e77}.archive-monogram{position:absolute;right:8px;top:15px;transform:rotate(-17deg);font:italic 90px/.95 Arial,sans-serif;font-weight:900;letter-spacing:-12px;color:#aebacf;-webkit-text-stroke:2px #eef2f7;text-shadow:3px 5px 0 #596c89,5px 7px 1px #354a69;opacity:.8}.archive-monogram em{display:block;font:900 29px Arial,sans-serif;letter-spacing:-1px;color:#456dad;-webkit-text-stroke:0;text-shadow:1px 2px #e2e7f3;text-align:right;margin:0 -4px 0 0}.preview-info{position:relative;z-index:1;padding:8px 7px;font-size:10px;line-height:1.65}.preview-icon{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:1px solid #eaf2ff;background:#4774b5;box-shadow:1px 1px 0 #677c9b;margin-bottom:8px;font:bold 18px var(--pixel);color:white;text-shadow:1px 2px #1d4076}.preview-info p{margin:1px 0;font-size:9px}.preview-info .preview-owner{margin-top:10px;font-size:10px}.system-footer{position:absolute;bottom:0;height:16px;left:0;right:0;border-top:1px solid #aab3c3;background:linear-gradient(#e8ecf3,#ccd5e2);display:flex;justify-content:space-between;align-items:center;padding:0 5px;font-size:8px;color:#59667b;text-shadow:none}.file-toolbar button,.system-footer button{font:inherit;color:inherit;background:none;border:0;padding:0 3px;min-height:15px}.file-toolbar button:hover,.system-footer button:hover{background:#c1cde0}.file-toolbar{height:19px;background:linear-gradient(#f5f5f5,#c5cbd5);display:flex;align-items:center;justify-content:space-between;padding:0 5px;border-bottom:1px solid #929aab;font-size:9px;color:#555e70}.file-head{display:grid;grid-template-columns:36px 1fr 34px;height:17px;align-items:center;background:#d9deea;border-bottom:1px solid #9ca8bd;padding:0 6px;font-size:9px;color:#5b6880}.file-list{height:140px;background:repeating-linear-gradient(0deg,#e8ecf6 0,#e8ecf6 1px,#dce3f0 1px,#dce3f0 3px);padding-right:10px;position:relative}.file-scroll{height:100%;overflow-y:auto;scrollbar-width:none}.file-scroll::-webkit-scrollbar{display:none}.file-list:after{content:'';position:absolute;right:0;top:0;bottom:0;width:9px;border-left:1px solid #b0bccf;background:linear-gradient(to bottom,#f2f4f7 0 8px,#cbd7e9 8px 132px,#f2f4f7 132px);pointer-events:none}.file-list:before{content:'';position:absolute;z-index:1;right:0;width:8px;top:calc(8px + 124px * var(--thumb-top,0%) / 100%);height:calc(124px * var(--thumb-height,100%) / 100%);background:#97b7db;pointer-events:none}.file-row{height:28px;width:100%;border:0;border-bottom:1px solid #b8c4d7;background:transparent;display:grid;grid-template-columns:31px 1fr 32px;gap:4px;align-items:center;padding:1px 5px;color:#4e5c75;font:9px var(--pixel);text-align:left}.file-row.selected{background:linear-gradient(#a7b4cc,#7c8fac);color:#fff;text-shadow:1px 1px #65758f;box-shadow:inset 0 1px #f5e8ad,inset 0 -1px #f5e8ad}.file-row:hover{background-color:#c2cde1}.file-row:focus-visible{outline:1px dotted #253d6e;outline-offset:-2px}.file-icon{width:25px;height:23px;display:flex;align-items:center;justify-content:center;border:1px solid #8099bb;background:linear-gradient(135deg,#f4f8ff,#b9cae1);box-shadow:inset 1px 1px #fff;color:#476d9c;font:bold 15px/1 var(--pixel);text-shadow:none}.file-icon.tone-violet{color:#774799;background:linear-gradient(135deg,#eee4f6,#c6b0de)}.file-icon.tone-rose{color:#bf6551;background:linear-gradient(135deg,#f9f0df,#e7c2b5)}.file-icon.tone-sand{color:#927948;background:linear-gradient(135deg,#fff8df,#dbccac)}.file-icon.tone-green{color:#4c7f4e;background:linear-gradient(135deg,#eaf5e8,#b7d6b4)}.file-icon.tone-teal{color:#3f7a82;background:linear-gradient(135deg,#e6f3f4,#aed2d6)}.file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.file-name small{display:block;font-size:7px;line-height:1.4;opacity:.85}.file-size{text-align:right;font-size:8px}.detail-hero{height:158px;background:#e4e9f1;position:relative;padding:18px 14px}.detail-hero .overline{font-size:8px;color:#6c7c96;letter-spacing:1px}.detail-hero h2{font:24px/1.2 'Michroma',Arial,sans-serif;letter-spacing:-1px;margin:16px 0 10px;color:#47648c}.detail-hero p{font-size:9px;line-height:1.6;margin:0;color:#6d7890}.project-hero h2{font-size:18px;line-height:1.25;margin:14px 0 9px}.detail-hero.tone-violet{background:#e9e3ef}.detail-hero.tone-violet h2{color:#6e567e}.detail-hero.tone-rose{background:#f3e7e3}.detail-hero.tone-rose h2{color:#9b5a4a}.detail-hero.tone-sand{background:#f1ebe0}.detail-hero.tone-sand h2{color:#847056}.detail-hero.tone-green{background:#e5efe3}.detail-hero.tone-green h2{color:#4f7a51}.detail-hero.tone-teal{background:#e2eef0}.detail-hero.tone-teal h2{color:#3f6f78}.profile-hero h2{font-size:22px}.profile-hero h2 small{display:block;font:14px var(--pixel);letter-spacing:0;margin-top:9px}.article-screen{height:157px;background:#eef1f7;padding:9px 11px;overflow:auto;scrollbar-width:thin;scrollbar-color:#abb9ce #e2e7ef;font-family:var(--sans)}.article-screen h3{font:12px/1.5 var(--pixel);margin:0 0 6px;color:#405778}.article-screen h3 small{font-size:8px;margin-left:6px;color:#8891a1}.article-screen h4{font:8px/1.5 var(--pixel);letter-spacing:1px;margin:8px 0 3px;color:#75829b}.article-screen .points{margin:0 0 7px;padding-left:10px}.article-screen .points li{font-size:8.5px;line-height:1.65;margin-bottom:4px;color:#546177}.article-screen .timeline{display:grid;grid-template-columns:28px 1fr;gap:3px 5px;margin:0 0 8px}.article-screen .timeline dt{font:9px/1.6 var(--pixel);color:#486999}.article-screen .timeline dd{margin:0;font-size:8.5px;line-height:1.6;color:#546177}.article-screen p{font-size:9px;line-height:1.75;margin:0 0 7px;color:#546177;word-break:keep-all}.article-screen .tags{font:8px/1.7 var(--pixel);padding-top:4px;border-top:1px solid #c7d0e0;color:#75829b}.article-screen .contact-address{font:11px var(--pixel);display:block;margin:13px 0;color:#486999;word-break:break-all}.copy-button{font:9px var(--pixel);padding:4px 7px;color:#4d6282;border:1px solid #94a6c1;background:linear-gradient(#fff,#d4deed);box-shadow:inset 1px 1px #fff}.article-screen .copy-status{font-size:8px;margin:5px 0;min-height:14px}.link-button{display:inline-block;margin-top:8px;font:9px var(--pixel);padding:4px 7px;color:#4d6282;border:1px solid #94a6c1;background:linear-gradient(#fff,#d4deed);box-shadow:inset 1px 1px #fff;text-decoration:none}.link-button:hover{background:#d4deed}.link-row{display:flex;gap:6px}.link-row .link-button{margin-top:0}.article-screen .tags{margin-bottom:2px}.content-nav{gap:5px}.no-js{font:14px var(--sans)}
@media(min-width:1000px) and (max-height:940px){.device{width:min(620px,calc((100svh - 240px)*.952))}.site-header{height:75px}main{min-height:calc(100svh - 130px)}footer{min-height:55px}.stage-hint{margin-top:16px}.key-guide{margin-top:12px}}
@media(max-width:700px){.site-header{height:82px;margin:0 6%}.owner{font-size:12px}.owner span{font-size:9px}.restart{font-size:9px;padding-right:0}main{min-height:calc(100svh - 150px);padding:15px 0 25px}.device{width:calc(100vw - 16px);max-width:560px}.stage-hint{font-size:11px;max-width:90%;margin-top:26px}.key-guide{gap:16px;font-size:10px;margin-top:17px}.key-guide kbd{font-size:9px;min-width:16px;padding:2px 3px}footer{margin:0 6%;gap:10px;font-size:8px;min-height:68px}footer span:last-child{max-width:145px;text-align:right;line-height:1.7}.device:before{filter:blur(13px);opacity:.12}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.flash{display:none}}