:root {
--desk: #e4e2dc;
--paper: #fbfaf7;
--paper-dim: #f1efe9;
--ink: #1c1b19;
--blue: #2f5bd6;
--on-accent: #fff;
--accent-border: color-mix(in srgb, var(--blue) 82%, white 18%);
--accent-fill: color-mix(in srgb, var(--blue) 56%, transparent);
--accent-fill-soft: color-mix(in srgb, var(--blue) 34%, transparent);
--red: #c2452d;
--green: #2f7d4f;
--shadow: rgba(28, 27, 25, 0.16);
--font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Courier New", monospace;
}
body {
--chrome-fill: #e4e2dc;
--taskbar-fill: var(--ink);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
.skip-link {
position: fixed;
top: 8px;
left: 8px;
z-index: 20000;
padding: 8px 12px;
border: 2px solid var(--ink);
background: var(--paper);
color: var(--ink);
font: 700 0.75rem var(--font-mono);
transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
html { scroll-behavior: smooth; }
html.phosphor { background: #15171b; }
html.phosphor body { background-color: #15171b; }
body {
font-family: var(--font-mono);
color: var(--ink);
background-color: var(--desk);
background-image: radial-gradient(rgba(28,27,25,0.07) 1px, transparent 1px);
background-size: 22px 22px;
touch-action: manipulation;
}
body::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
background: repeating-linear-gradient(
to bottom, rgba(28,27,25,0.02) 0 1px, transparent 1px 3px);
z-index: 999;
}
.boot {
position: fixed;
inset: 0;
z-index: 1000;
background: var(--ink);
color: #d7e8c9;
padding: 40px 32px;
font-size: 0.95rem;
line-height: 1.7;
}
.boot pre { font-family: var(--font-mono); white-space: pre-wrap; }
.boot.done { display: none; }
.desktop {
min-height: 100vh;
display: flex;
justify-content: center;
padding: 40px 16px 64px;
}
.window {
width: 100%;
max-width: 780px;
background: var(--paper);
border: 1.5px solid var(--ink);
border-radius: 8px;
overflow: visible;
clip-path: inset(0 round 8px);
box-shadow: 0 18px 40px -12px var(--shadow), 0 4px 10px -4px var(--shadow);
}
.window.minimized { display: none; }
.titlebar {
position: sticky;
top: 0;
z-index: 150;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 2px solid var(--ink);
padding: 8px 10px;
background: var(--ink);
color: var(--paper);
user-select: none;
}
.titlebar-title::before { content: none; }
.titlebar-stripes { display: none; }
.titlebar-title {
position: relative;
padding: 0 14px;
margin: 0 auto;
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 2px;
color: var(--paper);
}
.titlebar-title::after {
content: "▌";
margin-left: 4px;
animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.titlebar-buttons {
position: relative;
display: flex;
gap: 6px;
padding-left: 0;
}
.tb-btn {
width: 28px; height: 28px;
border: 2px solid var(--paper);
background: var(--ink);
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.9rem;
line-height: 1;
cursor: pointer;
border-radius: 5px;
color: var(--paper);
}
.tb-btn:hover { background: var(--paper); color: var(--ink); }
.tb-btn:active { transform: translateY(1px); }
.tb-close:hover { color: var(--red); }
.tb-btn:focus-visible, .btn:focus-visible, a:focus-visible, summary:focus-visible,
.task-chip:focus-visible, .start-btn:focus-visible, .startmenu-item:focus-visible, input:focus-visible {
outline: 2px dashed var(--blue);
outline-offset: 2px;
}
.content { padding: 0; }
.section {
padding: 26px 32px 36px;
line-height: 1.6;
font-size: 0.95rem;
}
.section:nth-child(even) {
background: var(--paper-dim);
border-top: 2px solid var(--ink);
border-bottom: 2px solid var(--ink);
}
.section:nth-child(even) + .section { border-top: none; }
.section-cmd {
font-size: 0.85rem;
letter-spacing: 1px;
margin-bottom: 6px;
color: var(--green);
font-weight: 700;
}
.section-cmd .prompt { color: var(--ink); opacity: 0.6; }
.section-head {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 20px;
}
.section-head h1 {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 2px;
background: var(--ink);
color: var(--paper);
padding: 5px 12px;
border-radius: 5px;
white-space: nowrap;
}
.section-head::after {
content: "";
flex: 1;
height: 1.5px;
background: var(--ink);
opacity: 0.25;
}
.section-num { font-size: 0.75rem; letter-spacing: 1px; opacity: 0.55; }
.section p + p { margin-top: 12px; }
.section a { color: var(--blue); }
.dim { opacity: 0.55; font-size: 0.85em; margin-top: 16px; }
.photo-frame {
position: relative;
z-index: 1000;
float: right;
margin: 0 0 14px 18px;
padding: 8px;
background: #fff;
border: 2px solid var(--ink);
box-shadow: 5px 5px 0 var(--shadow);
transform: rotate(1.5deg);
}
.photo-frame img {
display: block;
width: 150px;
height: auto;
aspect-ratio: 1 / 1;
object-fit: cover;
}
.photo-frame a { display: block; cursor: zoom-in; }
.cv-list { list-style: none; margin-top: 4px; }
.cv-list li {
display: grid;
grid-template-columns: 150px 1fr;
gap: 14px;
padding: 10px 0;
border-bottom: 1px dashed rgba(23,20,14,0.35);
}
.cv-list li::before { content: none; }
.cv-period { font-weight: 700; white-space: nowrap; }
.timeline { list-style: none; margin: 8px 0 18px; }
.timeline .tl-item {
display: grid;
grid-template-columns: 150px 1fr;
gap: 16px;
padding: 13px 0;
border-bottom: 1px dashed rgba(23,20,14,0.35);
}
.timeline .tl-item::before { content: none; }
.tl-period {
font-weight: 700;
white-space: nowrap;
font-size: 0.84rem;
opacity: 0.72;
}
.tl-role {
font-weight: 800;
font-size: 1.12rem;
letter-spacing: 0.6px;
line-height: 1.18;
}
.tl-org {
margin-top: 4px;
font-size: 0.82rem;
opacity: 0.62;
letter-spacing: 0.4px;
}
.cv-subhead {
margin: 24px 0 6px;
font-size: 0.86rem;
letter-spacing: 2px;
text-transform: uppercase;
border-bottom: 2px solid var(--ink);
padding-bottom: 5px;
}
.timeline-sub { margin-bottom: 18px; }
.link-list { list-style: none; }
.link-list li { margin: 10px 0; }
.link-list a {
display: flex;
align-items: center;
gap: 12px;
padding: 11px 14px;
border: 1.5px solid var(--ink);
border-radius: 6px;
background: var(--paper);
color: var(--ink);
text-decoration: none;
font-weight: 600;
letter-spacing: 0.5px;
transition: background 0.12s, color 0.12s, transform 0.12s;
}
.link-list a::before { content: "▸"; color: var(--blue); font-size: 0.9em; }
.link-list a .url {
margin-left: auto;
font-weight: 400;
font-size: 0.8em;
opacity: 0.55;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.link-list a:hover { background: var(--ink); color: var(--paper); transform: translateX(3px); }
.link-list a:hover::before { color: var(--paper); }
.external-mark { margin-left: 7px; color: var(--blue); font-weight: 700; }
.link-list a:hover .external-mark { color: var(--paper); }
.link-disabled {
display: block;
padding: 10px 14px;
border: 1px dashed var(--ink);
border-radius: 6px;
opacity: 0.5;
}
.link-disabled .url { display: block; margin-top: 2px; font-size: 0.72rem; }
.btn {
display: inline-block;
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.5px;
font-size: 0.9rem;
padding: 8px 16px;
margin-top: 18px;
border: 1.5px solid var(--ink);
border-radius: 6px;
background: var(--paper);
color: var(--ink);
text-decoration: none;
cursor: pointer;
transition: background 0.12s, color 0.12s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:active { transform: translateY(1px); }
.footer {
border-top: 2px solid var(--ink);
background: var(--paper-dim);
padding: 14px 32px 20px;
font-size: 0.85rem;
}
.footer-label {
font-size: 0.7rem;
letter-spacing: 2px;
opacity: 0.55;
margin-bottom: 8px;
}
.footer details { border: 1px solid var(--ink); margin: 6px 0; background: var(--paper); }
.footer summary {
cursor: pointer;
padding: 8px 12px;
font-weight: 700;
letter-spacing: 1px;
list-style: none;
}
.footer summary::-webkit-details-marker { display: none; }
.footer summary::before { content: "[+] "; color: var(--green); }
.footer details[open] summary::before { content: "[–] "; color: var(--red); }
.footer details[open] summary { border-bottom: 1px dashed var(--ink); }
.footer .legal-body { padding: 12px 14px; line-height: 1.6; }
.footer .legal-body p + p { margin-top: 10px; }
.statusbar {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
justify-content: space-between;
gap: 12px;
border-top: 2px solid var(--ink);
padding: 5px 12px;
font-size: 0.72rem;
letter-spacing: 2px;
background: var(--ink);
color: var(--paper);
}
.status-mid { opacity: 0.7; }
.shutdown {
align-self: center;
text-align: center;
font-size: 1.05rem;
letter-spacing: 1px;
}
.shutdown-text { margin-bottom: 20px; font-family: inherit; white-space: pre-wrap; }
.hidden { display: none; }
@media (max-width: 560px) {
.desktop { padding: 14px 8px 40px; }
.window { box-shadow: 5px 5px 0 var(--shadow); }
.section { padding: 22px 16px 28px; }
.footer { padding: 12px 16px 16px; }
.cv-list li, .timeline .tl-item { grid-template-columns: 1fr; gap: 4px; }
.tl-role { font-size: 1rem; }
.photo-frame { float: none; width: max-content; margin: 0 auto 18px; }
.titlebar-title { font-size: 0.9rem; letter-spacing: 1px; }
.titlebar::before, .titlebar-title + .titlebar-buttons::before { display: none; }
.link-list a .url { display: none; }
.boot { padding: 24px 16px; font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.titlebar-title::after { animation: none; }
* { transition: none !important; }
}
.tb-sys { margin-right: 2px; }
.titlebar-title.typing::after { animation: blink 0.4s steps(1) infinite; }
.status-clock { font-variant-numeric: tabular-nums; }
.dialog-backdrop.hidden { display: none; }
.dialog-backdrop {
position: fixed;
inset: 0;
z-index: 10900;
background: rgba(23,20,14,0.35);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
}
.dialog {
width: 100%;
max-width: 380px;
background: var(--paper);
border: 2px solid var(--ink);
box-shadow: 8px 8px 0 var(--shadow);
}
.dialog-title {
border-bottom: 2px solid var(--ink);
padding: 6px 10px;
font-weight: 700;
letter-spacing: 2px;
font-size: 0.85rem;
background: var(--ink);
color: var(--paper);
}
.dialog-title span::before { content: "▚ "; opacity: 0.7; }
.dialog-body { padding: 16px; font-size: 0.85rem; line-height: 1.7; }
.dialog-body pre { font-family: inherit; white-space: pre-wrap; }
.sys-memory-trigger { all: unset; color: inherit; font: inherit; }
.dialog-actions { padding: 0 16px 16px; text-align: right; }
.dialog-actions .btn { margin-top: 0; }
.prj-list { list-style: none; }
.prj-list li {
display: grid;
grid-template-columns: 190px 1fr;
gap: 14px;
padding: 10px 0;
border-bottom: 1px dashed rgba(23,20,14,0.35);
}
.prj-name { font-weight: 700; letter-spacing: 1px; white-space: nowrap; }
.prj-name::before { content: "▪ "; color: var(--red); }
.skill-tags { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-tags .tag {
border: 1px solid var(--ink);
padding: 3px 10px;
font-size: 0.78rem;
letter-spacing: 1px;
background: var(--paper);
box-shadow: 2px 2px 0 var(--shadow);
}
@media (max-width: 560px) {
.prj-list li { grid-template-columns: 1fr; gap: 2px; }
}
body.phosphor {
--desk: #15171b;
--paper: #1e2127;
--paper-dim: #24272e;
--ink: #e8e6df;
--red: #ff8a6e;
--green: #58c98a;
--shadow: rgba(0, 0, 0, 0.55);
--chrome-fill: #15171b;
--taskbar-fill: #2b2f37;
}
body.phosphor::after {
background: repeating-linear-gradient(
to bottom, rgba(0,0,0,0.10) 0 1px, transparent 1px 3px);
}
body.phosphor { background-image: radial-gradient(rgba(232,230,223,0.05) 1px, transparent 1px); }
body.phosphor .window { border-color: #3a3e46; border-top-color: var(--blue); }
body.phosphor .titlebar {
background: #2b2f37;
border-bottom-color: #4a4f59;
color: #f2f0ea;
}
body.phosphor .titlebar-title { color: #f2f0ea; }
body.phosphor .tb-btn { border-color: #e8e6df; color: #ffffff; background: #3a3f49; }
body.phosphor .tb-btn:hover { background: #f2f0ea; color: #1e2127; }
body.phosphor .photo-frame { background: var(--paper-dim); }
body.phosphor .field input, body.phosphor .field textarea,
body.phosphor .login-field input { background: var(--paper-dim); color: var(--ink); }
body.phosphor .statusbar { background: #2b2f37; color: #e8e6df; border-top-color: #4a4f59; }
body.phosphor .footer { background: #23262c; border-top-color: #4a4f59; }
body.phosphor .footer details { background: #1e2127; border-color: #4a4f59; }
body.phosphor .footer summary { color: #e8e6df; }
body.phosphor .footer-label { color: #e8e6df; opacity: 0.6; }
body.phosphor .statusline { background: #23262c; border-bottom-color: #4a4f59; }
body.phosphor .skill-tags .tag, body.phosphor .link-list a,
body.phosphor .weather-grid { border-color: #3a3e46; }
body.phosphor .section:nth-child(even) { border-color: #3a3e46; }
@media print {
body { background: #fff !important; }
body::after, .boot, .titlebar-buttons, .statusbar, .tb-btn,
.section-cmd, .section::after, .dialog-backdrop, .shutdown { display: none !important; }
body, .window, .section, .footer {
background: #fff !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
.window { border: none; max-width: none; }
.titlebar { position: static; background: #fff; color: #000; border-bottom: 2px solid #000; }
.titlebar::before, .titlebar-title + .titlebar-buttons::before { display: none; }
.titlebar-title { color: #000; }
.titlebar-title::after { content: none; }
.section { break-inside: avoid; border: none !important; padding: 18px 0; }
.section-head h1 { background: #000; color: #fff; }
.link-list a, .btn, .skill-tags .tag { box-shadow: none; }
.footer { border-top: 1px solid #000; padding: 12px 0; }
.footer details { border: none; }
.footer summary { padding-left: 0; }
}
.timeline { list-style: none; position: relative; margin: 8px 0 4px; padding-left: 26px; }
.timeline::before {
content: "";
position: absolute;
left: 6px; top: 4px; bottom: 4px;
width: 2px;
background: var(--ink);
opacity: 0.25;
}
.tl-item { position: relative; padding: 6px 0 18px; }
.tl-item::before {
content: "";
position: absolute;
left: -26px; top: 9px;
width: 11px; height: 11px;
border: 2px solid var(--ink);
border-radius: 50%;
background: var(--paper);
}
.tl-period { font-size: 0.78rem; letter-spacing: 1px; opacity: 0.6; margin-bottom: 2px; }
.tl-role { font-weight: 700; }
.tl-org { font-size: 0.88rem; opacity: 0.8; }
.skill-group { margin-top: 16px; }
.skill-group-name {
font-size: 0.72rem;
letter-spacing: 2px;
opacity: 0.55;
margin-bottom: 6px;
}
.skill-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.skill-tags .tag {
border: 1.5px solid var(--ink);
border-radius: 5px;
padding: 3px 10px;
font-size: 0.78rem;
letter-spacing: 0.5px;
background: var(--paper);
box-shadow: none;
}
.weather-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 20px;
padding: 14px 16px;
border: 1.5px solid var(--ink);
border-radius: 6px;
background: var(--paper);
}
.w-key { display: inline-block; font-size: 0.7rem; letter-spacing: 1px; opacity: 0.55; margin-right: 8px; }
.weather-line { padding: 10px 0; letter-spacing: 1px; }
.weather-stale {
margin: 12px 0 0;
color: #9a6815;
font-size: .72rem;
font-weight: 700;
letter-spacing: .06em;
}
.phosphor .weather-stale { color: #e4bd65; }
@media (max-width: 560px) { .weather-grid { grid-template-columns: 1fr; } }
.statusline {
display: flex; align-items: center; gap: 10px;
padding: 8px 14px 7px;
border-bottom: 1.5px solid var(--ink);
background: var(--paper-dim);
font-size: 0.8rem; letter-spacing: 0.5px;
}
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: #999; box-shadow: 0 0 0 2px rgba(0,0,0,0.08); }
.status-dot.s-online  { background: var(--green); animation: pulse 2s infinite; }
.status-dot.s-busy    { background: var(--red); }
.status-dot.s-away    { background: #e0a53a; }
.status-dot.s-offline { background: #999; }
@keyframes pulse { 0%,100%{ box-shadow:0 0 0 0 rgba(47,125,79,0.5);} 50%{ box-shadow:0 0 0 5px rgba(47,125,79,0);} }
.section-num { color: var(--blue); opacity: 0.8; }
.section-cmd .prompt { color: var(--blue); opacity: 0.9; }
.section:nth-child(even) .section-head h1 { background: var(--blue); }
.section:nth-child(even) .section-head h1 { color: var(--on-accent); }
.taskbar {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
display: flex; align-items: stretch; gap: 6px;
height: 46px; padding: 5px 8px;
background: var(--taskbar-fill); color: var(--paper);
border-top: 2px solid var(--blue);
overflow: visible;
}
.taskbar::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 100%;
height: calc(env(safe-area-inset-bottom) + 120px);
background: var(--taskbar-fill);
pointer-events: none;
}
.start-btn {
display: flex; align-items: center; gap: 8px;
font-family: var(--font-mono); font-weight: 700; letter-spacing: 1px;
padding: 0 16px; border: none; border-radius: 6px; cursor: pointer;
background: var(--blue); color: var(--on-accent);
}
.start-btn:hover { filter: brightness(1.12); }
.start-logo { font-size: 1.1rem; }
.task-open {
display: flex;
gap: 6px;
flex: 1;
overflow-x: auto;
align-items: center;
-webkit-overflow-scrolling: touch;
}
.task-chip {
font-family: var(--font-mono); font-size: 0.78rem;
padding: 5px 12px; border: 1px solid rgba(251,250,247,0.3); border-radius: 5px;
background: transparent; color: var(--paper); cursor: pointer; white-space: nowrap;
}
.tb-theme-toggle[data-state="manual"] { border-color: var(--accent-border); }
.tb-theme-toggle[data-state="off"] { opacity: 0.78; }
.task-chip:hover { background: rgba(251,250,247,0.14); }
.task-chip.active { border-color: var(--accent-border); background: var(--accent-fill); }
.task-chip.win-min { border-color: var(--accent-border); background: var(--accent-fill-soft); }
.task-chip .t { opacity: 0.6; margin-left: 6px; font-variant-numeric: tabular-nums; }
.tray { display: flex; align-items: center; padding: 0 12px; border-left: 1px solid rgba(251,250,247,0.25); }
.tray-clock { font-variant-numeric: tabular-nums; font-size: 0.85rem; }
.startmenu.hidden { display: none; }
.startmenu {
position: absolute; left: 8px; bottom: 52px;
display: flex; min-width: 300px;
border: 2px solid var(--ink); border-radius: 8px; overflow: hidden;
box-shadow: 0 14px 34px -10px rgba(0,0,0,0.4); background: var(--blue);
z-index: 10000;
}
.startmenu-side {
width: 40px; background: var(--blue); color: var(--on-accent);
writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg);
display: flex; align-items: center; justify-content: center;
position: relative; z-index: 1;
font-weight: 700; letter-spacing: 3px; font-size: 0.8rem; padding: 12px 0;
border-radius: 0;
}
.startmenu-side::before {
content: "";
position: absolute;
inset: -2px 0 -2px -2px;
background: var(--blue);
z-index: -1;
}
.startmenu-items { flex: 1; padding: 8px; display: flex; flex-direction: column; background: var(--paper); }
.startmenu-item {
text-align: left; font-family: var(--font-mono); font-size: 0.9rem;
padding: 8px 12px; border: none; background: none; color: var(--ink);
cursor: pointer; border-radius: 5px;
}
.startmenu-item:hover { background: var(--blue); color: var(--on-accent); }
.startmenu-item.active { background: var(--blue); color: var(--on-accent); }
.startmenu-sep { height: 1px; background: var(--ink); opacity: 0.2; margin: 6px 4px; }
.terminal {
background: #0d0f0c; color: #7fe0a0; border-radius: 8px;
border: 1.5px solid var(--ink); padding: 14px 16px;
font-size: 0.85rem; line-height: 1.5; cursor: text;
box-shadow: inset 0 0 40px rgba(0,0,0,0.5);
}
.term-out { max-height: 240px; overflow-y: auto; white-space: pre-wrap; word-break: break-word; }
.term-out > div { margin: 2px 0; }
.term-sys { color: #59c9e8; }
.term-echo { color: #cfd6cd; }
.term-err { color: #ff8c66; }
.term-inline { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.term-prompt { color: #7fe0a0; white-space: nowrap; }
.term-in {
flex: 1; background: none; border: none; outline: none;
color: #eaf7ea; font-family: var(--font-mono); font-size: 0.85rem;
caret-color: #7fe0a0;
min-width: 0;
width: 100%;
}
body.phosphor .taskbar { border-top-color: var(--blue); }
body.phosphor .task-chip { border-color: rgba(232,230,223,0.55); color: #f2f0ea; }
body.phosphor .task-chip:hover { background: rgba(232,230,223,0.18); }
body.phosphor .tb-theme-toggle { border-color: rgba(232,230,223,0.55); color: #f2f0ea; }
body.phosphor .tray { border-left-color: rgba(232,230,223,0.4); }
body.phosphor .tray-clock { color: #f2f0ea; }
body.phosphor .startmenu { background: var(--paper); border-color: #4a4f59; }
@media (max-width: 560px) {
.taskbar { height: 42px; }
.start-btn { padding: 0 12px; }
.task-chip { font-size: 0.72rem; padding: 4px 9px; }
.startmenu { min-width: 240px; }
}
@media print {
.taskbar, .statusline, .terminal, .cv-actions, #btn-cvpdf, #btn-cvprint { display: none !important; }
}
.toast {
position: fixed; right: 20px; bottom: 64px; z-index: 999;
background: var(--ink); color: var(--paper);
border: 1.5px solid var(--ink); border-left: 5px solid var(--green);
border-radius: 6px; padding: 11px 16px;
font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 1px;
box-shadow: 0 10px 30px -8px rgba(0,0,0,0.4);
animation: toast-in 0.2s ease-out;
}
.toast.err { border-left-color: var(--red); }
.toast.info { border-left-color: var(--blue); }
body.phosphor .toast { background: #2b2f37; color: #f2f0ea; border-color: #4a4f59; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
.balloon {
position: fixed; right: 16px; bottom: 60px; z-index: 998;
max-width: 260px;
background: #fff8d6; color: #1c1b19;
border: 1.5px solid var(--ink); border-radius: 8px;
padding: 12px 14px; font-size: 0.8rem; line-height: 1.5;
box-shadow: 0 10px 30px -8px rgba(0,0,0,0.35);
animation: toast-in 0.25s ease-out;
}
.balloon::after {
content: ""; position: absolute; bottom: -9px; right: 40px;
border: 9px solid transparent; border-top-color: var(--ink);
}
.balloon b { display: block; margin-bottom: 4px; letter-spacing: 1px; }
.balloon { padding-right: 38px; }
.balloon .bx {
position: absolute; top: 6px; right: 6px; cursor: pointer;
width: 26px; height: 26px; line-height: 1;
background: none; border: 1.5px solid #1c1b19; border-radius: 5px;
font-weight: 700; font-size: 0.95rem; color: #1c1b19;
}
.balloon .bx:hover { background: #1c1b19; color: #fff8d6; }
.minimized-hint {
position: fixed;
left: 12px;
bottom: 58px;
z-index: 998;
max-width: min(520px, calc(100vw - 24px));
border: 2px solid var(--ink);
border-left: 8px solid var(--blue);
border-radius: 8px;
background: var(--paper);
color: var(--ink);
padding: 10px 14px;
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.6px;
text-align: left;
cursor: pointer;
box-shadow: 4px 4px 0 var(--shadow);
animation: toast-in 0.2s ease-out;
}
.minimized-hint:hover { transform: translateY(-1px); }
.task-chip.win-min {
border-color: var(--accent-border);
background: var(--accent-fill-soft);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
body.phosphor .minimized-hint {
background: #2b2f37;
color: #f2f0ea;
border-color: #4a4f59;
box-shadow: 4px 4px 0 rgba(0,0,0,0.6);
}
:root { --taskbar-height: 46px; }
html, body {
min-height: 100%;
}
body {
padding-bottom: calc(var(--taskbar-height) + env(safe-area-inset-bottom));
}
.desktop {
align-items: flex-start;
padding: 40px 16px calc(var(--taskbar-height) + 34px + env(safe-area-inset-bottom));
}
.window {
width: 100%;
max-width: 780px;
border: 0 !important;
border-radius: 8px;
overflow: visible;
clip-path: none !important;
background: transparent;
box-shadow: 0 18px 40px -12px var(--shadow), 0 4px 10px -4px var(--shadow);
}
.titlebar {
position: sticky !important;
top: 0;
z-index: 500;
margin: 0;
min-height: 58px;
border: 0;
border-bottom: 2px solid var(--ink);
border-radius: 4px 4px 0 0;
padding: 14px 11.5px 8px;
background: linear-gradient(to bottom, var(--blue) 0 4px, var(--ink) 4px 100%);
overflow: visible;
}
.titlebar::before { content: none !important; }
.titlebar::after { content: none !important; }
.titlebar > * { position: relative; z-index: 2; }
.desktop::before {
content: "";
position: fixed;
top: -4px; left: 0; right: 0;
height: calc(env(safe-area-inset-top) + 40px);
background: var(--chrome-fill);
z-index: 400;
pointer-events: none;
transform: translateZ(0);
will-change: transform;
}
.statusline {
position: relative !important;
top: auto !important;
z-index: 1;
border-left: 1.5px solid var(--ink);
border-right: 1.5px solid var(--ink);
border-bottom: 1.5px solid var(--ink);
background: var(--paper-dim);
}
.content,
.footer,
.statusbar {
border-left: 1.5px solid var(--ink);
border-right: 1.5px solid var(--ink);
}
.content { background: var(--paper); }
.statusbar {
position: relative !important;
bottom: auto !important;
z-index: 1;
border-bottom: 1.5px solid var(--ink);
border-radius: 0 0 8px 8px;
}
.taskbar {
height: calc(var(--taskbar-height) + env(safe-area-inset-bottom));
padding-bottom: max(5px, env(safe-area-inset-bottom));
}
.minimized-hint {
bottom: calc(var(--taskbar-height) + 12px + env(safe-area-inset-bottom));
}
body.phosphor .titlebar {
border-color: #4a4f59;
background: linear-gradient(to bottom, var(--blue) 0 4px, #2b2f37 4px 100%);
}
body.phosphor .titlebar::before { background: var(--desk); }
body.phosphor .statusline,
body.phosphor .content,
body.phosphor .footer,
body.phosphor .statusbar {
border-left-color: #4a4f59;
border-right-color: #4a4f59;
}
@media (max-width: 560px) {
:root { --taskbar-height: 54px; }
.desktop {
padding: 12px 8px calc(var(--taskbar-height) + 34px + env(safe-area-inset-bottom));
}
.titlebar {
position: fixed !important;
top: 0; left: 8px; right: 8px;
z-index: 5000;
top: 8px;
min-height: 0;
padding: 12px 8px 8px;
gap: 7px;
background: linear-gradient(to bottom,
var(--blue) 0 4px,
var(--ink) 4px 100%);
border: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.titlebar::before { display: none; }
.desktop { padding-top: 0; }
.window { padding-top: 52px; }
.desktop::before { display: none !important; }
.notch-cover {
display: block;
position: fixed;
top: 0; left: 0; right: 0;
height: 13px;
background: var(--chrome-fill);
z-index: 4999;
pointer-events: none;
}
.desktop::before { display: none; }
.tb-btn {
width: 26px;
height: 26px;
font-size: 0.8rem;
border-radius: 5px;
}
.titlebar-buttons { gap: 4px; }
.titlebar-title {
font-size: 0.82rem;
letter-spacing: 1px;
padding: 0 6px;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.statusline {
font-size: 0.74rem;
line-height: 1;
padding: 9px 10px;
}
.taskbar {
height: calc(var(--taskbar-height) + env(safe-area-inset-bottom));
}
.task-open { min-width: 0; }
.tray { padding: 0 8px; }
}
.taskbar {
bottom: -4px;
height: calc(var(--taskbar-height) + env(safe-area-inset-bottom) + 4px);
padding-bottom: calc(max(5px, env(safe-area-inset-bottom)) + 4px);
position: fixed;
z-index: 9999;
}
@media (max-width: 560px) {
html {
height: 100vh;
height: 100dvh;
overflow-y: scroll;
overflow-x: hidden;
}
body { min-height: 100%; }
}
.season-particles {
position: fixed;
inset: 0;
pointer-events: none;
z-index: 10500;
overflow: hidden;
clip-path: inset(
env(safe-area-inset-top, 0px)
0
calc(var(--taskbar-height, 46px) + env(safe-area-inset-bottom, 0px))
0);
}
@media (max-width: 560px) {
.season-particles {
clip-path: inset(
calc(env(safe-area-inset-top, 0px) + 64px)
0
calc(var(--taskbar-height, 46px) + env(safe-area-inset-bottom, 0px))
0);
}
}
.season-particles span {
position: absolute;
top: -5vh;
color: var(--blue);
opacity: 0.55;
animation: season-fall linear infinite;
}
.season-particles span.twinkle {
top: auto;
animation: season-twinkle ease-in-out infinite;
text-shadow: 0 0 7px currentColor;
}
html[data-effect-intensity="quiet"] .season-particles { opacity: 0.78; }
html[data-effect-intensity="off"] .season-particles,
html[data-effect-policy="reduced-motion"] .season-particles,
html[data-effect-policy="save-data"] .season-particles,
html[data-effect-intensity="off"] .fog-layer,
html[data-effect-policy="reduced-motion"] .fog-layer,
html[data-effect-policy="save-data"] .fog-layer { display: none; }
@keyframes season-fall {
to { transform: translateY(110vh) rotate(35deg); }
}
@keyframes season-twinkle {
0%, 100% { opacity: 0; }
50% { opacity: 0.8; }
}
body.season-christmas .season-particles span,
body.season-winter .season-particles span { color: #7ba3c9; }
body.season-winter .season-particles span,
body.season-autumn .season-particles span { opacity: 0.3; font-size: 0.75rem !important; }
body.phosphor.season-winter .season-particles span,
body.phosphor.season-autumn .season-particles span { opacity: 0.35; }
body.phosphor.season-christmas .season-particles span,
body.phosphor.season-winter .season-particles span { color: #a9c8e8; }
body.season-newyear .season-particles span { color: #d9b642; }
body.phosphor.season-newyear .season-particles span { color: #e6c96a; }
body.season-valentine .season-particles span { color: #c56b8a; }
body.weather-snow .season-particles.weather-layer span { color: #7ba3c9; }
body.weather-rain .season-particles.weather-layer span { color: #5b82a6; opacity: 0.45; }
body.phosphor.weather-rain .season-particles.weather-layer span { color: #7da8cc; }
.season-title-icon {
font-size: 1.05rem;
margin-left: 2px;
cursor: default;
}
.season-title-toggle {
cursor: pointer;
border-radius: 4px;
padding: 0 2px;
}
.season-title-toggle:hover { background: rgba(251,250,247,0.14); }
body.phosphor .season-title-toggle:hover { background: rgba(232,230,223,0.12); }
body.phosphor .season-particles span { opacity: 0.6; }
body { --titlebar-fill: var(--ink); }
body.phosphor { --titlebar-fill: #2b2f37; }
body.season-christmas { --season-bar: repeating-linear-gradient(135deg,
#9e2f2f 0 14px, #f1efe9 14px 20px, #2f7d4f 20px 34px, #f1efe9 34px 40px); }
body.season-newyear { --season-bar: linear-gradient(90deg,
#20283d 0%, #4a5c8f 26%, #d9b642 50%, #8e3fa8 72%, #20283d 100%); }
body.season-valentine { --season-bar: repeating-linear-gradient(135deg,
#b0486e 0 14px, #f0c3d2 14px 22px); }
body.season-carnival { --season-bar: repeating-linear-gradient(135deg,
#8e3fa8 0 14px, #f1efe9 14px 18px, #d9a53c 18px 32px, #1c1b19 32px 36px, #3f9f5f 36px 50px); }
body.season-aprilfools { --season-bar: repeating-linear-gradient(135deg,
#3f8f6b 0 14px, #f1efe9 14px 20px); }
body.season-easter { --season-bar: repeating-linear-gradient(135deg,
#b7a4dd 0 14px, #a9d4b8 14px 28px, #f2d7a0 28px 42px, #f0c3d2 42px 56px); }
body.season-autumn { --season-bar: repeating-linear-gradient(135deg,
#a06b28 0 14px, #c99a4b 14px 28px, #8f4f2a 28px 42px); }
body.season-halloween { --season-bar: repeating-linear-gradient(135deg,
#b3541e 0 16px, #2b2130 16px 32px); }
body.season-winter { --season-bar: repeating-linear-gradient(135deg,
#4a7ba6 0 14px, #dbe7f0 14px 20px, #7ba3c9 20px 34px, #dbe7f0 34px 40px); }
body.season-birthday { --season-bar: repeating-linear-gradient(135deg,
#d94f4f 0 12px, #f1efe9 12px 16px, #3f7fbf 16px 28px, #f1efe9 28px 32px, #d9a53c 32px 44px, #f1efe9 44px 48px); }
body[class*="season-"] .titlebar {
background-image: var(--season-bar), linear-gradient(var(--titlebar-fill), var(--titlebar-fill));
background-size: 100% 4px, 100% 100%;
background-position: top, top;
background-repeat: no-repeat;
}
.season-sleigh {
position: fixed;
top: 14vh;
left: 0;
z-index: 10500;
pointer-events: none;
font-size: 1.7rem;
letter-spacing: -4px;
animation: sleigh-fly 6s linear forwards;
text-shadow: 0 2px 6px rgba(28,27,25,0.2);
}
@keyframes sleigh-fly {
0%   { transform: translateX(115vw) translateY(0); }
25%  { transform: translateX(82vw) translateY(-1.2vh); }
50%  { transform: translateX(45vw) translateY(0.8vh); }
75%  { transform: translateX(8vw)  translateY(-1vh); }
100% { transform: translateX(-30vw) translateY(0); }
}
.season-cat {
position: fixed;
bottom: 52px;
left: 0;
z-index: 10500;
pointer-events: none;
font-size: 1.55rem;
animation: cat-walk 10s linear forwards;
filter: drop-shadow(0 2px 3px rgba(28,27,25,0.25));
}
@keyframes cat-walk {
0%   { transform: translateX(104vw) translateY(0); }
38%  { transform: translateX(58vw) translateY(-0.2vh); }
46%  { transform: translateX(56vw) translateY(0); }
56%  { transform: translateX(56vw) translateY(0); }
100% { transform: translateX(-12vw) translateY(0); }
}
body.season-clockchange #tray-clock,
body.theme-atmosphere-clockchange #tray-clock {
display: inline-block;
animation: clock-wobble 7s ease-in-out infinite;
}
@keyframes clock-wobble {
0%, 86%, 100% { transform: rotate(0deg); }
88% { transform: rotate(-7deg); }
90% { transform: rotate(6deg); }
92% { transform: rotate(-5deg); }
94% { transform: rotate(3deg); }
96% { transform: rotate(-1deg); }
}
.season-rocket {
position: fixed;
bottom: -6vh;
z-index: 10500;
pointer-events: none;
font-size: 1.5rem;
transform: rotate(-45deg);
animation: rocket-up 1.3s ease-out forwards;
}
@keyframes rocket-up {
from { transform: translateY(0) rotate(-45deg); opacity: 1; }
to   { transform: translateY(-72vh) rotate(-45deg); opacity: 1; }
}
.season-burst {
position: fixed;
z-index: 10500;
pointer-events: none;
}
.season-burst span {
position: absolute;
color: #d9b642;
font-size: 1.1rem;
text-shadow: 0 0 8px currentColor;
animation: burst-out 1.1s ease-out forwards;
}
@keyframes burst-out {
0%   { transform: translate(0, 0); opacity: 1; }
100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.season-sleigh, .season-rocket, .season-burst, .season-cat { display: none; }
body.season-clockchange #tray-clock,
body.theme-atmosphere-clockchange #tray-clock { animation: none; }
}
body.kb-open .taskbar { visibility: hidden; }
body.kb-open .titlebar,
body.kb-open .notch-cover { transition: transform 0.15s ease-out; }
body.april-tilt .content {
transform: rotate(-1.1deg);
transition: transform 0.6s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
body.april-tilt .content { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.season-particles { display: none; }
}
@media print {
.season-particles, .season-title-icon { display: none !important; }
}
.note-list { list-style: none; }
.note-list li + li { margin-top: 10px; }
.note-list details {
border: 1.5px solid var(--ink);
background: var(--paper);
box-shadow: 3px 3px 0 var(--shadow);
}
.note-list summary {
list-style: none;
cursor: pointer;
padding: 10px 14px;
font-weight: 700;
letter-spacing: 1px;
font-size: 0.9rem;
display: flex;
gap: 10px;
align-items: baseline;
flex-wrap: wrap;
}
.note-list summary::-webkit-details-marker { display: none; }
.note-list summary::before { content: "[+]"; color: var(--green); flex-shrink: 0; }
.note-list details[open] summary::before { content: "[–]"; color: var(--red); }
.note-list details[open] summary { border-bottom: 1px dashed var(--ink); }
.note-list summary:hover { background: var(--paper-dim); }
.note-date {
margin-left: auto;
font-size: 0.72rem;
letter-spacing: 1px;
opacity: 0.55;
font-weight: 400;
white-space: nowrap;
}
.note-body { padding: 12px 16px 16px; line-height: 1.65; font-size: 0.92rem; }
.note-body p + p { margin-top: 10px; }
.note-body pre, .note-body code {
font-family: var(--font-mono);
background: var(--paper-dim);
border: 1px solid rgba(28,27,25,0.25);
font-size: 0.85em;
}
.note-body code { padding: 1px 5px; }
.note-body pre { padding: 10px 12px; overflow-x: auto; margin: 10px 0; }
.note-body pre code { border: none; background: none; padding: 0; }
body.phosphor .note-list details { border-color: #3a3e46; }
body.phosphor .note-body pre, body.phosphor .note-body code { border-color: #3a3e46; }
@media (max-width: 560px) {
.note-date { margin-left: 0; width: 100%; }
}
@media (pointer: coarse) {
input, textarea, select { font-size: 16px !important; }
.terminal { font-size: 16px; }
}
.tray-clickable { cursor: pointer; }
.tray-clickable:hover .tray-clock { text-decoration: underline; }
.theme-menu {
position: absolute;
right: 8px;
bottom: 52px;
min-width: 250px;
max-height: 60vh;
overflow-y: auto;
border: 2px solid var(--ink);
border-radius: 8px;
background: var(--paper);
color: var(--ink);
box-shadow: 0 14px 34px -10px rgba(0,0,0,0.4);
padding: 6px;
box-sizing: border-box;
z-index: 10000;
}
.floating-panel-front { z-index: 10002 !important; }
.theme-menu.hidden { display: none; }
.theme-menu-title {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 2px;
color: var(--paper);
background: var(--ink);
padding: 7px 10px 8px;
border-radius: 5px;
border-bottom: none;
margin-bottom: 6px;
}
.theme-menu-item {
display: block;
width: 100%;
text-align: left;
font-family: var(--font-mono);
font-size: 0.85rem;
padding: 8px 10px;
background: none;
border: none;
border-radius: 4px;
color: var(--ink);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.theme-menu-action, .theme-layer-option { display: flex; gap: 8px; }
.theme-menu-action::after, .theme-layer-option::after { content: ""; flex: 0 0 1ch; margin-left: auto; }
.theme-menu-item.active::after { content: "✓"; color: var(--green); }
@media (hover: hover) and (pointer: fine) {
.theme-menu-item:hover { background: var(--blue); color: var(--on-accent); }
.theme-menu-item.active:hover::after { color: #fff; }
}
.theme-menu-help {
padding: 7px 10px 8px;
font-size: 0.65rem;
line-height: 1.4;
opacity: 0.68;
white-space: pre-line;
overflow-wrap: anywhere;
}
.theme-menu-footer {
position: sticky;
bottom: -6px;
display: grid;
gap: 6px;
margin-top: 7px;
padding: 8px 6px 6px;
border-top: 1px solid rgba(28,27,25,0.25);
background: var(--paper);
}
.theme-menu-selection { font-size: 0.65rem; opacity: 0.65; }
.theme-menu-apply {
border: 1.5px solid var(--blue);
background: var(--blue);
color: var(--on-accent);
font-weight: 700;
text-align: center;
}
.theme-menu-next {
font-size: 0.72rem;
letter-spacing: 0.5px;
opacity: 0.6;
padding: 4px 10px 8px;
border-bottom: 1px dashed var(--ink);
margin-bottom: 4px;
}
body.phosphor .theme-menu-next { border-bottom-color: #4a4f59; }
.theme-menu-group {
display: block;
font-size: 0.65rem;
font-weight: 700;
letter-spacing: 2px;
color: var(--ink);
opacity: 0.72;
padding: 10px 10px 4px;
margin-top: 4px;
border-top: 1px dashed rgba(28,27,25,0.18);
}
body.phosphor .theme-menu { background: #1e2127; border-color: #4a4f59; color: #e8e6df; }
body.phosphor .theme-menu-item { color: #e8e6df; }
body.phosphor .theme-menu-title { background: #2b2f37; color: #f2f0ea; }
body.phosphor .theme-menu-group {
color: #d8d5cd;
border-top-color: rgba(232,230,223,0.18);
}
body.phosphor .theme-menu-footer { border-color: rgba(232,230,223,0.18); }
body.phosphor .theme-menu-footer { background: #1e2127; }
@media (max-width: 560px) {
.theme-menu {
width: min(300px, calc(100vw - 16px));
min-width: 0;
max-width: calc(100vw - 16px);
}
}
body.season-spring { --season-bar: repeating-linear-gradient(135deg,
#5f9e6e 0 14px, #cfe8d5 14px 20px, #a9d4b8 20px 34px, #f0c3d2 34px 40px); }
body.season-summer { --season-bar: linear-gradient(90deg,
#c98f2a 0%, #e8bf5e 25%, #c98f2a 50%, #e8bf5e 75%, #c98f2a 100%); }
body.season-perseids { --season-bar: linear-gradient(90deg,
#26364f 0%, #3f5e8f 30%, #8fa8c9 50%, #3f5e8f 70%, #26364f 100%); }
body.season-sysadminday { --season-bar: repeating-linear-gradient(135deg,
#2f7d4f 0 14px, #1c1b19 14px 20px, #58c98a 20px 26px, #1c1b19 26px 32px); }
body.season-starwarsday { --season-bar: repeating-linear-gradient(135deg,
#1c1b19 0 12px, #4caf6e 12px 16px, #1c1b19 16px 28px, #4a7ba6 28px 32px); }
body.season-piday { --season-bar: repeating-linear-gradient(135deg,
#4a7ba6 0 14px, #dbe7f0 14px 20px); }
body.season-towelday { --season-bar: repeating-linear-gradient(135deg,
#6a8fbf 0 14px, #f1efe9 14px 20px, #d9a53c 20px 26px, #f1efe9 26px 32px); }
body.season-earthday { --season-bar: repeating-linear-gradient(135deg,
#3c7f73 0 14px, #cfe8d5 14px 20px, #4a7ba6 20px 34px, #e1efe8 34px 40px); }
body.season-pride { --season-bar: linear-gradient(90deg,
#e2514a 0%, #f2a13b 18%, #f4d35e 36%, #58a85f 54%, #4d7eea 72%, #8e5bd6 100%); }
body.season-solstice { --season-bar: linear-gradient(90deg,
#d7b35a 0%, #f2ddb0 28%, #fff7dc 50%, #f2ddb0 72%, #d7b35a 100%); }
body.season-programmersday { --season-bar: repeating-linear-gradient(135deg,
#8e3fa8 0 14px, #1c1b19 14px 20px, #b06cc9 20px 26px, #1c1b19 26px 32px); }
body.season-friday13 { --season-bar: repeating-linear-gradient(135deg,
#5e2a3d 0 16px, #241419 16px 32px); }
body.season-backupday { --season-bar: repeating-linear-gradient(135deg,
#46707f 0 14px, #1c1b19 14px 20px, #9db8c2 20px 26px, #1c1b19 26px 32px); }
body.season-catday { --season-bar: repeating-linear-gradient(135deg,
#8a6d5c 0 14px, #e8ddd0 14px 20px, #5c4a3d 20px 26px, #e8ddd0 26px 32px); }
body.season-internetday { --season-bar: repeating-linear-gradient(135deg,
#3f7f9e 0 14px, #1c1b19 14px 20px, #8fc3d9 20px 26px, #1c1b19 26px 32px); }
body.season-clockchange { --season-bar: repeating-linear-gradient(135deg,
#6d5c8a 0 14px, #f1efe9 14px 20px, #b8a9d1 20px 26px, #f1efe9 26px 32px); }
body.season-fullmoon { --season-bar: linear-gradient(90deg,
#1f2433 0%, #3a4560 30%, #cdd6e8 50%, #3a4560 70%, #1f2433 100%); }
body.season-equinox { --season-bar: linear-gradient(90deg,
#e8dfc8 0%, #9db5aa 48%, #42535c 52%, #202733 100%); }
body.season-geminids { --season-bar: linear-gradient(90deg,
#24324a 0%, #55719b 35%, #c5e1f3 52%, #55719b 68%, #24324a 100%); }
body.season-passwordday { --season-bar: repeating-linear-gradient(135deg,
#356a76 0 14px, #172226 14px 20px, #78a7ad 20px 26px, #172226 26px 32px); }
body.season-passwordday .season-particles span,
body.theme-event-passwordday .season-particles.event-layer span {
padding: 2px 5px;
border: 1px solid currentColor;
border-radius: 3px;
background: color-mix(in srgb, var(--paper) 82%, transparent);
color: #356a76;
font-size: 0.62rem !important;
letter-spacing: 1px;
opacity: 0.52;
}
body.phosphor.theme-event-passwordday .season-particles.event-layer span { color: #85bdc3; }
body.season-spring .season-particles span { color: #d98fb0; }
body.season-summer .season-particles span { color: #d3a43c; }
body.season-earthday .season-particles span { color: #4a7ba6; }
body.season-solstice .season-particles span { color: #d7b35a; }
body.season-perseids .season-particles span { color: #7fa6d8; }
body.phosphor.season-perseids .season-particles span { color: #eef5ff; }
body.theme-atmosphere-perseids .season-particles.atmosphere-layer span { color: #7fa6d8; }
body.phosphor.theme-atmosphere-perseids .season-particles.atmosphere-layer span { color: #eef5ff; }
body.theme-atmosphere-geminids .season-particles.atmosphere-layer span { color: #b9d9ff; }
body.season-starwarsday .season-particles span { color: #7fd6a0; }
body.season-pride .season-particles span { opacity: 0.42; }
body.phosphor.season-earthday .season-particles span { color: #88b8d6; }
body.season-fullmoon .season-particles span { color: #aebad4; }
body.phosphor.season-fullmoon .season-particles span { color: #e8edf7; }
body.theme-atmosphere-fullmoon .season-particles.atmosphere-layer span { color: #aebad4; }
body.phosphor.theme-atmosphere-fullmoon .season-particles.atmosphere-layer span { color: #e8edf7; }
body.theme-atmosphere-equinox .season-particles.atmosphere-layer span { color: #6f9187; }
body.season-internetday .season-particles span { color: #4f93b3; }
body.season-clockchange .season-particles span { color: #8a76b0; }
body.theme-atmosphere-clockchange .season-particles.atmosphere-layer span { color: #8a76b0; }
body.phosphor.season-solstice .season-particles span { color: #f0d58b; }
body.phosphor.season-pride .season-particles span { opacity: 0.46; }
body.theme-atmosphere-equinox::before {
content: "";
position: fixed;
inset: 0;
z-index: 998;
pointer-events: none;
background: linear-gradient(90deg, rgba(247,226,172,0.08), transparent 45%, rgba(30,42,58,0.1));
}
body.phosphor.theme-atmosphere-equinox::before {
background: linear-gradient(90deg, rgba(247,226,172,0.05), transparent 45%, rgba(8,13,22,0.13));
}
body.theme-base-spring .season-particles.base-layer span { color: #d98fb0; opacity: 0.3; font-size: 0.75rem !important; }
body.theme-base-summer .season-particles.base-layer span { color: #d3a43c; opacity: 0.3; font-size: 0.75rem !important; }
body.theme-base-autumn .season-particles.base-layer span { opacity: 0.3; font-size: 0.75rem !important; }
body.theme-base-winter .season-particles.base-layer span { color: #7ba3c9; opacity: 0.3; font-size: 0.75rem !important; }
body.phosphor.theme-base-spring .season-particles.base-layer span,
body.phosphor.theme-base-summer .season-particles.base-layer span,
body.phosphor.theme-base-autumn .season-particles.base-layer span { opacity: 0.35; }
body.phosphor.theme-base-winter .season-particles.base-layer span { color: #a9c8e8; opacity: 0.35; }
body.season-spring .season-particles span,
body.season-summer .season-particles span { opacity: 0.3; font-size: 0.75rem !important; }
body.phosphor.season-spring .season-particles span,
body.phosphor.season-summer .season-particles span { opacity: 0.35; }
.season-particles span.shoot {
top: 0;
width: 0;
height: 0;
animation-name: season-shoot;
animation-timing-function: linear;
animation-iteration-count: infinite;
text-shadow: none;
font-size: 0;
--shoot-dx: 88vmin;
--shoot-dy: 18vmin;
--shoot-rot: 12deg;
}
.season-particles span.shoot::before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 34px;
height: 2px;
border-radius: 999px;
background: linear-gradient(to left, rgba(235,245,255,0.98), rgba(170,205,255,0.45), rgba(255,255,255,0));
opacity: 0.92;
}
.season-particles span.shoot::after {
content: "";
position: absolute;
right: -1px;
top: -1px;
width: 4px;
height: 4px;
border-radius: 999px;
background: currentColor;
box-shadow: 0 0 12px currentColor;
}
body.season-perseids .season-particles span.shoot::before,
body.theme-atmosphere-perseids .season-particles.atmosphere-layer span.shoot::before {
background: linear-gradient(to left, rgba(255,255,255,0.98), rgba(127,166,216,0.7), rgba(127,166,216,0));
opacity: 0.98;
}
body.season-perseids .season-particles span.shoot::after,
body.theme-atmosphere-perseids .season-particles.atmosphere-layer span.shoot::after,
body.theme-atmosphere-geminids .season-particles.atmosphere-layer span.shoot::after {
box-shadow: 0 0 14px currentColor;
}
@keyframes season-shoot {
0%   { transform: translate(0, 0) rotate(var(--shoot-rot)); opacity: 0; }
8%   { opacity: 0.92; }
100% { transform: translate(var(--shoot-dx), var(--shoot-dy)) rotate(var(--shoot-rot)); opacity: 0; }
}
.thunder-flash {
position: fixed;
inset: 0;
z-index: 10490;
pointer-events: none;
background: #dfe8ff;
opacity: 0;
}
.thunder-flash.on { animation: thunder-blitz 0.55s ease-out; }
@keyframes thunder-blitz {
0%   { opacity: 0.5; }
12%  { opacity: 0.05; }
22%  { opacity: 0.35; }
100% { opacity: 0; }
}
html.theme-effects-paused .season-particles span,
html.theme-effects-paused .season-sleigh,
html.theme-effects-paused .season-rocket,
html.theme-effects-paused .season-burst span,
html.theme-effects-paused .season-cat,
html.theme-effects-paused .thunder-flash,
html.theme-effects-paused body.theme-atmosphere-clockchange #tray-clock {
animation-play-state: paused !important;
}
.fog-layer {
position: fixed;
inset: 0;
z-index: 10480;
pointer-events: none;
background:
radial-gradient(ellipse 90% 55% at 25% 25%, rgba(198,203,208,0.22), transparent 65%),
radial-gradient(ellipse 80% 50% at 75% 65%, rgba(198,203,208,0.18), transparent 65%);
animation: fog-drift 40s ease-in-out infinite alternate;
}
@keyframes fog-drift {
from { transform: translateX(-4vw); }
to   { transform: translateX(4vw); }
}
body.phosphor .fog-layer {
background:
radial-gradient(ellipse 90% 55% at 25% 25%, rgba(150,160,172,0.16), transparent 65%),
radial-gradient(ellipse 80% 50% at 75% 65%, rgba(150,160,172,0.13), transparent 65%);
}
@media (prefers-reduced-motion: reduce) {
.thunder-flash { display: none; }
.fog-layer { animation: none; }
}
@media print {
.thunder-flash, .fog-layer { display: none !important; }
}
.lightbox {
position: fixed;
inset: 0;
z-index: 10700;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 18, 14, 0.82);
cursor: zoom-out;
padding: 24px;
}
.lightbox img {
max-width: min(92vw, 1000px);
max-height: 88vh;
border: 3px solid var(--paper);
border-radius: 4px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
background: #fff;
}
.lightbox-close {
position: absolute;
top: max(14px, env(safe-area-inset-top));
right: 16px;
width: 36px;
height: 36px;
border: 2px solid var(--paper);
border-radius: 6px;
background: rgba(28, 27, 25, 0.8);
color: var(--paper);
font-family: var(--font-mono);
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
}
@media print { .lightbox { display: none !important; } }
.mines-window {
position: fixed;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
z-index: 10800;
width: min(92vw, 320px);
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 8px;
box-shadow: 10px 10px 0 var(--shadow);
font-family: var(--font-mono);
color: var(--ink);
user-select: none;
}
.mines-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ink);
color: var(--paper);
padding: 6px 8px 6px 12px;
border-radius: 6px 6px 0 0;
cursor: move;
touch-action: none;
}
.mines-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; }
.mines-close {
width: 24px; height: 24px;
border: 2px solid var(--paper);
border-radius: 5px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-weight: 700;
cursor: pointer;
line-height: 1;
}
.mines-close:hover { background: var(--paper); color: var(--red); }
.mines-bar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 10px;
border-bottom: 2px solid var(--ink);
background: var(--paper-dim);
}
.mines-count, .mines-time {
font-variant-numeric: tabular-nums;
font-weight: 700;
font-size: 0.95rem;
background: var(--ink);
color: #ff5a44;
padding: 2px 8px;
border-radius: 4px;
letter-spacing: 2px;
}
.mines-face {
width: 34px; height: 34px;
border: 2px solid var(--ink);
border-radius: 6px;
background: var(--paper);
font-size: 1.05rem;
cursor: pointer;
line-height: 1;
}
.mines-face:active { transform: translateY(1px); }
.mines-board {
display: grid;
gap: 2px;
padding: 10px;
}
.mines-cell {
aspect-ratio: 1 / 1;
border: 1.5px solid var(--ink);
border-radius: 3px;
background: #d3cfc4;
box-shadow: inset -3px -3px 0 rgba(28,27,25,0.32), inset 3px 3px 0 rgba(255,255,255,0.9);
font-family: var(--font-mono);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
padding: 0;
line-height: 1;
}
.mines-cell:hover:not(.open):not(:disabled) { background: #c8c3b6; }
.mines-cell.open {
background: var(--paper);
border-color: rgba(28,27,25,0.35);
box-shadow: inset 1px 1px 3px rgba(28,27,25,0.22);
cursor: default;
}
.mines-window[data-level="medium"] .mines-cell { font-size: 0.78rem; }
.mines-window[data-level="hard"] .mines-cell { font-size: 0.68rem; border-width: 1px; }
.mines-levels {
display: flex;
gap: 6px;
padding: 8px 10px 0;
}
.mines-level {
flex: 1;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 1px;
padding: 5px 0;
border: 1.5px solid var(--ink);
border-radius: 4px;
background: var(--paper-dim);
color: var(--ink);
cursor: pointer;
opacity: 0.65;
}
.mines-level:hover { opacity: 1; }
.mines-level.active {
background: var(--blue);
color: var(--on-accent);
border-color: var(--blue);
opacity: 1;
}
.mines-cell.flag { color: var(--red); }
.mines-cell.mine { background: var(--red); color: #fff; }
.mines-status {
padding: 6px 10px 9px;
font-size: 0.62rem;
letter-spacing: 1px;
opacity: 0.6;
text-align: center;
}
body.phosphor .mines-window { background: #1e2127; border-color: #4a4f59; color: #e8e6df; }
body.phosphor .mines-bar { background: #24272e; border-bottom-color: #4a4f59; }
body.phosphor .mines-cell {
background: #363b45;
border-color: #4a4f59;
color: #e8e6df;
box-shadow: inset -3px -3px 0 rgba(0,0,0,0.55), inset 3px 3px 0 rgba(255,255,255,0.12);
}
body.phosphor .mines-cell:hover:not(.open):not(:disabled) { background: #3f4551; }
body.phosphor .mines-cell.open {
background: #191c21;
border-color: rgba(232,230,223,0.25);
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.6);
}
body.phosphor .mines-level { background: #2b2f37; border-color: #4a4f59; color: #e8e6df; }
body.phosphor .mines-level.active { background: var(--blue); border-color: var(--blue); color: var(--on-accent); }
body.phosphor .mines-face { background: #2b2f37; border-color: #4a4f59; color: #e8e6df; }
@media print { .mines-window { display: none !important; } }
.toast.achievement {
border: 2px solid #d9a53c;
border-left: 5px solid #d9a53c;
background: var(--ink);
color: #ffd97a;
letter-spacing: 0.5px;
}
.screensaver {
position: fixed;
inset: 0;
z-index: 11000;
background: #05060a;
overflow: hidden;
cursor: none;
}
.screensaver-logo {
position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 2px;
padding: 14px 22px;
border: 2px solid;
border-radius: 8px;
will-change: transform;
}
.screensaver-glyph { font-size: 1.9rem; }
.startmenu-folder::before { content: "▸ "; }
.startmenu-folder.open::before { content: "▾ "; }
.startmenu-sub { display: flex; flex-direction: column; }
.startmenu-sub.hidden { display: none; }
.startmenu-subitem { padding-left: 28px; opacity: 0.9; }
.defrag-window {
position: fixed;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
z-index: 10800;
width: min(94vw, 420px);
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 8px;
box-shadow: 10px 10px 0 var(--shadow);
font-family: var(--font-mono);
color: var(--ink);
user-select: none;
}
.defrag-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ink);
color: var(--paper);
padding: 6px 8px 6px 12px;
border-radius: 6px 6px 0 0;
cursor: move;
touch-action: none;
}
.defrag-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; }
.defrag-close {
width: 24px; height: 24px;
border: 2px solid var(--paper);
border-radius: 5px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-weight: 700;
cursor: pointer;
line-height: 1;
}
.defrag-close:hover { background: var(--paper); color: var(--red); }
.defrag-grid {
display: grid;
gap: 2px;
padding: 12px;
}
.defrag-cell {
aspect-ratio: 1 / 1;
border-radius: 1px;
}
.defrag-cell.frag { background: var(--red); }
.defrag-cell.frag:nth-child(3n) { background: #d9a53c; }
.defrag-cell.frag:nth-child(7n) { background: var(--blue); }
.defrag-cell.free { background: rgba(28, 27, 25, 0.12); }
.defrag-cell.done { background: var(--green); }
.defrag-progress {
position: relative;
height: 18px;
margin: 0 12px;
border: 1.5px solid var(--ink);
border-radius: 4px;
background: var(--paper-dim);
overflow: hidden;
}
.defrag-fill {
height: 100%;
width: 0;
background: repeating-linear-gradient(90deg, var(--blue) 0 8px, #4a74e0 8px 16px);
transition: width 0.15s linear;
}
.defrag-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1px;
}
.defrag-status {
padding: 8px 12px 2px;
font-size: 0.7rem;
letter-spacing: 0.5px;
opacity: 0.75;
min-height: 1.5em;
}
.defrag-eta {
padding: 0 12px 10px;
font-size: 0.64rem;
letter-spacing: 0.5px;
opacity: 0.5;
}
body.phosphor .defrag-window { background: #1e2127; border-color: #4a4f59; color: #e8e6df; }
body.phosphor .defrag-cell.free { background: rgba(232, 230, 223, 0.12); }
body.phosphor .defrag-progress { background: #24272e; border-color: #4a4f59; }
@media print { .defrag-window, .screensaver { display: none !important; } }
.scan-window {
position: fixed;
left: 50%;
top: 44%;
transform: translate(-50%, -50%);
z-index: 10800;
width: min(94vw, 400px);
background: var(--paper);
border: 2px solid var(--ink);
border-radius: 8px;
box-shadow: 10px 10px 0 var(--shadow);
font-family: var(--font-mono);
color: var(--ink);
user-select: none;
}
.scan-titlebar {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--ink);
color: var(--paper);
padding: 6px 8px 6px 12px;
border-radius: 6px 6px 0 0;
cursor: move;
touch-action: none;
}
.scan-title { font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; }
.scan-close {
width: 24px; height: 24px;
border: 2px solid var(--paper);
border-radius: 5px;
background: var(--ink);
color: var(--paper);
font-family: var(--font-mono);
font-weight: 700;
cursor: pointer;
line-height: 1;
}
.scan-close:hover { background: var(--paper); color: var(--red); }
.scan-log {
height: 180px;
overflow-y: auto;
margin: 12px;
padding: 8px 10px;
background: #0d0f0c;
color: #7fe0a0;
border-radius: 6px;
font-size: 0.72rem;
line-height: 1.6;
letter-spacing: 0.3px;
}
.scan-result { color: #59c9e8; font-weight: 700; }
.scan-progress {
position: relative;
height: 18px;
margin: 0 12px 12px;
border: 1.5px solid var(--ink);
border-radius: 4px;
background: var(--paper-dim);
overflow: hidden;
}
.scan-fill {
height: 100%;
width: 0;
background: repeating-linear-gradient(90deg, var(--green) 0 8px, #4aa571 8px 16px);
transition: width 0.1s linear;
}
.scan-pct {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 1px;
}
body.phosphor .scan-window { background: #1e2127; border-color: #4a4f59; color: #e8e6df; }
body.phosphor .scan-progress { background: #24272e; border-color: #4a4f59; }
.note-rss a { color: var(--blue); text-decoration: none; }
.note-rss a:hover { text-decoration: underline; }
@media print { .scan-window { display: none !important; } }