@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
:root{color-scheme:light;--chrome:#c6bba1;--chrome-mid:#b0a58d;--bevel-light:#ede2c7;--bevel-shadow:#716653;--bevel-dark:#3e382f;--ink:#352f25;--muted:#776b57;--paper:#e3dac4;--folder:#ceaf70;--folder-light:#ecd19a;--folder-dark:#a68c58;--icon-edge:#473e2c;--screen:#514c39;--screen-ink:#d7d1a6;--title:#62523a;--title-end:#8b7957;--title-ink:#f3e4c7;--desktop-ink:#e4d6b6;--selection:#7c6749;--selection-ink:#fff1d3;--wall:#493f32;--pixel:'Pixelify Sans','Courier New',monospace;--mono:'IBM Plex Mono','Courier New',monospace;--ui:Tahoma,Verdana,Arial,sans-serif}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
body{background:var(--wall);font:12px var(--ui);color:var(--ink)}
button,input,textarea{font:inherit;color:inherit}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{cursor:pointer}
a{color:inherit}
button{border-radius:0}
button:focus-visible,a:focus-visible{outline:1px dotted currentColor;outline-offset:-5px}
input:focus-visible,textarea:focus-visible{outline:2px solid var(--selection);outline-offset:1px}
button:disabled{opacity:.5;cursor:default}
[hidden]{display:none!important}
::selection{background:var(--selection);color:var(--selection-ink)}
.svg-library,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.pixel-icon{width:24px;height:24px;display:block;flex-shrink:0;shape-rendering:crispEdges;image-rendering:pixelated}
.wallpaper{position:fixed;inset:34px 0 0;background:var(--wall);z-index:-1}
.wallpaper>div{position:absolute;inset:0;transition:opacity .25s}
.wallpaper-keep{opacity:0}
.wallpaper-scene{position:absolute;inset:0;background-size:cover;background-position:var(--scene-position,70%) top;image-rendering:pixelated}
.dune-city{background-image:url('assets/dune-city-cross.png?v=2')}
.keep-city{background-image:url('assets/keep-city-cross.png')}
.dune-room{background-image:url('assets/dune-office-cross.png')}
.keep-room{background-image:url('assets/keep-office-cross.png?v=2')}
.wallpaper-room{opacity:0;transition:opacity 2.4s cubic-bezier(.4,0,.2,1)}
[data-wallpaper-transition=manual] .wallpaper-room{transition-duration:.76s;transition-timing-function:cubic-bezier(.22,1,.36,1)}
[data-wallpaper-scene=room] .wallpaper-room{opacity:1}
.desktop-topbar{height:34px;position:fixed;inset:0 0 auto;z-index:10000;display:flex;align-items:center;justify-content:space-between;padding:0 13px;color:var(--desktop-ink);background:color-mix(in srgb,var(--wall) 88%,transparent);border-bottom:1px solid #ffffff15;font:12px var(--pixel);letter-spacing:.3px}
.os-name{display:flex;gap:10px;align-items:center}
.os-name svg{width:12px;height:12px;shape-rendering:crispEdges}
.owner-name{font:10px var(--mono);opacity:.7;letter-spacing:0}
.topbar-divider{opacity:.3}
.desktop-controls{display:flex;align-items:center;gap:12px}
.scene-switch{display:flex;align-items:center;gap:2px;padding-right:10px;border-right:1px solid #ffffff25}
.scene-switch button{display:grid;place-items:center;width:26px;height:26px;padding:0;border:1px solid transparent;background:none;color:var(--desktop-ink)}
.scene-switch button:hover{background:#ffffff12;border-color:#ffffff35}
.scene-switch button:active{background:#ffffff22}
.scene-switch svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:square;stroke-linejoin:miter}
.theme-switch{display:flex;height:23px;gap:3px}
.theme-switch button{font:12px var(--pixel);padding:2px 12px;border:1px solid transparent;color:var(--desktop-ink);background:none}
.theme-switch button[aria-pressed=true]{border-color:currentColor;background:#ffffff0c}
.theme-switch button:hover{background:#ffffff12}
#workspace{position:fixed;inset:34px 0 47px;isolation:isolate;overflow:hidden}
.desktop-icons{position:absolute;top:20px;left:18px;display:grid;grid-template-rows:repeat(5,89px);grid-auto-flow:column;grid-auto-columns:103px;gap:12px 16px;z-index:1}
.desktop-icon{border:0;background:transparent;width:103px;min-height:89px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;padding:5px 3px;text-decoration:none;color:var(--desktop-ink);position:relative}
.icon-art{display:block;position:relative;height:53px;width:55px}
.icon-art>.pixel-icon{width:52px;height:52px;filter:drop-shadow(2px 3px 0 #0004)}
.icon-label{display:inline-block;font:14px/1.1 var(--pixel);text-align:center;padding:3px 4px;border:1px solid transparent;text-shadow:1px 1px 0 #251f1bb5;max-width:103px;overflow-wrap:break-word}
.desktop-icon:hover .icon-label{background:#ffffff0c}
.desktop-icon.selected .icon-label,.desktop-icon:focus-visible .icon-label{background:var(--selection);color:var(--selection-ink);border:1px dotted var(--selection-ink)}
.desktop-icon:focus-visible{outline:none}
.desktop-icon.selected .icon-art{filter:brightness(.9)}
.folder-badge{position:absolute;right:7px;bottom:7px;font:18px/1 var(--pixel);color:var(--icon-edge);text-shadow:1px 1px var(--folder-light)}
.paintings .folder-badge{font-size:22px;bottom:5px;right:5px}
.shortcut-arrow{position:absolute;bottom:2px;left:2px;background:var(--paper);color:var(--ink);border:1px solid var(--icon-edge);font:12px/11px Arial;width:13px;height:13px;text-align:center}
.desktop-caption{position:absolute;bottom:30px;right:28px;color:var(--desktop-ink);opacity:.5;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none;text-shadow:1px 1px #0008;font:12px var(--pixel);letter-spacing:1px}
.desktop-caption small{font:8px var(--mono);letter-spacing:0}
.noscript-message{padding:20px;background:var(--paper);position:relative;margin:20px;z-index:5}
.raised{border:0;background:var(--chrome);box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark),inset 2px 2px #ffffff28,inset -2px -2px var(--bevel-shadow);color:var(--ink);padding:8px 14px;min-height:30px;text-decoration:none;display:inline-flex;justify-content:center;align-items:center;gap:7px}
.raised:active,.raised.active{box-shadow:inset 1px 1px var(--bevel-dark),inset -1px -1px var(--bevel-light),inset 2px 2px var(--bevel-shadow);padding-top:9px;padding-bottom:7px}
.raised:hover{background:color-mix(in srgb,var(--chrome) 86%,var(--bevel-light))}
.inset{border:0;box-shadow:inset 1px 1px var(--bevel-shadow),inset -1px -1px var(--bevel-light),inset 2px 2px var(--bevel-dark),inset -2px -2px var(--chrome-mid)}

/* Real, independent desktop windows. */
#windows{position:absolute;inset:0;pointer-events:none}
.app-window{position:absolute;pointer-events:auto;background:var(--chrome);padding:4px;box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark),inset 2px 2px var(--chrome-mid),inset -2px -2px var(--bevel-shadow),4px 5px 0 #0004;min-width:340px;min-height:230px;max-width:calc(100% - 8px);max-height:calc(100% - 8px);resize:both;overflow:hidden;display:flex;flex-direction:column;outline:none}
.app-window.active{box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark),inset 2px 2px var(--chrome-mid),inset -2px -2px var(--bevel-shadow),6px 7px 0 #0004}
.window-titlebar{height:29px;min-height:29px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 4px 3px 6px;color:color-mix(in srgb,var(--title-ink) 65%,var(--chrome));background:var(--chrome-mid);font:14px var(--pixel);cursor:grab;touch-action:none;user-select:none}
.active .window-titlebar{background:linear-gradient(90deg,var(--title),var(--title-end));color:var(--title-ink)}
.window-title{display:flex;align-items:center;gap:7px;min-width:0}
.window-title>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-title .pixel-icon{width:19px;height:19px}
.window-controls{display:flex;gap:3px;flex-shrink:0}
.window-controls button{height:21px;width:24px;display:flex;align-items:center;justify-content:center;padding:0;background:var(--chrome);color:var(--ink);border:0;box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark),inset -2px -2px var(--bevel-shadow)}
.window-controls button:active{box-shadow:inset 1px 1px var(--bevel-dark),inset -1px -1px var(--bevel-light)}
.control-min{height:2px;width:9px;background:currentColor;align-self:flex-end;margin-bottom:6px}
.control-max{width:11px;height:10px;border:1px solid currentColor;border-top-width:3px}
.control-close{font:bold 19px/1 Arial}
.window-controls [data-control=close]{margin-left:2px}
.window-content{min-height:0;flex:1;overflow:auto;display:flex;flex-direction:column;scrollbar-color:var(--chrome-mid) var(--paper);scrollbar-width:thin}
.window-status{display:flex;gap:4px;margin:4px 0 0;padding-bottom:1px;font:10px var(--ui);color:var(--muted);flex-shrink:0;min-height:22px}
.window-status>span{box-shadow:inset 1px 1px var(--bevel-shadow),inset -1px -1px var(--bevel-light);padding:5px 8px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.window-status>span:last-child{flex:0 1 42%}
.resize-grip{pointer-events:none;position:absolute;right:4px;bottom:4px;height:10px;width:10px;background:repeating-linear-gradient(135deg,transparent 0 2px,var(--bevel-shadow) 2px 3px,var(--bevel-light) 3px 4px);clip-path:polygon(100% 0,100% 100%,0 100%)}
.dragging .window-titlebar{cursor:grabbing}
.app-window.maximized{inset:4px!important;width:calc(100% - 8px)!important;height:calc(100% - 8px)!important;resize:none}
.maximized .resize-grip{display:none}
.maximized .control-max{box-shadow:2px -2px 0 -1px var(--chrome),3px -3px 0 -1px currentColor;width:9px;height:8px;margin-top:2px}
.notepad-toolbar{display:flex;justify-content:space-between;padding:7px 8px;font-size:10px;flex-shrink:0}
.notepad-toolbar>span:last-child{color:var(--muted)}
.notepad-paper{background:var(--paper);padding:22px 23px;flex:1;font:11px/1.65 var(--mono);overflow:auto}
.readme-intro{display:flex;align-items:center;gap:16px}
.readme-intro .pixel-icon{width:48px;height:48px}
.readme-intro h2{font:24px/1 var(--pixel);margin:0 0 8px}
.readme-intro p{font:10px var(--mono);margin:0;color:var(--muted)}
.readme-divider{white-space:nowrap;overflow:hidden;color:var(--chrome-mid);margin-top:16px;line-height:1}
.notepad-paper>p{margin:12px 0}
.notepad-paper .desktop-instructions{font-size:10px;color:var(--muted);margin:14px 0 18px}
.touch-instruction{display:none}
.readme-actions{display:flex;gap:9px;font:11px var(--ui)}
.readme-actions .raised{padding:7px 13px}
.explorer-toolbar{display:flex;align-items:center;gap:9px;padding:7px 3px;flex-shrink:0}
.small-button{font-size:10px;padding:6px 10px;min-height:27px;flex-shrink:0}
.address{display:flex;gap:7px;align-items:center;flex:1;min-width:0;font-size:10px}
.address>span:last-child{padding:5px 8px;background:var(--paper);box-shadow:inset 1px 1px var(--bevel-shadow),inset -1px -1px var(--bevel-light);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:10px var(--mono)}
.explorer-body{display:flex;flex:1;min-height:0;gap:5px}
.file-list{width:148px;flex-shrink:0;padding:14px 8px 10px;background:var(--chrome);display:flex;flex-direction:column;gap:5px;font-size:11px}
.tree-root{display:flex;align-items:center;gap:5px;font-size:10px;padding:0 0 12px;white-space:nowrap}
.tree-root .pixel-icon{width:20px;height:20px}
.file-tab{display:flex;align-items:center;gap:7px;border:0;background:none;padding:7px 6px;text-align:left;font-size:11px;white-space:nowrap}
.file-tab .pixel-icon{width:20px;height:20px}
.file-tab.selected{background:var(--selection);color:var(--selection-ink);outline:1px dotted var(--selection-ink);outline-offset:-2px}
.file-tab:not(.selected):hover{background:#ffffff20}
.file-count{font:9px var(--mono);color:var(--muted);margin-top:auto;padding:14px 5px 0}
.file-content{background:var(--paper);flex:1;overflow:auto;padding:24px 28px;min-width:0;scrollbar-color:var(--chrome-mid) var(--paper);scrollbar-width:thin}
.document-heading{display:flex;align-items:center;gap:8px;font:10px var(--mono);color:var(--muted);border-bottom:1px solid var(--chrome-mid);padding-bottom:15px}
.document-heading .pixel-icon{width:27px;height:27px}
.document-heading small{display:block;font:9px var(--ui);margin-top:4px}
.file-content h2{font:28px/1.1 var(--pixel);font-weight:500;margin:21px 0 10px}
.project-summary{font:12px/1.5 var(--mono);margin-bottom:14px}
.project-description{font-size:12px;line-height:1.75;max-width:540px;color:var(--muted)}
.file-content dl{font-size:11px;margin:22px 0}
.file-content dl>div{display:grid;grid-template-columns:57px 1fr;gap:8px;margin:10px 0;line-height:1.6}
.file-content dt{font:10px/1.6 var(--mono);color:var(--muted)}
.file-content dd{margin:0}
.project-link-row{display:flex;gap:12px;align-items:flex-start;flex-direction:column;margin-top:22px}
.status-tag{font:9px var(--mono);padding:4px 7px;background:var(--chrome);border:1px solid var(--chrome-mid)}
.project-domain{font:9px/1.6 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.link-button{font-size:11px}
.preview-caption{font:10px/1.7 var(--mono);color:var(--muted);margin:20px 0 0}
.pixel-canvas{height:280px;position:relative;background:var(--chrome);background-image:radial-gradient(var(--chrome-mid) 1px,transparent 1px);background-size:8px 8px;border:2px solid var(--bevel-shadow);max-width:530px;color:var(--ink)}
.canvas-bar{display:block;padding:7px 9px;border-bottom:1px solid var(--bevel-shadow);font:10px var(--mono);background:var(--paper)}
.canvas-note{position:absolute;top:22%;left:7%;width:44%;padding:12px;background:var(--paper);border:1px solid var(--bevel-shadow);box-shadow:2px 2px var(--bevel-shadow)}
.canvas-note>b{font:9px var(--mono);color:var(--muted)}
.canvas-note>p{font:17px/1.3 var(--pixel);margin:12px 0 4px}
.canvas-landscape{position:absolute;right:7%;top:19%;height:30%;width:31%;background:var(--folder-light);border:1px solid var(--bevel-shadow);box-shadow:2px 2px var(--bevel-shadow);overflow:hidden}
.canvas-landscape:after{content:'';position:absolute;inset:20% -10% -10%;background:var(--folder-dark);clip-path:polygon(0 80%,15% 80%,15% 60%,30% 60%,30% 30%,50% 30%,50% 50%,70% 50%,70% 70%,100% 70%,100% 100%,0 100%)}
.canvas-bookmark{position:absolute;right:6%;bottom:19%;padding:12px;background:var(--screen);color:var(--screen-ink);font:12px/1.6 var(--pixel);width:33%;border:1px solid var(--bevel-dark)}
.canvas-swatches{position:absolute;left:10%;bottom:22%;display:flex;gap:6px;padding:8px;border:1px solid var(--bevel-shadow);background:var(--paper)}
.canvas-swatches i{height:15px;width:15px;background:var(--folder)}
.canvas-swatches i:nth-child(2){background:var(--folder-dark)}
.canvas-swatches i:nth-child(3){background:var(--folder-light)}
.canvas-search{position:absolute;bottom:13px;left:0;right:0;text-align:center;font:10px var(--mono)}
.pixel-gallery{height:280px;position:relative;background:var(--paper);border:2px solid var(--bevel-shadow);max-width:530px;overflow:hidden}
.pixel-gallery>span{display:block;font:25px var(--pixel);padding:18px 20px}
.pixel-painting{position:absolute;top:29%;bottom:17%;width:31%;border:6px solid var(--chrome);outline:1px solid var(--bevel-shadow);background:var(--folder-light);overflow:hidden;box-shadow:3px 4px var(--chrome-mid)}
.pixel-painting.p1{left:13%}
.pixel-painting.p2{right:13%;background:var(--folder-dark)}
.pixel-painting i{position:absolute;inset:30% -10% 0;background:var(--screen);clip-path:polygon(0 50%,15% 50%,15% 30%,40% 30%,40% 0,70% 0,70% 30%,90% 30%,90% 50%,100% 50%,100% 100%,0 100%)}
.pixel-painting b{position:absolute;height:25px;width:25px;right:12px;top:12px;background:var(--paper)}
.p2 i{background:var(--folder);transform:rotate(180deg)}
.p2 b{background:var(--screen);top:auto;bottom:12px}
.pixel-gallery>small{position:absolute;right:20px;bottom:16px;font:9px var(--mono)}
.guestbook-body{padding:18px;overflow:auto;flex:1}
.guestbook-heading{display:flex;gap:12px;align-items:center}
.guestbook-heading>.pixel-icon{width:38px;height:38px}
.guestbook-heading h2{font:25px var(--pixel);margin:0 0 5px}
.guestbook-heading p{font-size:10px;color:var(--muted);margin:0;line-height:1.5}
.guestbook-notes{margin:18px 0 15px;background:var(--paper);max-height:140px;overflow:auto;padding:12px}
.guestbook-notes article{padding:8px 0;border-bottom:1px dotted var(--chrome-mid)}
.guestbook-notes article:last-child{border:0}
.guestbook-notes article>p{font:11px/1.6 var(--mono);margin:0 0 6px;white-space:pre-wrap;overflow-wrap:anywhere}
.guestbook-notes article>span{font:9px var(--mono);color:var(--muted)}
.empty-note{margin:5px 0;font:10px var(--mono);color:var(--muted)}
form label{display:block;margin:13px 0 6px;font-size:11px}
input,textarea{border:0;padding:9px 10px;width:100%;background:var(--paper);font:11px/1.5 var(--mono);border-radius:0}
textarea{resize:vertical;max-height:200px}
input::placeholder,textarea::placeholder{color:var(--muted)}
.form-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.form-bottom>span{font:9px var(--mono);color:var(--muted)}
.form-bottom .raised{font-size:11px}
#form-error,#note-status{font-size:11px;line-height:1.5;margin:12px 0 0}
#note-status:empty{display:none}
#form-error{color:#8a302a}
.display-body{padding:20px;overflow:auto;flex:1}
.display-body fieldset{border:1px solid var(--bevel-shadow);box-shadow:1px 1px var(--bevel-light);margin:0;padding:15px 12px}
.display-body legend{font-size:11px;padding:0 6px}
.wallpaper-options{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.wallpaper-options button{padding:5px 5px 10px;border:1px solid var(--chrome-mid);background:none;text-align:left;min-width:0}
.wallpaper-options button[aria-pressed=true]{outline:1px dotted var(--ink);outline-offset:2px;background:var(--paper)}
.wallpaper-sample{display:block;width:100%;aspect-ratio:16/10;background-size:cover;background-position:70%;image-rendering:pixelated;border:1px solid var(--bevel-shadow)}
.sample-dune{background-image:url('assets/dune-city-cross.png?v=2')}
.sample-keep{background-image:url('assets/keep-city-cross.png')}
.wallpaper-cycle{display:flex;align-items:center;gap:7px;margin-top:15px;line-height:1.5}
.wallpaper-cycle input{width:14px;height:14px;flex:none;padding:0;margin:0;accent-color:var(--title)}
.wallpaper-cycle+.settings-hint{margin:10px 0 14px}
.wallpaper-options strong{font:15px var(--pixel);display:block;margin:10px 4px 5px}
.wallpaper-options small{display:block;font-size:9px;line-height:1.5;margin:0 4px;color:var(--muted)}
.settings-hint{font-size:10px;color:var(--muted);margin:22px 0 17px}
.display-body>.raised{float:right;min-width:75px}

/* Taskbar and Start menu stay above application windows. */
.taskbar{height:47px;position:fixed;inset:auto 0 0;z-index:20000;display:flex;align-items:center;gap:8px;padding:6px;background:var(--chrome);box-shadow:inset 0 1px var(--bevel-light),inset 0 3px var(--chrome-mid);user-select:none}
.start-button{height:33px;min-width:85px;font:18px var(--pixel);padding:5px 12px;font-weight:500;gap:8px}
.start-button svg{height:16px;width:16px;shape-rendering:crispEdges}
.start-button[aria-expanded=true]{box-shadow:inset 1px 1px var(--bevel-dark),inset -1px -1px var(--bevel-light),inset 2px 2px var(--bevel-shadow)}
.taskbar-grip{height:28px;width:3px;box-shadow:inset 1px 0 var(--bevel-light),inset -1px 0 var(--bevel-shadow);flex-shrink:0}
.task-buttons{display:flex;align-items:center;gap:5px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.task-button{height:32px;min-width:110px;max-width:190px;flex:0 1 175px;justify-content:flex-start;padding:5px 10px;font-size:11px;gap:6px}
.task-button span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-button .pixel-icon{width:20px;height:20px}
.task-button.active{background:var(--paper);background-image:repeating-conic-gradient(#ffffff15 0% 25%,transparent 0% 50%);background-size:2px 2px;font-weight:bold;padding:5px 10px}
.system-tray{display:flex;align-items:center;height:32px;padding:0 4px 0 12px;gap:10px;box-shadow:inset 1px 1px var(--bevel-shadow),inset -1px -1px var(--bevel-light);flex-shrink:0}
.tray-light{width:5px;height:5px;background:var(--screen);border:1px solid var(--bevel-shadow)}
#clock{font:10px var(--mono);white-space:nowrap}
#show-desktop{height:26px;width:18px;border:0;border-left:1px solid var(--bevel-shadow);background:none;margin-left:2px;color:var(--muted);font-size:16px}
#show-desktop:hover{background:var(--paper)}
.start-menu{position:fixed;left:5px;bottom:47px;width:264px;z-index:20001;padding:4px;background:var(--chrome);box-shadow:inset 1px 1px var(--bevel-light),inset -1px -1px var(--bevel-dark),3px -3px 0 #0004}
.start-banner{background:linear-gradient(90deg,var(--title),var(--title-end));color:var(--title-ink);padding:18px 14px;display:flex;align-items:baseline;justify-content:space-between;margin-bottom:5px}
.start-banner>span{font:24px var(--pixel)}
.start-banner>small{font:8px var(--mono)}
.start-item{width:100%;display:flex;gap:12px;align-items:center;text-align:left;padding:10px 13px;background:none;border:0;color:var(--ink);font:12px var(--ui);text-decoration:none}
.start-item .pixel-icon,.start-item>svg{width:27px;height:27px;shape-rendering:crispEdges}
.start-item:hover,.start-item:focus-visible{background:var(--selection);color:var(--selection-ink)}

[data-theme=keep]{color-scheme:dark;--chrome:#485567;--chrome-mid:#3c4859;--bevel-light:#8190a2;--bevel-shadow:#263244;--bevel-dark:#111c2b;--ink:#d0d9e2;--muted:#9caebe;--paper:#2b3748;--folder:#9baec0;--folder-light:#c8d3da;--folder-dark:#6b8199;--icon-edge:#182536;--screen:#1b2a3b;--screen-ink:#b9cad5;--title:#283b54;--title-end:#60758d;--title-ink:#e0e8ed;--desktop-ink:#bdcbd5;--selection:#607a96;--selection-ink:#f0f4f7;--wall:#202c3d}

[data-theme=keep] .wallpaper-dune{opacity:0}
[data-theme=keep] .wallpaper-keep{opacity:1}
[data-theme=keep] .folder-badge{color:#31445d}
[data-theme=keep] .start-button{color:#dce5e9}
[data-theme=keep] #form-error{color:#ebbbb1}

@media(min-width:1600px){.desktop-icons{top:30px;left:25px;grid-template-rows:repeat(5,100px);gap:14px 22px}
.desktop-icon{width:106px}
.icon-art,.icon-art>.pixel-icon{width:58px;height:58px}
.icon-art{height:60px}
.icon-label{font-size:16px}
.app-window{font-size:13px}
}

@media(max-width:900px){.owner-name{display:none}
.desktop-icons{left:10px;grid-auto-columns:88px;gap:7px}
.desktop-icon{width:88px}
.icon-label{font-size:13px;max-width:88px}
.desktop-caption{right:20px;font-size:10px}
.desktop-caption small{font-size:7px}
.task-button{flex-basis:135px;min-width:90px}
.file-list{width:125px}
.file-content{padding:20px}
.window-titlebar{font-size:13px}
}

@media(max-width:639px){.desktop-topbar{padding:0 10px;height:33px}
.os-name{gap:7px}
.topbar-divider{display:none}
.theme-switch button{padding-inline:10px}
.desktop-icons{top:18px;left:12px;grid-template-rows:repeat(4,91px);grid-auto-columns:94px;gap:12px 8px}
.desktop-icon{width:94px}
.icon-label{font-size:14px;max-width:94px}
.icon-art,.icon-art>.pixel-icon{width:49px;height:49px}
.icon-art{height:51px}
#workspace{top:33px;bottom:48px}
.wallpaper-scene{--scene-position:80%}
.wallpaper{top:33px}
.keep-room{--scene-position:85%}
.desktop-caption{bottom:20px;right:16px;font-size:9px;gap:4px;opacity:.65}
.desktop-caption small{font-size:6px}
.app-window{left:6px!important;top:8px!important;width:calc(100% - 12px)!important;height:calc(100% - 16px)!important;min-width:0;min-height:0;resize:none;max-width:none;max-height:none}
.app-window.maximized{inset:0!important;width:100%!important;height:100%!important}
.window-titlebar{height:33px;min-height:33px;cursor:default}
.window-controls button{width:26px;height:25px}
.window-titlebar{font-size:14px}
.window-title{gap:5px}
.window-title .pixel-icon{width:17px;height:17px}
.window-controls{gap:2px}
.window-content{overflow:auto}
.notepad-paper{padding:23px 18px}
.readme-intro{gap:13px}
.readme-intro h2{font-size:23px}
.readme-intro p{font-size:9px;line-height:1.6}
.notepad-paper>p{font-size:11px}
.notepad-paper .desktop-instructions{font-size:10px}
.notepad-paper .desktop-instructions br{display:none}
.desktop-instructions{font-size:0!important}
.desktop-instructions .mouse-instruction{display:none}
.desktop-instructions .touch-instruction{display:block;font-size:10px}
.taskbar{gap:5px;height:48px;padding:6px 4px}
.start-button{min-width:67px;font-size:17px;padding:5px 8px;gap:5px}
.start-button svg{width:13px;height:13px}
.taskbar-grip{display:none}
.task-button{flex:0 0 100px;min-width:100px;font-size:10px;padding:5px 7px}
.task-button.active{padding:5px 7px}
.task-button .pixel-icon{width:18px;height:18px}
.system-tray{gap:5px;padding-left:7px}
.tray-light{display:none}
#clock{font-size:8px}
#show-desktop{margin-left:0;width:16px}
.explorer-toolbar{flex-wrap:wrap;gap:7px;padding:7px 2px}
.address{font-size:9px}
.address>span:first-child{display:none}
.address>span:last-child{font-size:9px;padding:7px}
.explorer-body{flex-direction:column;min-height:0;overflow:hidden}
.file-list{width:auto;flex-direction:row;align-items:center;gap:6px;padding:1px 4px 6px}
.tree-root,.file-count{display:none}
.file-tab{font-size:10px;padding:6px 9px}
.file-tab .pixel-icon{width:18px;height:18px}
.file-content{padding:22px 19px;flex:1;min-height:0}
.file-content h2{font-size:27px}
.project-description{font-size:11px;line-height:1.8}
.project-summary{font-size:11px}
.project-domain{font-size:8px}
.file-content dl{font-size:10px}
.file-content dl>div{grid-template-columns:50px 1fr}
.pixel-canvas,.pixel-gallery{height:290px}
.canvas-note{width:46%;padding:10px}
.canvas-note>p{font-size:15px}
.canvas-bookmark{font-size:11px;padding:10px}
.canvas-swatches{gap:4px;padding:6px}
.canvas-swatches i{width:12px;height:12px}
.canvas-search{font-size:8px}
.guestbook-body{padding:18px 14px}
.display-body{padding:19px 13px}
.display-body fieldset{padding:13px 8px}
.wallpaper-options{gap:10px}
.wallpaper-options small{font-size:8px}
.settings-hint{line-height:1.6}
.resize-grip{display:none}
.start-menu{max-height:calc(100svh - 90px);overflow:auto;width:258px;bottom:48px}
.start-item{padding-block:9px}
.about-window .window-content{min-height:0}
.window-status{font-size:9px}
}

@media(pointer:coarse){.mouse-instruction{display:none}
.touch-instruction{display:inline}
.window-controls button{min-width:27px}
.icon-label{padding-block:5px}
}

@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* Crisp mono text, with motion confined to brief entrances and the scenery. */
:root{--ui:var(--mono);--muted:#625540;--desktop-ink:#fff0d0;--mote:#f4d6a1;--haze:#dc9c4e}
[data-theme=keep]{--ink:#e2e9f0;--muted:#bdcddd;--desktop-ink:#e5f1fc;--mote:#cce5ff;--haze:#92bfe9}
body{font-weight:400;text-rendering:optimizeLegibility}
.desktop-topbar,.theme-switch button{font:500 12px var(--mono);letter-spacing:0}
.owner-name{opacity:.9}
.icon-label{font:500 12px/1.45 var(--mono);background:color-mix(in srgb,var(--wall) 80%,transparent);text-shadow:none;padding:3px 5px}
.desktop-icon:hover .icon-label{background:var(--selection);color:var(--selection-ink)}
.desktop-icon .icon-art{transition:transform .2s ease}
.desktop-icon:hover .icon-art,.desktop-icon:focus-visible .icon-art{transform:translateY(-3px)}
.desktop-caption{opacity:.85;font:500 11px var(--mono);letter-spacing:.2px}
.desktop-caption small{font-size:9px}
.window-titlebar{font:500 12px var(--mono)}
.notepad-paper{font:13px/1.75 var(--mono)}
.readme-intro h2,.file-content h2,.guestbook-heading h2{font:500 23px/1.3 var(--mono);letter-spacing:-.7px}
.readme-intro p{font:11px/1.6 var(--mono)}
.notepad-paper .desktop-instructions{font-size:11px;line-height:1.7}
.project-summary{font-size:13px;line-height:1.7}
.project-description{font-size:12px;line-height:1.85}
.window-status{font-size:10px;color:var(--ink)}
.start-button{font:500 15px var(--mono)}
.start-banner>span{font:500 21px var(--mono)}
.wallpaper-options strong{font:500 14px var(--mono)}
.motion-setting{display:flex;gap:9px;align-items:center;font-size:11px;margin:18px 0 7px;cursor:pointer}
.motion-setting input{width:15px;height:15px;margin:0;accent-color:var(--selection);flex-shrink:0}
.motion-note{font-size:10px;line-height:1.6;color:var(--muted);margin:0 0 10px}
.settings-hint{margin:12px 0}

.ambient{position:fixed;inset:34px 0 47px;pointer-events:none;overflow:hidden;z-index:0;contain:strict}
.ambient-haze{position:absolute;inset:-15%;background:radial-gradient(ellipse at 75% 70%,color-mix(in srgb,var(--haze) 17%,transparent),transparent 55%),radial-gradient(ellipse at 25% 20%,color-mix(in srgb,var(--haze) 10%,transparent),transparent 45%);animation:haze-drift 28s ease-in-out infinite alternate}
.ambient-particles{position:absolute;inset:0}
.ambient-particles i{position:absolute;left:var(--x);top:var(--y);width:2px;height:2px;background:var(--mote);opacity:0;box-shadow:0 0 5px color-mix(in srgb,var(--mote) 35%,transparent);animation:mote-drift var(--duration) var(--delay) ease-in-out infinite}
.ambient-particles i:nth-child(3n){width:3px;height:3px}
[data-theme=keep] .ambient-haze{opacity:.75}
@keyframes haze-drift{from{transform:translate(-2%,1%);opacity:.55}to{transform:translate(3%,-2%);opacity:1}}
@keyframes mote-drift{0%{transform:translate(0,25px);opacity:0}25%{opacity:.4}65%{opacity:.55}100%{transform:translate(var(--drift),-90px);opacity:0}}
@keyframes text-reveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes text-arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@keyframes cursor-goodbye{0%,45%{opacity:1}46%,70%{opacity:0}71%,85%{opacity:1}100%{opacity:0}}
@media(prefers-reduced-motion:no-preference){
  html:not([data-motion=off]) .app-window:not([hidden]) .readme-intro h2,
  html:not([data-motion=off]) .app-window:not([hidden]) .file-content h2,
  html:not([data-motion=off]) .app-window:not([hidden]) .guestbook-heading h2{animation:text-reveal .7s .12s steps(18,end) backwards}
  html:not([data-motion=off]) .readme-intro h2:after{content:'';display:inline-block;width:.48em;height:2px;margin-left:3px;background:var(--muted);animation:cursor-goodbye 2.4s forwards}
  html:not([data-motion=off]) .notepad-paper>p,
  html:not([data-motion=off]) .project-summary{animation:text-arrive .45s .28s ease-out backwards}
  html:not([data-motion=off]) .notepad-paper>p:nth-of-type(2){animation-delay:.4s}
  html:not([data-motion=off]) .desktop-caption{animation:text-arrive .8s .4s ease-out backwards}
}
html[data-motion=off] *,html[data-motion=off] *:before,html[data-motion=off] *:after{animation:none!important}
html[data-motion=off] .ambient,html[data-motion=off] .readme-intro h2:after{display:none}
html[data-motion-paused=true] *,html[data-motion-paused=true] *:after{animation-play-state:paused!important}
@media(max-width:639px){
  .readme-intro h2{font-size:20px}
  .readme-intro{gap:10px}
  .readme-intro .pixel-icon{width:36px;height:36px}
  .readme-intro p{font-size:10px}
  .notepad-paper>p,.project-summary,.project-description{font-size:12px}
  .desktop-instructions .touch-instruction{font-size:11px}
  .desktop-caption{font-size:9px}
  .desktop-caption small{font-size:8px}
  .window-titlebar{font-size:11px}
  .start-button{font-size:13px}
  .ambient-particles i:nth-child(n+11){display:none}
}
@media(prefers-reduced-motion:reduce){.ambient,.readme-intro h2:after{display:none}}

/* Match background-size: cover and its horizontal crop, so stars stay in sky. */
.wallpaper-scene{overflow:hidden}
.sky-canvas{position:absolute;top:0;left:var(--scene-position,70%);width:max(100%,calc((100vh - 34px)*1.777));aspect-ratio:1672/941;transform:translateX(calc(-1 * var(--scene-position,70%)));pointer-events:none;opacity:1;transition:opacity 2s ease}
.sky-stars{position:absolute;inset:0}
.sky-stars i{position:absolute;width:3px;height:3px;background:var(--mote);opacity:.25;animation:star-twinkle var(--twinkle-duration) var(--twinkle-delay) ease-in-out infinite}
.sky-stars i:after{content:'';position:absolute;inset:-2px;background:var(--mote);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%);opacity:.45}
.shooting-star{position:absolute;top:5%;left:38%;width:6%;height:2px;opacity:0;transform:rotate(18deg);transform-origin:right center;background:linear-gradient(90deg,transparent,var(--mote));animation:shooting-star 23s 4s linear infinite}
.shooting-star:after{content:'';position:absolute;right:0;top:-1px;width:3px;height:3px;background:var(--mote)}
.shooting-star.second{left:49%;top:3%;width:4%;animation-duration:37s;animation-delay:15s}
@keyframes star-twinkle{0%,36%,68%,100%{opacity:.18}49%{opacity:.9}56%{opacity:.4}}
@keyframes shooting-star{0%{opacity:0;transform:translate(0,0) rotate(18deg)}1%{opacity:.8}5%{opacity:0;transform:translate(15vw,4.8vw) rotate(18deg)}100%{opacity:0;transform:translate(15vw,4.8vw) rotate(18deg)}}
[data-wallpaper-scene=room] .sky-canvas{opacity:0}
[data-wallpaper-scene=room] .sky-canvas *{animation-play-state:paused}
[data-wallpaper-transition=manual] .sky-canvas{transition-duration:.3s}
html[data-motion=off] .sky-canvas{display:none}
@media(max-width:639px){.sky-canvas{width:max(100%,calc((100vh - 33px)*1.777))}}
@media(prefers-reduced-motion:reduce){.sky-canvas{display:none}}

/* Discoveries live in the existing desktop, without changing its chrome. */
.terminal-screen{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--screen);color:var(--screen-ink);padding:19px 20px;font:12px/1.75 var(--mono)}
.terminal-output{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--chrome-mid) var(--screen)}
.terminal-output p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 13px}
.terminal-command{color:var(--bevel-light)}
.terminal-welcome{padding-bottom:12px;border-bottom:1px dotted var(--chrome-mid)}
.terminal-form{display:flex;align-items:center;gap:9px;margin-top:12px;border-top:1px solid var(--chrome-mid);padding-top:10px}
.terminal-form label{margin:0;white-space:nowrap;font:inherit}
.terminal-form input{min-width:0;flex:1;padding:4px 2px;background:transparent;color:inherit;font:inherit;box-shadow:none;outline-offset:2px;caret-color:currentColor}
.terminal-enter{background:none;color:inherit;border:1px solid var(--chrome-mid);padding:3px 8px;min-height:30px}
.terminal-hint{font-size:9px;opacity:.8;margin:10px 0 0}
.letter-paper{flex:1;overflow:auto;background:var(--paper);padding:26px 28px;font:12px/1.9 var(--mono)}
.letter-subject{font-weight:500;font-size:14px;margin:0 0 23px;max-width:28ch;line-height:1.6}
.letter-paper p{margin-bottom:18px}
.letter-signature{color:var(--muted);font-size:11px}
.letter-clue{border-top:1px dashed var(--chrome-mid);padding-top:18px;color:var(--muted);font-size:10px;margin-top:25px}
.desktop-icon[data-open=letter] .icon-art{opacity:.78}
.artwork-plane{position:absolute;top:0;left:var(--scene-position,70%);width:max(100%,calc((100vh - 34px)*1.7768331562));aspect-ratio:1672/941;transform:translateX(calc(-1 * var(--scene-position,70%)));pointer-events:none}
.room-light{opacity:0;transition:opacity 1s cubic-bezier(.22,1,.36,1);background:radial-gradient(ellipse at 73.2% 64.3%,transparent 0 .7%,#17100b35 2.7%,#17100b85 12%,#17100b9c 65%)}
.keep-room .room-light{background:radial-gradient(ellipse at 78% 64%,transparent 0 .7%,#02071830 2.7%,#02071880 12%,#02071899 65%)}
[data-lamp-dune=off] .dune-room .room-light,[data-lamp-keep=off] .keep-room .room-light{opacity:1}
#scene-interactions{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:0}
#desk-lamp{position:absolute;left:71.1%;top:59.2%;transform:translate(-50%,-50%);width:4.2%;height:8%;min-width:44px;min-height:44px;border:0;background:transparent;pointer-events:auto;border-radius:50%;color:var(--desktop-ink)}
[data-theme=keep] #desk-lamp{left:75.5%;top:60.3%}
#desk-lamp:hover,#desk-lamp:focus-visible{background:radial-gradient(ellipse,#ffe1a515,transparent 70%)}
#desk-lamp:focus-visible{outline:1px dotted var(--desktop-ink);outline-offset:2px}
.lamp-hint{position:absolute;top:100%;left:50%;transform:translateX(calc(-50% + var(--hint-shift,0px)));padding:4px 6px;background:var(--wall);font:9px/1.4 var(--mono);white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
#desk-lamp:hover .lamp-hint,#desk-lamp:focus-visible .lamp-hint{opacity:1}
html[data-motion=off] .room-light{transition:none}
@media(max-width:639px){
  .artwork-plane{width:max(100%,calc((100vh - 33px)*1.7768331562))}
  #scene-interactions{--scene-position:80%}
  [data-theme=keep][data-wallpaper-scene=room] #scene-interactions{--scene-position:85%}
  .letter-paper{padding:23px 20px}
  .terminal-screen{padding:17px 14px;font-size:12px}
}

/* Coda: an easy-to-find third place, with messages instead of a night sky. */
[data-theme=coda]{color-scheme:dark;--chrome:#4c5952;--chrome-mid:#39473f;--bevel-light:#87958b;--bevel-shadow:#24312b;--bevel-dark:#101b17;--ink:#e1e8df;--muted:#b2c2b6;--paper:#26352e;--folder:#9faf98;--folder-light:#d1d8bc;--folder-dark:#697d6c;--icon-edge:#1b2b23;--screen:#12241d;--screen-ink:#c2d6bd;--title:#233d31;--title-end:#647b68;--title-ink:#ecf0de;--desktop-ink:#e1e9d4;--selection:#637e6a;--selection-ink:#fffbed;--wall:#101c19;--mote:#b2d6c5;--haze:#bc8e55}
.notes-wallpaper{position:fixed;inset:34px 0 0;z-index:-1;background:#101c19;opacity:0;transition:opacity .25s;pointer-events:none}
.notes-city{background-image:url('assets/notes-cavern-cross.png')}
.notes-room{background-image:url('assets/notes-study-cross.png')}
[data-theme=coda] .notes-wallpaper{opacity:1}
[data-theme=coda] .wallpaper-dune{opacity:0}
.sample-notes{background-image:url('assets/notes-cavern-cross.png')}
.notes-room .room-light{background:radial-gradient(ellipse at 86.6% 65.4%,transparent 0 .7%,#06141030 2.7%,#06141085 12%,#06141099 65%)}
[data-lamp-coda=off] .notes-room .room-light{opacity:1}
[data-theme=coda] #desk-lamp{left:87.2%;top:57.3%}
.wallpaper-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.wallpaper-options small{font-size:9px;overflow-wrap:anywhere}
html:not([data-theme=coda]) .desktop-icon[data-open=notes]{display:none}
#world-notes{position:absolute;inset:0;pointer-events:none}
.world-note{position:absolute;transform:translate(-50%,-50%);width:44px;height:44px;border:0;background:transparent;padding:0;pointer-events:auto;color:#091b25}
.note-glyph{position:absolute;inset:8px;display:grid;place-items:center;background:#7ad5f5;font:600 14px var(--mono);clip-path:polygon(50% 0,59% 26%,79% 10%,76% 37%,100% 35%,82% 54%,98% 75%,70% 72%,66% 100%,50% 80%,31% 100%,30% 72%,3% 78%,18% 54%,0 34%,26% 37%,20% 10%,41% 26%);transition:background .2s,transform .2s}
.world-note:hover .note-glyph,.world-note:focus-visible .note-glyph{transform:scale(1.16)}
.world-note:focus-visible{outline:1px dotted #d4f5ff;outline-offset:-3px}
.found-notes-layout{display:flex;flex-direction:column;flex:1;min-height:0;gap:5px}
.found-note-paper{flex:1;min-width:0;overflow:auto;display:flex;flex-direction:column;background:var(--paper);padding:27px}
.found-note-location{font:10px/1.6 var(--mono);color:var(--muted);margin:0}
#found-note-text{font:400 23px/1.6 var(--mono);margin:35px 0 25px;overflow-wrap:anywhere}
.found-note-caption{font:10px/1.7 var(--mono);color:var(--muted)}
.notes-source{margin-top:auto;padding-top:25px;font:9px/1.8 var(--mono);color:var(--muted);text-underline-offset:3px}
@media(max-width:639px){
  .notes-wallpaper{top:33px}
  .notes-room{--scene-position:90%}
  .notes-city{--scene-position:100%}
  [data-theme=coda][data-wallpaper-scene=room] #scene-interactions{--scene-position:90%}
  [data-theme=coda][data-wallpaper-scene=city] #scene-interactions{--scene-position:100%}
  .desktop-controls{gap:6px}
  .scene-switch{padding-right:5px}
  .scene-switch button{width:23px}
  .theme-switch button{padding-inline:7px;font-size:11px}
  .wallpaper-options{gap:6px}
  .wallpaper-options small{font-size:8px}
  .found-notes-layout{flex-direction:column}
  .found-note-list{width:100%;flex-direction:row;flex-wrap:wrap;padding:5px;gap:2px;overflow:visible}
  .found-note-list button{padding:7px;font-size:10px}
  .found-note-paper{padding:25px 20px}
  #found-note-text{font-size:23px}
  [data-theme=coda] .desktop-caption{max-width:90%;font-size:8px}
}

/* Coda is discovered through its desktop executable or terminal command. */
html:not([data-coda-unlocked=true]) [data-theme-choice=coda],
html:not([data-coda-unlocked=true]) .start-item[data-open=notes]{display:none}
html:not([data-coda-unlocked=true]) .wallpaper-options{grid-template-columns:repeat(2,minmax(0,1fr))}
.os-name>img{image-rendering:pixelated;flex-shrink:0}
.coda-launcher{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);z-index:1}
.coda-launcher img{image-rendering:pixelated;width:48px;height:48px}
.coda-launcher:hover,.coda-launcher:focus-visible{background:#ffffff12;outline:1px dotted var(--desktop-ink)}
@media(max-width:639px){
  .os-name{display:grid;grid-template-columns:16px auto;column-gap:7px;row-gap:1px;align-items:center;max-width:145px;font-size:10px;line-height:12px}
  .os-name>img{grid-column:1;grid-row:1 / 3;align-self:center}
  .os-name>span:not(.topbar-divider){grid-column:2}
  .os-name .owner-name{display:block;width:auto;padding-left:0;font-size:9px;line-height:11px;white-space:nowrap;opacity:.75}
  .os-name .topbar-divider{display:none}
  .coda-launcher{left:77%;top:57%}
}

.restart-desktop{border-top:1px solid var(--chrome-mid);margin-top:5px}
.restart-desktop>span{width:24px;text-align:center;font-size:22px}

.coda-intro{flex-shrink:0;padding:10px 14px;border-bottom:1px solid var(--chrome-mid);font:11px/1.65 var(--mono);max-height:185px;overflow:auto}
.coda-intro summary{cursor:pointer;color:var(--ink)}
.coda-intro p{margin:8px 0;color:var(--ink)}
.coda-intro a{color:inherit;text-underline-offset:3px}
.found-note-paper>*{flex-shrink:0}
@media(max-width:639px){.coda-intro{max-height:170px;font-size:10px}}

.note-navigation{display:flex;align-items:center;justify-content:center;gap:9px;padding:6px 10px;flex-shrink:0}
.note-navigation button{width:32px;height:30px;background:transparent;border:1px solid var(--chrome-mid);color:var(--ink);font:16px var(--mono)}
.note-navigation button:hover{background:var(--selection)}
#note-select{appearance:none;-webkit-appearance:none;width:128px;max-width:100%;height:30px;border:1px solid var(--chrome-mid);background:var(--paper);color:var(--ink);font:11px var(--mono);padding:4px 32px 4px 10px}
.notes-total{font:10px var(--mono);color:var(--muted)}

.note-select-wrap{position:relative;display:inline-flex;flex-shrink:0}
.note-select-chevron{position:absolute;right:12px;top:10px;width:7px;height:7px;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:rotate(45deg);pointer-events:none}

/* Discoverable lamp control; light stays within the scene. */
#desk-lamp{border:1px dotted #f4d29570;box-shadow:0 0 12px #ffdb9b18}
.lamp-hint{opacity:0;border:1px solid #ffffff2b;border-radius:4px;background:linear-gradient(#ffffff08,#ffffff00),color-mix(in srgb,var(--wall) 62%,transparent);backdrop-filter:blur(8px) saturate(115%);-webkit-backdrop-filter:blur(8px) saturate(115%);box-shadow:inset 0 1px 0 #ffffff0a,0 3px 12px #0002;padding:5px 8px;pointer-events:none;color:var(--desktop-ink);font-size:10px}
.lamp-hint::before{content:'';display:inline-block;width:5px;height:5px;margin-right:6px;vertical-align:1px;background:#eac789}
#desk-lamp[aria-pressed=false] .lamp-hint::before{background:#8d9692}
.lamp-glow{position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(ellipse,#ffe0a950,transparent 65%);opacity:0;pointer-events:none}
.window-ghost,.window-ghost *{pointer-events:none!important;animation:none!important;resize:none!important}
.window-ghost{user-select:none}

.coda-flight{position:fixed;top:0;left:0;z-index:20001;pointer-events:none;margin:0;transform-origin:center}
.coda-flight button{width:100%;height:100%;margin:0;background:var(--wall);color:var(--desktop-ink);border:1px solid currentColor;box-shadow:0 3px 10px #0005;white-space:nowrap}

/* Scene hints fade after discovery; hover and keyboard focus bring them back. */
.lamp-hint{transition:opacity 1.6s cubic-bezier(.4,0,.2,1)}
#desk-lamp[data-hint=visible] .lamp-hint,#desk-lamp[data-near] .lamp-hint,#desk-lamp:hover .lamp-hint,#desk-lamp:focus-visible .lamp-hint{opacity:.9;pointer-events:auto;transition-duration:.25s}
[data-wallpaper-scene=city] #desk-lamp{left:72.75%;top:61.8%;width:4.2%;height:7.5%}
[data-theme=keep][data-wallpaper-scene=city] #desk-lamp{left:72.7%;top:49.8%}
[data-theme=coda][data-wallpaper-scene=city] #desk-lamp{left:91.6%;top:42.5%}
html[data-motion=off] .lamp-hint{transition:none}
/* Border beam: a bright arc that travels once around the circle; secrets.js sets data-beam. */
@property --beam-turn{syntax:'<angle>';inherits:false;initial-value:0deg}
#desk-lamp::after{content:'';position:absolute;inset:-2px;border-radius:50%;padding:2px;background:conic-gradient(from var(--beam-turn),transparent 0 68%,#f4d29540 80%,#ffe7b0 92%,#fff8e6 95%,transparent 97%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:0;pointer-events:none}
#desk-lamp[data-beam]::after{animation:lamp-beam 1.9s cubic-bezier(.45,.05,.35,1) both}
@keyframes lamp-beam{0%{--beam-turn:0deg;opacity:0}12%,82%{opacity:1}100%{--beam-turn:360deg;opacity:0}}
html[data-motion=off] #desk-lamp::after{display:none}
/* Empty space between desktop icons must not cover scenery controls. */
.desktop-icons{pointer-events:none}
.desktop-icons>.desktop-icon{pointer-events:auto}

.project-brand-icon{object-fit:contain;image-rendering:auto}

/* TileRecall: a finite blue shimmer, then a uniform brand-blue phosphor core. */
.phosphor-mark{position:relative;isolation:isolate;line-height:0;overflow:visible}
.icon-art>.phosphor-mark{filter:none}
.phosphor-mark>span,.phosphor-mark>svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.phosphor-bloom,.phosphor-fringe{mask:url('assets/tilerecall-mark.svg') center/contain no-repeat}
.phosphor-bloom{background:#7d9ef5;opacity:.2;filter:blur(2px)}
.phosphor-fringe{opacity:.22}
.phosphor-warm{background:#eb6834;transform:translate(-.7px,-.28px)}
.phosphor-cool{background:#1ee7ff;transform:translate(.7px,.42px)}
.phosphor-core{object-fit:contain;filter:drop-shadow(0 0 .35px #8aabff55);mask-image:repeating-linear-gradient(180deg,#000 0 2px,#000e 2px 3px,#000b 3px 4px),repeating-linear-gradient(90deg,#000 0 1px,#000d 1px 3px);mask-composite:intersect}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=off]) :is(.desktop-icon,.start-item,.task-button):is(:hover,:focus-visible) .phosphor-warm{animation:brand-signal-warm .34s ease-out both}
 html:not([data-motion=off]) :is(.desktop-icon,.start-item,.task-button):is(:hover,:focus-visible) .phosphor-cool{animation:brand-signal-cool .34s ease-out both}
}
@keyframes brand-signal-warm{from{transform:translate(-1.6px,-.3px)}to{transform:translate(-.7px,-.28px)}}
@keyframes brand-signal-cool{from{transform:translate(1.6px,.35px)}to{transform:translate(.7px,.42px)}}

.phosphor-core .brand-mark-piece{fill:#2e62ef}
@media(prefers-reduced-motion:no-preference){
 html:not([data-motion=off]) .phosphor-core .brand-mark-piece{animation:brand-blue-arrive 1.8s ease-in-out both;animation-delay:var(--piece-delay)}
 html:not([data-motion=off]) :is(.desktop-icon,.start-item,.task-button):is(:hover,:focus-visible) .phosphor-core .brand-mark-piece{animation-name:brand-blue-signal}
}
@keyframes brand-blue-arrive{0%,100%{fill:#2e62ef}20%{fill:#3f5bc7}42%{fill:#5f7fe0}60%{fill:#8fb0ff}78%{fill:#6d8ff4}}
@keyframes brand-blue-signal{0%,100%{fill:#2e62ef}20%{fill:#3f5bc7}42%{fill:#5f7fe0}60%{fill:#8fb0ff}78%{fill:#6d8ff4}}

@media(max-width:639px){[data-theme=coda] #desk-lamp{min-width:52px;min-height:52px;border-color:#f4d295b3;box-shadow:0 0 0 3px #171e1860,0 0 14px #ffdb9b25}}

/* A quiet CRT shutter and a short segmented boot indicator. */
.reboot-screen{position:fixed;inset:0;z-index:30000;display:grid;place-items:center;outline:0;color:var(--desktop-ink);font:12px/1.5 var(--mono)}
.reboot-screen::before{content:'';position:absolute;inset:0;background:#0b100f;animation:reboot-shutter .32s cubic-bezier(.22,1,.36,1) both}
.reboot-console{position:relative;display:grid;justify-items:center;gap:18px;animation:reboot-console .25s .28s ease-out both}
.reboot-console img{image-rendering:pixelated;opacity:.8}
.reboot-meter{display:flex;gap:3px}
.reboot-meter i{width:8px;height:4px;background:currentColor;opacity:.12;animation:reboot-segment .12s calc(.4s + var(--segment)*.09s) ease-out forwards}
@keyframes reboot-shutter{from{transform:scaleY(.004);opacity:.5}to{transform:scaleY(1);opacity:1}}
@keyframes reboot-console{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
@keyframes reboot-segment{to{opacity:.75}}

/* A fixed baseline keeps the multilingual status greeting quiet between changes. */
#status-greeting-text{display:inline-block;min-height:14px;line-height:14px;white-space:pre;font-family:var(--mono)}
.display-body .wallpaper-cycle{gap:9px;margin:12px 0 20px;font-size:11px;cursor:pointer}
.display-body .wallpaper-cycle input{width:15px;height:15px;accent-color:var(--selection)}

/* The pocket arcade uses the same window chrome as the rest of the desktop. */
.arcade{--arcade-ink:#cce7a9;display:flex;flex-direction:column;flex:1;min-height:0;background:#101e17;color:var(--arcade-ink);font:11px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace}
.arcade-asteroids{--arcade-ink:#b8e6e3;background:#081923}
.game-window{min-width:320px;min-height:360px}
.game-window .window-content{overflow:hidden}
.arcade-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid #90b28c40;letter-spacing:.04em}
.arcade-label{font-size:9px;opacity:.6;width:100%}
.arcade-stage{position:relative;flex:1;min-height:0;margin:12px;display:grid;place-items:center;overflow:hidden}
.arcade-screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.arcade-screen canvas{display:block;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;image-rendering:pixelated}
.arcade-overlay{position:relative;text-align:center;background:#0c1c18ed;border:1px solid #96bd8560;box-shadow:0 8px 30px #0005;padding:24px 18px;max-width:94%;max-height:100%;overflow:auto;z-index:1}
.arcade-asteroids .arcade-overlay{background:#0a1b26f2;border-color:#92cfce60}
.arcade-eyebrow{font-size:9px;letter-spacing:.18em;opacity:.7}
.arcade-overlay h2{font:700 clamp(25px,4vw,38px)/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.12em;margin:12px 0;color:var(--arcade-ink)}
.arcade-overlay p{margin:10px 0 18px}
.arcade .raised{font-family:inherit;font-size:11px;color:var(--ink)}
.arcade .arcade-play{padding:9px 24px}
.arcade-overlay .arcade-instructions{font-size:10px;line-height:1.9;opacity:.7;margin:18px 0 0}
.arcade-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid #90b28c40;font-size:10px}
.arcade-footer>div{display:flex;gap:5px}
.arcade-footer button{padding:4px 7px}
.arcade-touch{display:none;gap:8px;padding:0 12px 12px;justify-content:center}
.arcade-touch button{min-width:48px;min-height:44px;flex:1;touch-action:none;user-select:none;-webkit-user-select:none;font-size:20px!important}
.arcade-touch .arcade-fire{font-size:12px!important}
.arcade:fullscreen{padding:16px;width:100%;height:100%;box-sizing:border-box}
.arcade:fullscreen .arcade-screen canvas{width:auto;height:100%}
@media(pointer:coarse),(max-width:639px){.arcade-touch{display:flex}.arcade-stage{margin:8px}.arcade-toolbar{padding:8px 10px}.arcade-footer{padding:8px 10px}.arcade-overlay{padding:18px 12px}}
@media(max-width:360px){.desktop-icons{grid-auto-columns:86px;gap:12px 6px}.desktop-icon{width:86px}.icon-label{max-width:86px}.arcade-footer{gap:4px;font-size:9px}.arcade-footer button{padding:4px}}
.desktop-icon[data-open=asteroids] .icon-label{white-space:nowrap;font-size:11px;padding-inline:3px;max-width:none}
@media(max-width:900px){.desktop-icon[data-open=asteroids] .icon-label{font-size:10px;padding-inline:2px}}