:root{color-scheme:dark;font-family:Arial,Helvetica,sans-serif;background:#080808;color:#fff;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #9edbff;outline-offset:5px}button{color:inherit}button:disabled{cursor:default}button,input{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
#viewport{position:relative;width:100vw;height:100dvh;overflow:hidden}
#stage{position:absolute;left:50%;top:50%;width:1512px;height:982px;transform:translate(-50%,-50%) scale(var(--stage-scale,1));transform-origin:center;overflow:hidden;background:#000;isolation:isolate}
.screen,.art,.eye-darken{position:absolute;inset:0;width:100%;height:100%}.art{display:block;object-fit:fill;pointer-events:none;user-select:none}.screen{z-index:2}.eye-art{transition:filter 1.6s ease,opacity 1.2s ease}.eye-darken{background:#000;opacity:0;pointer-events:none;transition:opacity 1.5s ease;z-index:1}
.screen-reader{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.title-button{position:absolute;left:500px;top:426px;width:510px;height:140px;border:0;background:transparent;border-radius:80px;transition:box-shadow .3s}
.title-button:hover{box-shadow:0 0 60px #ffffff20}.start-prompt{position:absolute;left:0;right:0;bottom:108px;text-align:center;font-size:10px;letter-spacing:3px;color:#ffffffa0;opacity:0;transition:opacity .2s}.screen:hover .start-prompt,.screen:focus-within .start-prompt{opacity:1}
.glass{backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border:1px solid #342c28aa;box-shadow:inset 0 1px 2px #ffffff52,0 8px 25px #00000015}
.diary-panel{position:absolute;left:469px;top:275px;width:574px;height:432px;padding:45px 35px 32px;border:1px solid #322721b3;border-radius:68px;background:linear-gradient(128deg,#49342adf,#4b4844d9);backdrop-filter:blur(24px);box-shadow:inset 0 1px 2px #ffffff48,0 8px 25px #0002;color:#eceae8}
.diary-panel header{height:62px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid #cfc9c480;padding-bottom:22px}.diary-panel h2{margin:0;font-size:38px;line-height:1;font-weight:600;letter-spacing:-1.3px}.diary-panel time{padding-left:39px;margin-top:5px;border-left:1px solid #c5bfba;min-height:34px;font-size:12px;line-height:18px;text-align:right}.diary-panel p{font-size:18px;line-height:27px;margin:17px 0 0;letter-spacing:.05px}
.diary-enter{position:absolute;right:83px;bottom:57px;width:102px;height:38px;border-radius:22px;background:#9d81706b;font-size:24px;font-weight:400;color:#efe9e4;transition:background .2s}.diary-enter:hover{background:#c4a992b3}
#stage[data-stage="eye-loading"] .eye-art{filter:blur(16px);transform:scale(1.03)}#stage[data-stage="eye-loading"] .eye-darken{opacity:.31}
#stage[data-stage="black-loading"] .eye-art{filter:blur(24px);opacity:0}#stage[data-stage="black-loading"] .eye-darken{opacity:1}
#loading-animation{position:absolute;left:714px;top:449px;width:84px;height:84px;pointer-events:none}
#loading-animation .spinner{left:2px;top:2px}
#loading-animation canvas{display:block;width:84px;height:84px}
#stage[data-loading-renderer="p5"] #loading-animation .spinner{display:none}
#stage[data-loading-renderer="p5"][data-stage="eye-loading"] .eye-art,#stage[data-loading-renderer="p5"][data-stage="black-loading"] .eye-art{filter:blur(var(--loading-blur,0px));opacity:var(--loading-eye-opacity,1);transform:scale(var(--loading-zoom,1));transition:none}
#stage[data-loading-renderer="p5"][data-stage="eye-loading"] .eye-darken,#stage[data-loading-renderer="p5"][data-stage="black-loading"] .eye-darken{opacity:var(--loading-darkness,0);transition:none}
#stage:not([data-stage="start"]):not([data-stage="diary"]):not([data-stage="eye-loading"]):not([data-stage="black-loading"])>.eye-art{visibility:hidden}
.loading-screen{display:grid;place-items:center;pointer-events:none}.spinner{position:absolute;left:716px;top:451px;width:80px;height:80px;border:12px solid #555;border-top-color:#949492;border-radius:50%;box-shadow:0 0 0 1px #aaa6;animation:spin 1.1s linear infinite}.loading-label{position:absolute;top:569px;left:0;right:0;font-size:24px;text-align:center}#stage[data-stage="black-loading"] .loading-label{display:none}@keyframes spin{to{transform:rotate(360deg)}}
.birthday-hotspot{position:absolute;right:2px;top:73px;width:276px;height:74px;background:transparent;border:0;border-radius:40px}
.computer-input{position:absolute;left:665px;top:570px;width:181px;height:41px;padding:0 30px 0 16px;border-radius:25px;background:#ac9b93;color:#fff;font-size:11px;letter-spacing:.2px}.computer-input::placeholder{color:#f5f0ec}.computer-submit{position:absolute;left:814px;top:572px;width:30px;height:37px;background:transparent;border:0;font-size:16px;opacity:0;transition:opacity .2s}#computer-form:focus-within .computer-submit{opacity:.9}.error{color:#fff2ed;font-size:13px;line-height:1.4;padding:10px 15px;border-radius:12px;background:#643b32e6;box-shadow:0 3px 15px #0002}.error:empty{display:none}.login-error{position:absolute;left:555px;top:654px;width:400px;text-align:center}
.desktop-tasks{position:absolute;left:71px;top:772px;width:305px;display:grid;gap:10px}.task{height:53px;border-radius:30px;background:#a89f9be8;color:#e9e5e2;display:flex;justify-content:space-between;align-items:center;padding:0 19px;font-size:15px;text-align:left}.task:hover{background:#b5aaa4f0}.task input{appearance:none;margin:0;width:18px;height:18px;border:1px solid #e9e4df;border-radius:4px;cursor:pointer}.task input:checked{background:#dce9e6;border-color:#e7f1ed}.task input:checked:after{content:'✓';display:block;font-size:15px;line-height:17px;color:#4c7266;text-align:center}.checkbox-mark{width:18px;height:18px;border:1px solid #e9e4df;border-radius:4px;flex-shrink:0;margin-left:10px}
.photo-hotspot{position:absolute;border:0;background:transparent;border-radius:20px;transition:box-shadow .2s}.photo-hotspot:hover{box-shadow:0 0 0 3px #ffffff8c,0 12px 26px #0002}.photo-cake{left:28px;top:438px;width:235px;height:278px}.photo-cycle{left:263px;top:544px;width:224px;height:150px}.photo-movie{left:450px;top:733px;width:228px;height:150px}.photo-friends{left:708px;top:581px;width:266px;height:179px}.photo-picnic{left:1061px;top:546px;width:238px;height:159px}.photo-badge{left:1294px;top:406px;width:194px;height:296px}.photo-cooking{left:1271px;top:664px;width:182px;height:160px}.photo-beach{left:1074px;top:756px;width:230px;height:153px}
.dock{position:absolute;left:406px;bottom:3px;width:704px;height:56px;border:1px solid #827b76;border-radius:15px;display:flex;align-items:center;justify-content:space-around;padding:5px 5px;background:#938b86e6;gap:2px;box-shadow:inset 0 1px 2px #d8ceca80,0 5px 20px #0002}.dock button{position:relative;border:0;background:transparent;width:42px;height:42px;padding:0;flex-shrink:0;border-radius:10px;transition:transform .18s}.dock button:hover{transform:translateY(-7px) scale(1.1)}.dock img{display:block;width:42px;height:42px;border-radius:8px}.dock button:after{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);padding:7px 10px;border-radius:8px;background:#514943db;font-size:11px;white-space:nowrap;content:attr(aria-label);opacity:0;pointer-events:none}.dock button:hover:after{opacity:1}.dock-divider{width:1px;height:32px;background:#d3cbc24d;flex-shrink:0}.app-dot{position:absolute;bottom:-4px;left:19px;width:4px;height:4px;border-radius:50%;background:#424544}
.work-screen{background:#d9d9d9;overflow:hidden;border:1px solid #c2c2c2;border-radius:16px;color:#fff}.window-bar{position:absolute;left:0;right:0;top:0;height:32px;z-index:4;display:flex;align-items:center;gap:24px;background:#f8f8f8;color:#232323;padding:0 17px;font-size:14px;font-weight:600}.traffic-lights{display:flex;gap:8px}.traffic-lights button{width:14px;height:14px;border-radius:50%;border:0;padding:0;color:#775d4b;font-size:13px;line-height:13px;opacity:1}.traffic-lights .red{background:#ff615c}.traffic-lights .yellow{background:#ffbf30}.traffic-lights .green{background:#2cc84f}.traffic-lights button{color:transparent}.traffic-lights:hover button{color:#574932}.guide-art{position:absolute;left:390px;top:150px;width:715px;height:832px}.guide-art img{position:absolute;left:0;width:715px;display:block}.guide-top{top:0;height:620px}.guide-bottom{bottom:0;height:145px}.guide-middle{position:absolute;left:0;right:0;top:617px;height:72px;background:linear-gradient(105deg,#121b32 0%,#1c2948 37%,#5f283e 48%,#192340 62%,#151d33 100%)}
.work-input{position:absolute;left:622px;top:782px;width:272px;height:52px;border:1px solid #0a112a;border-radius:30px;background:linear-gradient(110deg,#2c354ddd,#3b3c52ee);box-shadow:inset 0 1px 2px #a7b7c044,0 7px 23px #0002;color:#fff;padding:0 42px 0 24px;font-size:22px;letter-spacing:4px}.work-submit{position:absolute;left:850px;top:787px;height:41px;width:39px;background:transparent;border:0;font-size:24px;color:#ddd}.work-help{position:absolute;top:842px;left:0;right:0;text-align:center;font-size:16px;letter-spacing:.4px}.work-error{position:absolute;left:526px;top:894px;width:460px;text-align:center;font-size:12px}.card-link{position:absolute;right:32px;top:55px;border:1px solid #c1c1c1;border-radius:20px;background:#ffffff88;backdrop-filter:blur(14px);color:#555;padding:10px 15px;font-size:13px}
.tutorial-panel{position:absolute;left:420px;top:330px;width:672px;padding:35px 40px;background:#202b3dee;border-radius:30px;border-color:#83919a6b;box-shadow:0 25px 80px #0004}.tutorial-panel small{font-size:11px;letter-spacing:2px;color:#afc4d3}.tutorial-panel h2{font-size:33px;font-weight:400;margin:16px 0}.tutorial-panel p{font-size:18px;line-height:1.6;color:#e0e5e8;margin:0 0 24px}.tutorial-next{border:1px solid #acbbc4;background:#dde6e9;color:#21303a;padding:12px 19px;border-radius:25px;font-size:15px}.work-screen:has(#tutorial-panel:not([hidden])) .guide-art,.work-screen:has(#ready-panel:not([hidden])) .guide-art{filter:blur(8px);opacity:.55}
.photo-dialog{position:absolute;inset:0;margin:auto;max-height:850px;max-width:1000px;overflow:visible;background:#b4ada5c9;border:1px solid #d1c8c0;border-radius:25px;padding:22px;backdrop-filter:blur(22px);box-shadow:0 25px 90px #0005;color:#fff}.photo-dialog::backdrop{background:#1e171388;backdrop-filter:blur(10px)}.photo-dialog img{display:block;max-width:880px;max-height:690px;object-fit:contain;border-radius:15px}.dialog-close{position:absolute;right:-13px;top:-13px;width:32px;height:32px;border-radius:50%;border:1px solid #eee;background:#766b62;color:#fff;font-size:25px;line-height:28px;z-index:2}#card-caption{padding:18px 12px 6px;display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:12px;letter-spacing:1px}#card-caption strong{grid-column:1/-1;font-size:25px;font-weight:400}#card-caption span{display:flex;gap:14px;justify-content:space-between}#card-caption b{font-weight:400;color:#fff;font-family:monospace}
.toast{position:absolute;left:50%;bottom:94px;transform:translateX(-50%);max-width:520px;padding:13px 21px;border-radius:25px;background:#433d38e6;color:#fff;font-size:14px;line-height:1.4;z-index:20;text-align:center}
#player-controls{position:fixed;right:12px;bottom:9px;z-index:50;display:flex;gap:5px;padding:4px;border:1px solid #ffffff20;border-radius:20px;background:#202020a6;backdrop-filter:blur(14px);opacity:.28;transition:opacity .2s}#player-controls:hover,#player-controls:focus-within{opacity:1}#player-controls button{background:transparent;color:#fff;border:0;border-radius:14px;padding:6px 9px;font-size:16px;display:flex;align-items:center;gap:6px}#player-controls button:hover{background:#ffffff1c}#player-controls span{font-size:11px}
#help-dialog{max-width:min(560px,90vw);padding:35px;border:1px solid #8c8175;border-radius:24px;background:#292522f5;color:#eee;box-shadow:0 20px 90px #0007}#help-dialog h2{font-weight:400;font-size:24px;margin-top:0}#help-dialog p{font-size:14px;line-height:1.8;color:#cbc4bf}#help-dialog button{float:right;border:0;background:transparent;font-size:25px;color:#eee}#help-dialog::backdrop{background:#0008;backdrop-filter:blur(7px)}
@media(max-width:600px){#player-controls span{display:none}#player-controls{bottom:5px;right:5px;opacity:.6}#help-dialog{padding:22px}#help-dialog p{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}

/* Local illustration layers keep surrounding chrome stationary. */
.eye-motion{pointer-events:none;transition:opacity .6s ease}
.eye-surface{display:block;width:1512px;height:982px}
#stage:not([data-stage="start"]):not([data-stage="diary"]) .eye-motion{opacity:0}
#diary-screen:not([hidden]){animation:screen-arrive .5s ease both}
#login-screen:not([hidden]){animation:screen-arrive .85s ease both}
@keyframes screen-arrive{from{opacity:0}to{opacity:1}}
#stage[data-stage="black-loading"] .loading-label{display:block;opacity:0;transition:opacity .4s ease}
#loading-animation{opacity:var(--loading-ring-opacity,1);transition:opacity .2s linear}
.birthday-cover{position:absolute;right:0;top:65px;width:285px;height:94px;background:linear-gradient(105deg,#efefef,#ededed);border-radius:15px 0 0 15px;box-shadow:0 0 8px 7px #efefef;opacity:1;transition:opacity .65s ease;pointer-events:none}
.birthday-hotspot{visibility:hidden;pointer-events:none}
#login-screen.birthday-visible .birthday-cover{opacity:0}
#login-screen.birthday-visible .birthday-hotspot{visibility:visible;pointer-events:auto}
.monitor-motion{position:absolute;left:260px;top:35px;width:980px;height:400px;overflow:hidden;pointer-events:none;mask-image:radial-gradient(ellipse 430px 280px at 50% 25%,#000 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 430px 280px at 50% 25%,#000 58%,transparent 100%)}
.monitor-moving{position:absolute;left:-260px;top:-35px;width:1512px;height:982px;background:url('../public/assets/opening/desktop-art.webp') center/1512px 982px;transform-origin:756px 70px;transform:perspective(1000px) translate(var(--monitor-x,0px),var(--monitor-y,0px)) rotateX(var(--monitor-rx,0deg)) rotateY(var(--monitor-ry,0deg));will-change:transform}

/* Updated seven-screen high-resolution design exports. */
.guide-art .guide-complete{top:0;width:715px;height:832px}
.work-screen{background:#d7d7d7}
.work-help{margin:0;top:842px;line-height:24px;background:#243047;left:625px;right:auto;width:266px;border-radius:12px}
.work-submit{opacity:0;transition:opacity .2s}
#work-form:focus-within .work-submit{opacity:1}
.card-link{opacity:0;transition:opacity .2s}
.card-link:hover,.card-link:focus-visible{opacity:1}
#stage[data-stage="black-loading"] .loading-label{display:block;opacity:var(--loading-ring-opacity,1)}
.loading-label{transition:opacity .3s}
#desktop-screen:not([hidden]),#work-screen:not([hidden]){animation:screen-arrive .55s ease both}
.birthday-cover{background:linear-gradient(105deg,#ededed,#ececec);box-shadow:0 0 8px 7px #ededed}
.diary-panel{background:linear-gradient(128deg,#49342ae8,#353536e8)}
#stage[data-stage="diary"] .eye-motion{transition:opacity .6s ease}
@media(prefers-reduced-motion:reduce){#desktop-screen:not([hidden]),#work-screen:not([hidden]){animation:none}}

/* Design refresh: keep existing semantic controls and event bindings. */
#diary-screen .diary-panel{opacity:0;pointer-events:none}
#diary-screen .diary-enter{color:transparent;background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
#diary-screen .diary-enter:hover{background:#ffffff12}
#diary-screen .diary-design{z-index:-1}
#desktop-screen .desktop-tasks .task{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
#desktop-screen .desktop-tasks .task>span{opacity:0}
#desktop-screen .task input:not(:checked){border-color:transparent}
#desktop-screen .dock{background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none}
#desktop-screen .dock img{opacity:0}
#desktop-screen .dock button:hover img,#desktop-screen .dock button:focus-visible img{opacity:1}
#desktop-screen .dock-divider,#desktop-screen .app-dot{visibility:hidden}
#work-screen .guide-art{display:none}
#work-screen .window-bar{background:transparent}
#work-screen .window-bar #window-title{opacity:0}
#work-screen .traffic-lights button{background:transparent}
#work-screen .work-input{background:transparent;box-shadow:none;backdrop-filter:none;border-color:transparent}
#work-screen .work-help{opacity:0;pointer-events:none}
#work-screen:has(#tutorial-panel:not([hidden])) .work-design,#work-screen:has(#ready-panel:not([hidden])) .work-design{filter:blur(8px);opacity:.55}

#diary-screen .diary-motion{z-index:0;pointer-events:none}
#diary-screen .diary-panel,#diary-screen .diary-enter{z-index:1}

/* Separate foreground typography from the moving, unobstructed eye. */
.opening-title{position:absolute;left:0;right:0;top:429px;margin:0;text-align:center;font-family:Arial,Helvetica,sans-serif;font-size:100px;line-height:130px;font-weight:700;color:#fff;letter-spacing:-3px;text-shadow:0 0 5px #fff,0 0 12px #ffffffb0;pointer-events:none}
.opening-tagline{position:absolute;left:0;right:0;bottom:70px;margin:0;text-align:center;font-size:24px;font-weight:400;pointer-events:none}
#stage[data-stage="eye-reveal"]>.eye-art{visibility:visible;filter:none;opacity:1;transform:none}
#stage[data-stage="eye-reveal"] .eye-motion,#stage[data-stage="eye-loading"] .eye-motion,#stage[data-stage="black-loading"] .eye-motion{visibility:hidden;opacity:0;transition:none}