:root {
--bg: #0b0a10;
--ink: #d9d4cc;
--ink-dim: #8c8790;
--tape: #e3d6b4;
--tape-ink: #2a2620;
--balloon: #f4f1ea;
--balloon-ink: #15131a;
--eye: #d62222;
--focus: #e9e4da;
--font-ui: 'sonomama ui', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); }
body { font: 14px/1.4 var(--font-ui); text-transform: lowercase; -webkit-text-size-adjust: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app { display: none; }
.js #app { display: block; position: fixed; inset: 0; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
#screen { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: none; }
#screen.on { display: block; }
.skip { position: absolute; left: 8px; top: -40px; z-index: 50; background: var(--bg); color: var(--ink); padding: 6px 10px; }
.skip:focus { top: 8px; }
#plainly { font-size: 16px; max-width: 34rem; margin: 0 auto; padding: 48px 20px calc(48px + env(safe-area-inset-bottom)); }
.js #plainly { display: none; }
.js.plainly #app { display: none; }
.js.plainly #plainly { display: block; }
#plainly h1 { font-size: 1.1rem; font-weight: normal; letter-spacing: .04em; margin: 0 0 1.5rem; }
#plainly ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
#plainly li { padding: .45rem 0; border-bottom: 1px solid #24212b; }
#plainly li a { display: inline-flex; align-items: center; min-width: 7.5rem; min-height: 44px; }
#plainly .records li { color: var(--ink); }
#plainly a:hover { color: #fff; }
#plainly li span { color: var(--ink-dim); }
#plainly li span, #plainly li span + a { font-size: 14px; }
#plainly .bio { color: var(--ink-dim); }
.no-js-only { display: block; }
.js .no-js-only { display: none; }
@media (prefers-reduced-motion: reduce) {
* { scroll-behavior: auto !important; }
}
#plainly .back { display: none; }
.js #plainly .back { display: block; }
#plainly h1:focus { outline: none; }
.zg-v .zm { position: relative; }
.zg-v .zm::before, .zg-v .zm::after { content: ''; position: absolute; pointer-events: none; }
.zg-v .z5::after { left: 18%; right: 18%; top: 55%; height: 1px; background: currentColor; }
.zg-v .z6::after { left: -12%; right: -12%; top: 55%; height: 1px; background: currentColor; }
.zg-v .z4::before { left: -8%; width: 52%; top: calc(55% - 1px); height: 1px; background: currentColor; }
.zg-v .z4::after { left: 44%; width: 56%; top: calc(55% + 1px); height: 1px; background: currentColor; }
.zg-v .z7::after, .zg-v .z8::after {
background: linear-gradient(to top right, transparent calc(50% - .7px), currentColor calc(50% - .7px), currentColor calc(50% + .7px), transparent calc(50% + .7px)); }
.zg-v .z7::after { left: 12%; right: 12%; top: 28%; bottom: 18%; }
.zg-v .z8::after { left: -14%; right: -14%; top: 8%; bottom: 4%; }
@font-face {
font-family: 'sonomama ui';
src: url(../assets/fonts/ui.woff2) format('woff2'), url(../assets/fonts/ui.woff) format('woff');
font-display: block;
}
#screen.on { z-index: 20; }
.pc {
--k: #0c0c10; --dk: #2c2c34; --lo: #7e7e86; --face: #bebec2; --lt: #e8e8ea; --hi: #f8f8f6;
--navy: #263a80; --navy2: #33498f; --navy-hi: #4662a6; --link: #2848a8; --visited: #6a3c9c;
--paper: #f8f8f6; --desk: #16203f; --sel: #263a80;
--ink: #0c0c10; --ink2: #4a4a53; --tt: #f8f8f6; --sw-o: #d4d8e0; --sw-hit: #4a5a8a; --sw-won: #e6ecf6;
--n1: #2848a8; --n2: #2e6c40; --n3: #8c2628; --n4: #263a80; --n5: #6a3c9c; --n6: #2c6c6c;
position: relative; overflow: hidden; background: var(--desk);
font: 10px/12px 'sonomama ui', ui-monospace, monospace; color: var(--ink);
text-transform: lowercase; -webkit-font-smoothing: none; font-smooth: never; text-rendering: optimizeSpeed;
cursor: default; user-select: none; -webkit-user-select: none; touch-action: manipulation;
image-rendering: pixelated;
}
.pc button, .pc input, .pc textarea, .pc select { font: inherit; color: inherit; text-transform: lowercase; }
.pc button { cursor: inherit; }
.pc :focus-visible { outline: 1px dotted var(--ink); outline-offset: -2px; }
.pc-icons .pc-icon:focus-visible { outline: 1px dotted var(--hi); outline-offset: 0; }
.pc-icons .pc-icon:focus-visible .lbl { background: var(--sel); outline: 1px dotted var(--hi); outline-offset: 0; }
.pc a { color: var(--link); text-decoration: underline; text-underline-offset: 1px; text-decoration-thickness: 1px; }
.pc a:visited { color: var(--visited); }
.pc a, .pc .pg-recs .nm button { cursor: var(--hand, pointer); }
.pc-wall { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.pc-him { position: absolute; inset: 0; pointer-events: none; }
.pc-him button, .pc-him a { pointer-events: auto; }
.pc-wins { position: absolute; left: 0; top: 0; z-index: 2; }
.pc-icons { z-index: 1; position: absolute; left: 0; top: 0; right: 0; bottom: 16px; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.pc-icons > li { position: absolute; width: 58px; height: 36px; }
.pc-icons > li[hidden] { display: none; }
.pc-icons .pc-icon { pointer-events: auto; }
.pc-icon { display: flex; flex-direction: column; align-items: center; width: 58px; height: 36px; padding: 1px 0 0;
background: none; border: 0; margin: 0; color: var(--tt); }
.pc-icon .lbl { margin-top: 1px; padding: 0 1px 1px; white-space: nowrap; line-height: 9px; height: 10px;
background: var(--k); box-shadow: 1px 1px 0 #000; }
.pc-icon.sel .lbl { background: var(--sel); text-shadow: none; }
.pc-icon.sel .ic { filter: brightness(.7) sepia(1) hue-rotate(185deg) saturate(2.4); }
.pc .pc-icon, .pc a.pc-icon { text-decoration: none; color: var(--tt); }
.pc .fold .pc-icon { color: var(--ink); }
.bv-out { border: 1px solid; border-color: var(--hi) var(--k) var(--k) var(--hi); box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--lt); }
.bv-in { border: 1px solid; border-color: var(--lo) var(--hi) var(--hi) var(--lo); box-shadow: inset 1px 1px var(--k); }
.btn { background: var(--face); border: 1px solid; border-color: var(--hi) var(--k) var(--k) var(--hi);
box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--lt); padding: 1px 4px 1px; min-height: 13px; line-height: 9px;
display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.btn:active:not([disabled]), .btn.down { border-color: var(--k) var(--hi) var(--hi) var(--k); box-shadow: inset 1px 1px var(--lo); padding: 2px 3px 0 5px; }
.btn[disabled] { color: var(--lo); text-shadow: 1px 1px var(--hi); }
.win { position: absolute; background: var(--face); padding: 2px; display: flex; flex-direction: column;
border: 1px solid; border-color: var(--lt) var(--k) var(--k) var(--lt); box-shadow: inset -1px -1px var(--lo), inset 1px 1px var(--hi); }
.win[hidden] { display: none; }
.win-title { order: -1; flex: none; height: 13px; display: flex; align-items: center; gap: 2px; padding: 0 1px 0 2px; color: var(--tt);
background: repeating-conic-gradient(var(--navy) 0 25%, var(--navy2) 0 50%) 0 0 / 2px 2px; }
.win-title .ic { margin-right: 1px; }
.win-title .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: clip; line-height: 9px; padding-top: 1px; }
.win.blur .win-title { background: var(--lo); color: var(--face); }
.win-x { width: 13px; height: 11px; padding: 0; justify-content: center; min-height: 0; }
.win-x .ic { margin: 0; }
.win-body { position: relative; order: 0; flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 2px; }
.win-status { order: 1; flex: none; height: 12px; margin-top: 2px; padding: 1px 3px 0; line-height: 9px; white-space: nowrap; overflow: hidden; }
.pc.phone .win { border-width: 1px; }
.br-tools { order: 1; display: flex; gap: 2px; flex-wrap: nowrap; overflow: hidden; }
.br-go { order: 2; display: flex; align-items: center; gap: 3px; margin-top: 2px; }
.br-go label { flex: none; padding-left: 1px; }
.br-addr { flex: 1; min-width: 0; height: 13px; background: var(--paper); padding: 1px 2px 0; line-height: 9px; white-space: nowrap; overflow: hidden; }
.br-page { order: 3; flex: 1; min-height: 0; margin-top: 2px; background: var(--paper); overflow-y: auto; overflow-x: hidden;
-webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--face) var(--lt); }
.br-page::-webkit-scrollbar { width: 8px; }
.br-page::-webkit-scrollbar-track { background: var(--lt); }
.br-page::-webkit-scrollbar-thumb { background: var(--face); border: 1px solid; border-color: var(--hi) var(--k) var(--k) var(--hi); }
.br-page.has-sb { scrollbar-width: none; }
.br-page.has-sb::-webkit-scrollbar { display: none; }
.br-page.has-sb .pg { padding-right: 12px; }
.br-sb { position: absolute; z-index: 2; width: 8px; display: flex; flex-direction: column; }
.br-sb[hidden] { display: none; }
.br-sb i { display: block; font-style: normal; }
.br-sb .up, .br-sb .dn { flex: none; height: 8px; padding: 0; box-sizing: border-box; position: relative; }
.br-sb .up::after, .br-sb .dn::after { content: ''; position: absolute; left: 1px; top: 2px; border: 2px solid transparent; border-width: 0 2px 2px; border-bottom-color: var(--ink); pointer-events: none; }
.br-sb .dn::after { border-width: 2px 2px 0; border-color: var(--ink) transparent transparent; top: 3px; }
.br-sb .tr { flex: 1; position: relative; background: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; }
.br-sb .tr b { position: absolute; left: 0; width: 8px; box-sizing: border-box; padding: 0; pointer-events: none; }
.br-fav { position: absolute; z-index: 3; background: var(--face); padding: 2px; min-width: 96px; }
.br-fav[hidden] { display: none; }
.br-fav a { display: flex; align-items: center; gap: 4px; padding: 2px 4px; color: var(--ink); text-decoration: none; height: 16px; }
.br-fav a:hover, .br-fav a:focus-visible { background: var(--sel); color: var(--tt); outline: none; }
.pg { padding: 3px 4px 10px; }
.pg-head { display: flex; align-items: center; gap: 5px; background: var(--navy); color: var(--tt); padding: 3px 4px; height: 18px; }
.pg-links { list-style: none; margin: 4px 0 0; padding: 0; }
.pg-links li { border-bottom: 1px dotted var(--face); }
.pg-links li:last-child { border-bottom: 0; }
.pg-links a { display: flex; align-items: center; gap: 5px; min-height: max(20px, var(--tap, 20px)); padding: 0 2px;
box-sizing: border-box; text-decoration: none; }
.pg-links a .n { text-decoration: underline; text-underline-offset: 1px; text-decoration-thickness: 1px; line-height: 12px; }
.pg-links a .h { color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: auto; min-width: 0; }
.pg-links a:hover .n, .pg-links a:focus-visible .n { color: var(--link-hi, var(--navy)); }
.pg-sec { margin: 8px 0 3px; padding-bottom: 1px; border-bottom: 1px solid var(--ink); }
.pg-recs { list-style: none; margin: 0; padding: 0; }
.pg-recs li { display: flex; align-items: center; gap: 5px; padding: 3px 2px; }
.pg-recs .cv { width: 20px; height: 20px; flex: none; background-size: cover; image-rendering: pixelated; border: 1px solid var(--k); }
.pg-recs .nm { min-width: 0; }
.pg-recs .nm button { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-underline-offset: 1px; text-align: left; }
.pg-recs .dt { color: var(--ink2); margin-left: 3px; }
.pg-recs .ln { margin-left: auto; display: flex; gap: 3px; flex: none; }
.pg-recs .ln { gap: 1px; }
.pg-recs .ln a { display: inline-flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box;
min-width: var(--tap, 16px); min-height: var(--rtap, var(--tap, 16px)); }
.pg-bio { margin: 10px 2px 0; color: var(--dk); line-height: 12px; }
.pg-hr { height: 0; border: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 8px 0 0; }
.pg-embed { display: flex; flex-direction: column; gap: 4px; height: 100%; }
.pg-embed iframe { flex: 1; width: 100%; border: 0; background: var(--k); }
.fold { flex: 1; min-height: 0; background: var(--paper); overflow: auto; padding: 4px;
display: flex; flex-wrap: wrap; align-content: flex-start; gap: 4px; }
.fold .pc-icon { color: var(--ink); width: 64px; height: auto; padding-bottom: 2px; }
.fold .pc-icon .lbl { background: none; box-shadow: none; text-shadow: none; white-space: normal; text-align: center; height: auto; line-height: 9px; max-width: 62px; }
.fold .pc-icon .cv { width: 32px; height: 32px; background-size: cover; image-rendering: pixelated; border: 1px solid var(--k); }
.fold .pc-icon.sel .lbl { color: var(--tt); }
.rec { flex: 1; min-height: 0; background: var(--paper); overflow: auto; padding: 6px; display: flex; gap: 8px; align-items: flex-start; }
.rec .cv { flex: none; width: 98px; height: 98px; background-size: 96px 96px; background-position: 1px 1px; background-repeat: no-repeat;
image-rendering: pixelated; border: 1px solid var(--k); }
.rec .side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rec .dt { color: var(--ink2); }
.rec ul { list-style: none; margin: 0; padding: 0; }
.rec li { display: flex; align-items: center; gap: 5px; min-height: max(20px, var(--tap, 20px)); }
.rec li a { flex: 1; display: flex; align-items: center; align-self: stretch; }
.rec .play { width: 22px; justify-content: center; align-self: flex-start; }
.tri { display: block; width: 0; height: 0; border-style: solid; border-width: 4px 0 4px 6px; border-color: transparent transparent transparent var(--ink); }
.play.down .tri { border-width: 0; width: 6px; height: 7px; background: var(--ink); }
.pc.phone .rec .cv { width: 82px; height: 82px; background-size: 80px 80px; }
.house { flex: 1; min-height: 0; background: var(--k); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.house canvas { image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.house a { position: absolute; display: block; }
.paint { flex: 1; min-height: 0; display: flex; gap: 2px; }
.paint-tools { flex: none; width: 24px; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.paint-sw { width: 20px; height: 13px; padding: 0; min-height: 0; justify-content: center; }
.paint-sw i { display: block; width: 12px; height: 7px; border: 1px solid var(--k); }
.paint-sw.down i { outline: 1px dotted var(--ink); outline-offset: 1px; }
.paint-clear { margin-top: auto; padding: 1px 2px; font-size: 10px; }
.paint-area { flex: 1; min-width: 0; background: var(--lo); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.paint-area canvas { background: #f8f8f6; image-rendering: pixelated; image-rendering: crisp-edges; touch-action: none; display: block; cursor: crosshair; }
.pc.phone .paint { flex-direction: column; }
.pc.phone .paint-tools { width: auto; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; }
.pc.phone .paint-sw { width: 22px; height: 20px; }
.pc.phone .paint-sw i { width: 14px; height: 12px; }
.pc.phone .paint-clear { margin: 0 0 0 auto; }
.sw { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; }
.sw-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 3px; align-self: stretch; }
.sw-n { background: var(--k); color: #e04a3c; padding: 2px 3px 0; min-width: 24px; text-align: right; height: 13px; line-height: 10px; letter-spacing: 1px; }
.sw-grid { display: grid; grid-template-columns: repeat(8, 14px); grid-auto-rows: 14px; padding: 0; }
.sw-c { width: 14px; height: 14px; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;
background: var(--face); border: 1px solid; border-color: var(--hi) var(--k) var(--k) var(--hi); box-shadow: inset -1px -1px var(--lo); line-height: 9px; }
.sw-c.o { border: 0; border-right: 1px solid var(--lo); border-bottom: 1px solid var(--lo); box-shadow: none; background: var(--sw-o); }
.sw-c.hit { background: var(--sw-hit); }
.sw-c[data-n="1"] { color: var(--n1); } .sw-c[data-n="2"] { color: var(--n2); } .sw-c[data-n="3"] { color: var(--n3); }
.sw-c[data-n="4"] { color: var(--n4); } .sw-c[data-n="5"] { color: var(--n5); } .sw-c[data-n="6"] { color: var(--n6); }
.pc.phone .sw-grid { grid-template-columns: repeat(8, 20px); grid-auto-rows: 20px; }
.pc.phone .sw-c { width: 20px; height: 20px; }
.sw.won .sw-c.o { background: var(--sw-won); }
.note { flex: 1; min-height: 0; width: 100%; resize: none; border: 0; background: var(--paper); padding: 2px 3px; outline: none;
line-height: 12px; user-select: text; -webkit-user-select: text; cursor: text; }
.note { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--face) var(--lt); }
.note::-webkit-scrollbar { width: 8px; }
.note::-webkit-scrollbar-track { background: var(--lt); }
.note::-webkit-scrollbar-thumb { background: var(--face); border: 1px solid; border-color: var(--hi) var(--k) var(--k) var(--hi); }
.echo { flex: 1; min-height: 0; background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 6px; }
.echo img { image-rendering: pixelated; max-width: 100%; max-height: 80%; }
.pc-menu { position: absolute; left: 1px; bottom: 15px; z-index: 30; display: flex; background: var(--face); padding: 2px; }
.pc-menu[hidden], .pc-sub[hidden] { display: none; }
.pc-menu .side { width: 13px; flex: none; background: repeating-conic-gradient(var(--navy) 0 25%, var(--navy2) 0 50%) 0 0 / 2px 2px;
position: relative; overflow: hidden; }
.pc-menu ul, .pc-sub ul { list-style: none; margin: 0; padding: 0; min-width: 92px; }
.pc-mi { display: flex; align-items: center; gap: 5px; width: 100%; height: 18px; padding: 0 6px 0 3px; border: 0; background: none;
text-align: left; color: var(--ink); text-decoration: none; white-space: nowrap; }
a.pc-mi { color: var(--ink); text-decoration: none; }
.pc-mi:hover, .pc-mi:focus-visible, .pc-mi.open { background: var(--sel); color: var(--tt); outline: none; }
.pc-mi .arr { margin-left: auto; padding-left: 8px; }
.pc-mi .ic { flex: none; }
.pc-sep { height: 0; border-top: 1px solid var(--lo); border-bottom: 1px solid var(--hi); margin: 2px 1px; }
.pc-sub { position: absolute; z-index: 31; background: var(--face); padding: 2px; }
.pc-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 25; background: var(--face);
border-top: 1px solid var(--lt); box-shadow: inset 0 1px var(--hi); display: flex; align-items: center; gap: 2px; padding: 1px 2px 0; }
.pc-begin { height: 13px; font-weight: normal; padding: 1px 4px 1px 2px; }
.pc-tasks { flex: 1; min-width: 0; display: flex; gap: 2px; overflow: hidden; }
.pc-task { height: 13px; min-width: 0; max-width: 92px; flex: 0 1 92px; overflow: hidden; justify-content: flex-start; }
.pc-task .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.pc-task.down { background: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; }
.pc-tray { flex: none; height: 13px; display: flex; align-items: center; gap: 3px; padding: 0 3px; }
.pc-tray button { background: none; border: 0; padding: 0; display: flex; }
.pc-clock { white-space: nowrap; padding-top: 1px; }
.pc.phone .pc-task { flex: none; width: 22px; max-width: 22px; justify-content: center; padding-left: 2px; padding-right: 2px; }
.pc.phone .pc-task .t { display: none; }
.pc-task .t2 { display: none; }
.pc.phone .pc-task[data-win="web"] { flex: 0 1 auto; width: auto; max-width: none; min-width: 22px; justify-content: center; padding: 0 2px; }
.pc.phone .pc-task[data-win="web"] > .ic { display: none; }
.pc.phone .pc-task[data-win="web"] .t2 { display: block; white-space: nowrap; overflow: hidden; }
.pc.phone .pc-task.pc-min { width: 16px; max-width: 16px; padding-left: 1px; padding-right: 1px; }
.pc.phone .pc-tray { gap: 1px; padding: 0 1px; }
.pc.phone .pc-tray .pc-prn { display: none; }
.pc-saver { position: absolute; inset: 0; z-index: 50; background: var(--k); }
.pc-saver[hidden] { display: none; }
.pc-boot { position: absolute; inset: 0; z-index: 45; display: none; background: transparent; }
.pc.bt .pc-boot { display: block; }
.pc-dark { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.pc-boot .logo { position: absolute; left: 50%; top: 46%; visibility: hidden; display: block; width: 12px; height: 12px;
margin: -6px 0 0 -6px; transform: scale(4); image-rendering: pixelated; }
.pc.bt-logo .pc-boot .logo { visibility: visible; }
.pc-him-off { position: absolute; inset: 0; z-index: 46; pointer-events: none; }
.pc.bt-1 .pc-icons, .pc.bt-1 .pc-bar, .pc.bt-1 .pc-wins, .pc.bt-2 .pc-bar, .pc.bt-2 .pc-wins, .pc.bt-3 .pc-wins { visibility: hidden; }
.pc.wait, .pc.wait * { cursor: var(--wait, wait) !important; }
.pc-hourglass { position: absolute; z-index: 60; width: 11px; height: 16px; pointer-events: none;
background: url(../assets/computer/cursor_wait_x1.png) 0 0 / 11px 16px no-repeat; image-rendering: pixelated; }
.pc-hourglass[hidden] { display: none; }
.pc-saver canvas { width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.pc.phone .br-tools { gap: 1px; }
.pc.phone .br-tools .btn { padding-left: 2px; padding-right: 2px; }
.pc.phone .br-tools .btn:active:not([disabled]), .pc.phone .br-tools .btn.down { padding: 2px 1px 0 3px; }
.pc.short .win[data-win=web] .br-go, .pc.short .win[data-win=web] .win-status { display: none; }
.pc.short .pg { padding: 2px 3px 6px; }
.pc.short .pg-head { height: 14px; padding: 1px 4px; }
.pc.short .pg-links { margin-top: 1px; }
.pc.short .pg-sec { margin: 4px 0 2px; }
.pc.short .pg-recs li { padding: 1px 2px; }
.pc.short .pg-recs .ln a { min-width: 22px; }
.pc.short .pg-hr { margin-top: 4px; }
.pc.short .pg-bio { margin-top: 5px; }
.pc.short .pg { padding-bottom: 2px; }
.pc.short .pg-sec { margin: 3px 0 1px; }
.pc.short .pg-hr { margin-top: 2px; margin-bottom: 0; }
.pc.short .pg-bio { margin-top: 2px; }
.pc.short:not(.phone) .pg { padding-top: 1px; }
.pc.short:not(.phone) .pg-links { margin-top: 0; }
.pc .br-page.has-sb .pg { padding-right: 12px; }
.pg-links a .n { flex: none; }
.ic.ic-g_eyes { width: 8px; height: 8px; background: url(../assets/computer/g_eyes.png) 0 0 / 8px 8px no-repeat; }
html[data-ui="dusk"] .pc {
--k: #0c0c10; --dk: #2a2b33; --lo: #62646e; --face: #9a9ca6; --lt: #b6b8c0; --hi: #cacdd2;
--navy: #22346e; --navy2: #2c3f7c; --navy-hi: #3d5592; --link: #1c3282; --visited: #522d78;
--paper: #cfd0d6; --desk: #121a34; --sel: #22346e;
--ink: #0c0c10; --ink2: #2b2c34; --tt: #eceef2; --sw-o: #b6bac4; --sw-hit: #42507c; --sw-won: #d0d6e0;
}
html[data-ui="night"] .pc {
--k: #08080d; --dk: #c4c7d2; --lo: #262a36; --face: #3b3f4d; --lt: #4b5060; --hi: #5c6276;
--navy: #1b2552; --navy2: #222d60; --navy-hi: #33437e; --link: #9db6ff; --visited: #c9a6ff; --link-hi: #c4d3ff;
--paper: #1d2130; --desk: #0c1020; --sel: #34478f;
--ink: #dfe1e8; --ink2: #a8acbb; --tt: #e2e5ee; --sw-o: #2a2e3c; --sw-hit: #5a2a30; --sw-won: #303648;
--n1: #9db6ff; --n2: #8ed39e; --n3: #f09a90; --n4: #b8c4ff; --n5: #d2a8ff; --n6: #88d6d6;
}
html[data-ui="small"] .pc {
--k: #040407; --dk: #b4b8c6; --lo: #171a24; --face: #272a36; --lt: #343846; --hi: #444a5c;
--navy: #151b3c; --navy2: #1b2248; --navy-hi: #29345e; --link: #8eaaf6; --visited: #ba9af2; --link-hi: #b8c8fa;
--paper: #12141d; --desk: #080a14; --sel: #2b3878;
--ink: #cdd0da; --ink2: #9a9eb0; --tt: #d2d6e2; --sw-o: #1c1f2a; --sw-hit: #4a2228; --sw-won: #222634;
--n1: #8eaaf6; --n2: #84c494; --n3: #e48c84; --n4: #a8b6f0; --n5: #c49cf0; --n6: #7cc6c6;
}
html[data-ui="night"] .pc .btn[disabled], html[data-ui="small"] .pc .btn[disabled] { color: #7c8294; text-shadow: none; }
html[data-ui="night"] .pc .pg-recs .cv, html[data-ui="small"] .pc .pg-recs .cv,
html[data-ui="night"] .pc .fold .pc-icon .cv, html[data-ui="small"] .pc .fold .pc-icon .cv {
border-color: #d6d8e0; box-shadow: 0 0 0 1px var(--k); filter: brightness(1.3); }
.pc .note, .pc .br-addr { color: var(--ink); }
.pc-bar .pc-off { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: none; }
.pc.phone.dock .win[data-win=web] .br-tools, .pc.phone.dock .win[data-win=web] .br-go,
.pc.phone.dock .win[data-win=web] .win-status { display: none; }
.pc.phone.dock .win[data-win=web] .br-page { margin-top: 0; }
.pc.phone.dock .pg-start .pg-sec, .pc.phone.dock .pg-start .pg-hr, .pc.phone.dock .pg-start .pg-bio,
.pc.phone.dock .pg-start .pg-recs > li:not(:first-child) { display: none; }
.pc.phone.dock .pg-start:has(.dz-new) .pg-recs { display: none; }
.pc.phone.dock .pg-start { padding: 2px 3px 2px; }
.pc.phone.dock .pg-start .pg-head { height: 15px; padding: 1px 4px; }
.pc.phone.dock .pg-start .pg-links { margin-top: 1px; }
.pc.phone.dock .pg-start .pg-recs { border-top: 1px solid var(--ink); margin-top: 2px; }
.pc-icons > li.gone, .pc-note.gone { visibility: hidden; }
.pc-icons > li.gone .pc-icon { pointer-events: none; }
.pc-icons > li.noplate .pc-icon .lbl { background: none; box-shadow: none; text-shadow: 1px 1px 0 #000; }
.ic { display: inline-block; background-image: url(../assets/computer/icons.png); background-repeat: no-repeat; image-rendering: pixelated; image-rendering: crisp-edges; flex: none; }
.ic-web { width: 24px; height: 24px; background-position: -0px -0px; }
.ic-records { width: 24px; height: 24px; background-position: -24px -0px; }
.ic-merch { width: 24px; height: 24px; background-position: -48px -0px; }
.ic-house { width: 24px; height: 24px; background-position: -72px -0px; }
.ic-paint { width: 24px; height: 24px; background-position: -96px -0px; }
.ic-sweeper { width: 24px; height: 24px; background-position: -120px -0px; }
.ic-notepad { width: 24px; height: 24px; background-position: -144px -0px; }
.ic-bin { width: 24px; height: 24px; background-position: -168px -0px; }
.ic-mail { width: 24px; height: 24px; background-position: -0px -24px; }
.ic-record_file { width: 24px; height: 24px; background-position: -24px -24px; }
.ic-disk { width: 24px; height: 24px; background-position: -48px -24px; }
.ic-s_web { width: 12px; height: 12px; background-position: -72px -24px; }
.ic-s_records { width: 12px; height: 12px; background-position: -84px -24px; }
.ic-s_merch { width: 12px; height: 12px; background-position: -96px -24px; }
.ic-s_house { width: 12px; height: 12px; background-position: -108px -24px; }
.ic-s_paint { width: 12px; height: 12px; background-position: -120px -24px; }
.ic-s_sweeper { width: 12px; height: 12px; background-position: -132px -24px; }
.ic-s_notepad { width: 12px; height: 12px; background-position: -144px -24px; }
.ic-s_bin { width: 12px; height: 12px; background-position: -156px -24px; }
.ic-s_mail { width: 12px; height: 12px; background-position: -168px -24px; }
.ic-s_cloud { width: 12px; height: 12px; background-position: -180px -24px; }
.ic-s_file { width: 12px; height: 12px; background-position: -0px -48px; }
.ic-p_instagram { width: 12px; height: 12px; background-position: -12px -48px; }
.ic-p_soundcloud { width: 12px; height: 12px; background-position: -24px -48px; }
.ic-p_spotify { width: 12px; height: 12px; background-position: -36px -48px; }
.ic-p_youtube { width: 12px; height: 12px; background-position: -48px -48px; }
.ic-p_tiktok { width: 12px; height: 12px; background-position: -60px -48px; }
.ic-g_power { width: 12px; height: 12px; background-position: -72px -48px; }
.ic-g_sound_on { width: 12px; height: 12px; background-position: -84px -48px; }
.ic-g_sound_off { width: 12px; height: 12px; background-position: -96px -48px; }
.ic-g_arrow { width: 12px; height: 12px; background-position: -108px -48px; }
.ic-g_hand { width: 12px; height: 12px; background-position: -120px -48px; }
.ic-g_close { width: 8px; height: 8px; background-position: -132px -48px; }
.ic-g_flake { width: 8px; height: 8px; background-position: -140px -48px; }
.ic-g_flag { width: 8px; height: 8px; background-position: -148px -48px; }
.ic-g_hourglass { width: 8px; height: 8px; background-position: -156px -48px; }
.pc-him { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pc-him .him-cv, .him-off-cv { position: absolute; left: 0; top: 0; display: block; pointer-events: none;
image-rendering: pixelated; image-rendering: crisp-edges; }
div.pc-him-off { position: absolute; inset: 0; z-index: 46; pointer-events: none; }
.pc-him .him-btn { position: absolute; pointer-events: auto; margin: 0; padding: 0; border: 0; background: transparent;
cursor: var(--hand, pointer); -webkit-tap-highlight-color: transparent; }
.pc-him .him-btn[hidden] { display: none; }
.pc-him .him-btn:focus { outline: none; }
.pc-him .him-btn:focus-visible { outline: 1px dotted var(--focus, #e9e4da); outline-offset: 1px; }
.pc-him .him-balloon { position: absolute; display: block; pointer-events: none;
image-rendering: pixelated; image-rendering: crisp-edges; }
.pc-him .him-balloon.up { z-index: 24; }
.pc-him .him-draft { position: absolute; transform: translate(0, -100%); margin-top: -1px;
font: 8px/1 var(--font-ui); color: #8c8790; background: #15131a; padding: 1px 2px;
pointer-events: none; text-transform: lowercase; }
.pc-him .him-draft.up { z-index: 25; }
.pc-tray .pc-prn[hidden] { display: none; }
.pc-tray .pc-clock { white-space: nowrap; padding: 1px 1px 0; color: var(--ink); line-height: 9px; height: 12px; align-items: center; }
.pc-tray .pc-clock:active { color: var(--navy-hi); }
.pc.phone .pc-tray { gap: 2px; padding: 0 2px; }
.fold .pc-icon .art { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.fold .pc-icon .art .ic-s_wav { transform: scale(2); }
.fold .pc-icon canvas.thumb { display: block; width: 32px; height: 32px; border: 1px solid var(--k); image-rendering: pixelated; }
.fold .pc-icon canvas.disc { display: block; image-rendering: pixelated; }
.fold.mc .pc-icon { width: 48px; }
.fold.mc .pc-icon .art { width: 24px; height: 26px; }
.fold.docs .pc-icon { width: 58px; }
.mc-path { order: -1; display: flex; align-items: center; gap: 4px; margin-bottom: 2px; }
.mc-path[hidden] { display: none; }
.mc-nd { flex: none; margin-top: 2px; padding: 1px 3px 0; height: 12px; line-height: 9px; }
.mc-nd[hidden] { display: none; }
.viewer { flex: 1; min-height: 0; background: var(--lo); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.viewer canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; }
.ms-list { flex: none; list-style: none; margin: 0; padding: 2px; background: var(--paper); }
.ms-buddy { display: flex; align-items: center; gap: 5px; width: 100%; min-height: max(16px, var(--tap, 16px)); padding: 0 3px; border: 0; background: none; text-align: left; color: var(--ink); }
.ms-buddy .s { color: var(--ink2); margin-left: auto; }
.ms-buddy.sel, .ms-buddy:focus-visible { background: var(--sel); color: var(--tt); outline: none; }
.ms-buddy.sel .s, .ms-buddy:focus-visible .s { color: var(--tt); }
.ms-talk { flex: 1; min-height: 0; margin-top: 2px; background: var(--paper); padding: 4px 6px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.ms-talk[hidden] { display: none; }
.ms-date { text-align: center; color: var(--ink2); }
.ms-row { display: flex; }
.ms-row.r { justify-content: flex-end; }
.ms-row canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.ms-typing { flex: none; height: 12px; margin-top: 2px; padding: 1px 3px 0; line-height: 9px; color: var(--ink2); white-space: nowrap; overflow: hidden; }
.mp-screen { flex: none; background: #0a0c12; display: flex; justify-content: center; padding: 2px; }
.mp-screen canvas { width: 192px; max-width: 100%; height: 56px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; }
.mp-bar { flex: none; display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.mp-bar .btn { min-width: max(18px, var(--tap, 18px)); min-height: max(13px, calc(var(--tap, 13px) * .6)); justify-content: center; }
.mp-t { margin-left: auto; background: #0a0c12; color: #8ccf72; padding: 1px 4px 0; height: 12px; line-height: 9px; letter-spacing: 1px; }
.mp-list { flex: 1; min-height: 0; margin: 2px 0 0; padding: 1px; list-style: none; background: var(--paper); overflow: auto; }
.mp-tr { display: flex; align-items: center; gap: 4px; width: 100%; min-height: max(14px, var(--tap, 14px)); padding: 0 3px; border: 0; background: none; text-align: left; color: var(--ink); }
.mp-tr.sel, .mp-tr:focus-visible { background: var(--sel); color: var(--tt); outline: none; }
.mp-tr canvas { width: 12px; height: 12px; flex: none; }
.mp-links { flex: none; display: flex; gap: 8px; margin-top: 2px; padding: 0 3px; }
.mp-links[hidden] { display: none; }
.mp-links a { display: inline-flex; align-items: center; gap: 4px; min-height: max(14px, var(--tap, 14px)); }
.ib-list { flex: 1 0 auto; min-height: 0; margin: 0; padding: 1px; list-style: none; background: var(--paper); overflow: auto; }
.ib-m { display: flex; align-items: center; gap: 4px; width: 100%; min-height: max(14px, var(--tap, 14px)); padding: 0 3px; border: 0; background: none; text-align: left; color: var(--ink); }
.ib-m .f { flex: none; width: 40px; overflow: hidden; white-space: nowrap; color: var(--ink2); }
.ib-m .s { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ib-m .t { flex: none; color: var(--ink2); }
.ib-m.unread .s { color: var(--ink); text-shadow: 1px 0 0 currentColor; letter-spacing: 1px; }
.ib-m.unread .t { color: var(--ink); }
.ib-m.sel, .ib-m:focus-visible { background: var(--sel); outline: none; }
.ib-m.sel span, .ib-m:focus-visible span { color: var(--tt); }
.ib-read { flex: none; height: 26px; margin-top: 2px; background: var(--paper); }
.ib-read[hidden] { display: none; }
.pr-list { flex: 1; min-height: 0; margin: 0; padding: 2px 3px; list-style: none; background: var(--paper); }
.pr-list li { display: flex; align-items: center; gap: 4px; min-height: max(14px, var(--tap, 14px)); }
.pr-list .f { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.pr-list .s, .pr-list .t { color: var(--ink2); white-space: nowrap; }
.pc.phone .pr-list .t { display: none; }
.dtm { flex: 1; min-height: 0; background: var(--paper); display: flex; align-items: center; justify-content: center; gap: 10px; padding: 4px; }
.dtm-face { width: 44px; height: 44px; image-rendering: pixelated; flex: none; }
.dtm-set { display: flex; align-items: center; gap: 4px; }
.dtm-row { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.dtm-row .btn { width: max(16px, var(--tap, 16px)); min-height: max(11px, calc(var(--tap, 11px) * .55)); justify-content: center; padding: 0; }
.dtm-v { display: block; min-width: 18px; text-align: center; background: var(--paper); padding: 2px 2px 0; height: 13px; line-height: 10px; color: var(--ink); }
.dtm-ap { align-self: center; color: var(--ink); }
.dtm-ok { flex: none; display: flex; justify-content: flex-end; margin-top: 2px; }
.fold.bin { flex-direction: column; flex-wrap: nowrap; gap: 2px; }
.bin-it { display: flex; align-items: center; gap: 6px; }
.bin-it .pc-icon { width: 64px; flex: none; }
.fold.bin .pc-icon .cv { width: 24px; height: 24px; }
.fold.bin .pc-icon .lbl { white-space: nowrap; overflow: hidden; max-width: 62px; }
.bin-it .from { flex: 1; min-width: 0; color: var(--ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bin-it .btn { flex: none; min-height: max(13px, calc(var(--tap, 13px) * .6)); }
.fold .echo { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.fold .echo img { image-rendering: pixelated; max-width: 100%; max-height: 80%; }
.fold.merch-shut { align-items: center; justify-content: center; align-content: center; }
.merch-box { border: 0; background: none; padding: 4px; width: max(56px, var(--tap, 56px)); height: max(56px, var(--tap, 56px)); display: flex; align-items: center; justify-content: center; }
.merch-box .ic { transform: scale(2); }
.merch-box.r1 .ic { transform: translate(-1px, 0) scale(2) rotate(-4deg); }
.merch-box.r2 .ic { transform: translate(1px, -1px) scale(2) rotate(4deg); }
.pc-icons > li.tiny { width: max(14px, var(--tap, 16px)); height: max(14px, var(--tap, 16px)); }
.pc-icons > li.tiny .pc-icon { width: 100%; height: 100%; padding: 0; justify-content: center; }
.pc-icons > li.tiny .pc-icon .ic { width: 12px; height: 12px; }
.pc-icons > li.tiny .pc-icon .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); padding: 0; box-shadow: none; }
.pc-file .art { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.pc-file .art .ic { transform: scale(2); }
.pc-file .ghost { position: absolute; left: 30px; top: 5px; width: 24px; display: flex; flex-direction: column; align-items: center; pointer-events: none;
-webkit-mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 2px 2px; mask: repeating-conic-gradient(#000 0 25%, transparent 0 50%) 0 0 / 2px 2px; }
.pc-file .ghost .lbl { margin-top: 2px; padding: 0 1px 1px; white-space: nowrap; line-height: 9px; height: 10px; color: var(--tt); background: var(--sel); }
.pc-file .arrow { position: absolute; left: 44px; top: 16px; width: 12px; height: 19px; pointer-events: none;
background: url(../assets/computer/cursor_arrow_x1.png) 0 0 no-repeat; image-rendering: pixelated; }
.pc.phone .pc-file .ghost { left: 30px; top: 5px; }
.pc.phone .pc-file .arrow { left: 44px; top: 16px; }
.pc-note { position: absolute; z-index: 1; image-rendering: pixelated; pointer-events: none; }
.pc-note[hidden] { display: none; }
html[data-ui="dusk"] .pc-note { filter: brightness(.82); }
html[data-ui="night"] .pc-note { filter: brightness(.6); }
html[data-ui="small"] .pc-note { filter: brightness(.45); }
.pc-tray .pc-mail { position: relative; }
.pc-tray .pc-mail .n { display: none; position: absolute; right: -3px; top: -3px; min-width: 7px; height: 7px; padding: 0 1px; line-height: 7px; font-size: 6px;
font-weight: normal; text-align: center; color: #fff; background: #c8302c; box-shadow: 0 0 0 1px var(--face); }
.pc-tray .pc-mail.has .n { display: block; }
.pc-task.pc-min[hidden] { display: none; }
.dp { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; background: var(--face); border: 0; box-shadow: none; }
.dp-mon { display: flex; flex-direction: column; align-items: center; }
.dp-scr { padding: 4px 4px 6px; background: #c6c6c6; border: 1px solid; border-color: #fff #404040 #404040 #fff; }
.dp-scr canvas { display: block; width: 64px; height: 48px; image-rendering: pixelated; border: 1px solid #404040; }
.dp-neck { width: 14px; height: 3px; background: #a8a8a8; }
.dp-foot { width: 36px; height: 3px; background: #c6c6c6; border: 1px solid; border-color: #fff #404040 #404040 #fff; }
.dp-row { display: flex; flex-direction: column; gap: 1px; align-self: stretch; }
.dp-l { color: var(--ink); }
.dp-list { list-style: none; margin: 0; padding: 1px; background: var(--paper); height: 38px; overflow-y: auto; }
.dp-list li { height: 9px; line-height: 9px; padding: 0 2px; white-space: nowrap; color: var(--ink); cursor: inherit; }
.dp-list li.sel { background: var(--sel); color: var(--tt); }
.pc.phone .dp-list li, .pc .dp-list li { min-height: 9px; }
.pc.phone .dp-list { height: 46px; }
.pc.phone .dp-list li { height: 11px; line-height: 11px; }
.dp-btns { align-self: stretch; display: flex; justify-content: flex-end; }
.dp-ok { min-width: 40px; height: max(14px, calc(var(--tap, 16px) * .7)); }
.pc-ctx ul { min-width: 64px; }
.pc.short .pg-recs li { flex-wrap: wrap; row-gap: 1px; }
.pc.short .pg-recs .nm { flex: 1 0 auto; max-width: calc(100% - 26px); }
.pc.short .pg-recs .nm button { white-space: nowrap; }
.pc.short .pg-recs .ln { margin-left: auto; }
.pc.phone .pg-recs li { flex-wrap: wrap; align-items: flex-start; row-gap: 2px; }
.pc.phone .pg-recs .nm { flex: 1 1 0; min-width: 0; max-width: none; }
.pc.phone .pg-recs .nm button { white-space: normal; }
.pc.phone .pg-recs .ln { flex: 1 0 100%; margin-left: 27px; justify-content: flex-start; }
.ic.ic-mycomputer { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -0px -0px no-repeat; }
.ic.ic-docs { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -24px -0px no-repeat; }
.ic.ic-messenger { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -48px -0px no-repeat; }
.ic.ic-player { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -72px -0px no-repeat; }
.ic.ic-inbox { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -96px -0px no-repeat; }
.ic.ic-printer { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -120px -0px no-repeat; }
.ic.ic-folder { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -144px -0px no-repeat; }
.ic.ic-cd { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -168px -0px no-repeat; }
.ic.ic-floppy { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -192px -0px no-repeat; }
.ic.ic-hdd { width: 24px; height: 24px; background: url(../assets/computer/programs.png) -216px -0px no-repeat; }
.ic.ic-s_mycomputer { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -0px -24px no-repeat; }
.ic.ic-s_docs { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -12px -24px no-repeat; }
.ic.ic-s_messenger { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -24px -24px no-repeat; }
.ic.ic-s_player { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -36px -24px no-repeat; }
.ic.ic-s_inbox { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -48px -24px no-repeat; }
.ic.ic-s_printer { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -60px -24px no-repeat; }
.ic.ic-s_datetime { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -72px -24px no-repeat; }
.ic.ic-s_folder { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -84px -24px no-repeat; }
.ic.ic-s_bmp { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -96px -24px no-repeat; }
.ic.ic-s_doc { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -108px -24px no-repeat; }
.ic.ic-s_jpg { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -120px -24px no-repeat; }
.ic.ic-s_wav { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -132px -24px no-repeat; }
.ic.ic-s_txt { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -144px -24px no-repeat; }
.ic.ic-s_cd { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -156px -24px no-repeat; }
.ic.ic-s_floppy { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -168px -24px no-repeat; }
.ic.ic-s_hdd { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -180px -24px no-repeat; }
.ic.ic-s_away { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -0px -36px no-repeat; }
.ic.ic-s_box { width: 12px; height: 12px; background: url(../assets/computer/programs.png) -12px -36px no-repeat; }
.dp-lw { position: relative; }
.dp-list.has-sb { scrollbar-width: none; padding-right: 9px; }
.dp-list.has-sb::-webkit-scrollbar { display: none; }
.pc-power { position: absolute; inset: 0; z-index: 48; overflow: hidden; pointer-events: auto;
cursor: default; -webkit-tap-highlight-color: transparent; touch-action: none; }
.pc-power[hidden] { display: none; }
.pc-power .pw-dim { position: absolute; inset: 0; display: none;
-webkit-backdrop-filter: brightness(.55); backdrop-filter: brightness(.55); }
.pc-power.pw-dim2 .pw-dim { -webkit-backdrop-filter: brightness(.3); backdrop-filter: brightness(.3); }
.pc-power .pw-panel { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: none;
align-items: center; gap: 5px; padding: 6px 10px 6px 8px; background: var(--face, #bebec2); color: var(--k, #0c0c10);
white-space: nowrap; line-height: 9px; }
.pc-power .pw-panel .ic { flex: none; }
.pc-power.pw-shutting { background: transparent; }
.pc-power.pw-shutting .pw-dim, .pc-power.pw-shutting .pw-panel { display: flex; }
.pc-power.pw-shutting .pw-dim { display: block; }
.pc-power .pw-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: none; object-fit: cover;
image-rendering: pixelated; image-rendering: crisp-edges; background: #0c0d13; }
.pc-power.pw-dot, .pc-power.pw-glass { background: #0c0d13; }
.pc-power.pw-dot .pw-cv, .pc-power.pw-glass .pw-cv { display: block; }
.pc-power .pw-type { position: absolute; left: 7%; top: 8%; right: 7%; display: none; color: #9cc4a8;
font: 10px/12px 'sonomama ui', ui-monospace, monospace; letter-spacing: 1px; white-space: pre-wrap;
word-break: break-all; text-transform: lowercase; pointer-events: none; }
.pc.phone .pc-power .pw-type { top: 10%; }
.pc-power.pw-glass .pw-type { display: block; }
.pc-power .pw-type .f0 { opacity: .78; }
.pc-power .pw-type .f1 { opacity: .52; }
.pc-power .pw-type .f2 { opacity: .3; }
.pc-power .pw-type .f3 { opacity: .14; }
.pc-power .pw-in { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
font-size: 16px; color: transparent; background: transparent; caret-color: transparent; pointer-events: none; }
.pc.pw-own .pc-boot, .pc.pw-own .pc-him-off { visibility: hidden; }
html.pw-crt, html.pw-crt body, html.pw-crt #app, html.pw-crt #screen { background: #0c0d13; }
.pc-power.pw-dot, .pc-power.pw-side { background: #21171b; }
.pc-power.pw-dot .pw-cv { background: #21171b; }
.pc-power .pw-side { position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none; }
.pc-power .pw-side[hidden] { display: none; }
.pc-power .pw-side:active { cursor: grabbing; }
.pc-power .pw-side-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated;
image-rendering: crisp-edges; background: #21171b; }
.pc-power .pw-side-bal { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; }
.pc-power .pw-side-bal[hidden] { display: none; }
.pc-power .pw-side-on { position: absolute; right: 1px; bottom: 1px; width: 16px; height: 16px; padding: 0; margin: 0;
border: 0; background: transparent; display: flex; align-items: flex-end; justify-content: flex-end; cursor: pointer;
-webkit-tap-highlight-color: transparent; opacity: .82; }
.pc-power .pw-side-on .ic { margin: 0 2px 2px 0; filter: brightness(.85); }
.pc-power .pw-side-on:focus-visible { outline: 1px dotted #b8b0c0; outline-offset: -1px; }
.pc.phone .pc-tray .pc-prn.g4-has { display: flex; }
.pr-list .g4-row .g4-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: 4px; background: none; border: 0;
padding: 0; margin: 0; text-align: left; cursor: pointer; min-height: max(14px, var(--tap, 14px)); }
.pr-list .g4-row .g4-open .f { text-decoration: underline; }
.g4-go, .g4-acts { flex: none; display: flex; justify-content: flex-end; gap: 4px; padding: 3px 1px 1px; }
.g4-go .btn, .g4-acts .btn { min-height: max(13px, calc(var(--tap, 13px) * .7)); padding-left: 6px; padding-right: 6px;
text-decoration: none; color: var(--ink); align-items: center; display: inline-flex; }
.g4-acts .btn[hidden] { display: none; }
.g4-still { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #21171b; overflow: hidden; }
.g4-still .g4-img { display: block; max-width: 100%; max-height: 100%; width: 100%; height: auto; object-fit: contain; image-rendering: pixelated; image-rendering: crisp-edges; -webkit-touch-callout: default; }
.pc .g4-card { position: absolute; inset: 0; z-index: 55; display: flex; flex-direction: column; align-items: center;
justify-content: center; gap: 4px; padding: 8px 8px 22px; background: #120d10; }
.pc .g4-card-in { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.pc .g4-card-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; image-rendering: pixelated; image-rendering: crisp-edges; -webkit-touch-callout: default;
-webkit-user-select: auto; user-select: auto; outline: 1px solid #3a2a30; }
.pc .g4-card .g4-acts { padding: 0; }
.pc-later { position: absolute; inset: 0; z-index: 47; display: none; overflow: hidden; background: #12121a;
touch-action: manipulation; }
.pc-later.on { display: block; }
.pc-later .lt-glass { position: absolute; left: 0; top: 0; image-rendering: pixelated; image-rendering: crisp-edges; }
.pc-later .lt-logo { position: absolute; left: 50%; top: 46%; width: 12px; height: 12px; margin: -6px 0 0 -6px;
transform: scale(4); image-rendering: pixelated; display: none; }
.pc-later.logo .lt-logo { display: block; }
.pc-later .lt-bios { position: absolute; left: 10px; top: 10px; color: #a6a8b2; line-height: 12px; white-space: pre;
display: none; text-shadow: 0 0 0 transparent; }
.pc-later.bios .lt-bios { display: block; }
.pc-later .lt-b-head { height: 14px; filter: grayscale(1) brightness(.9); }
.pc-later .lt-b-mem { margin-bottom: 12px; letter-spacing: 1px; }
.pc-later .lt-b-dr div { height: 12px; }
.pc-later .lt-b-cur { display: inline-block; }
.pc-later .lt-desk { position: absolute; inset: 0; }
.pc-later .lt-desk[hidden] { display: none; }
.pc-later .lt-wall { position: absolute; image-rendering: pixelated; image-rendering: crisp-edges; }
.pc-later .lt-icons { position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style: none; z-index: 1; }
.pc-later .lt-icons > li { position: absolute; width: 58px; height: 36px; }
.pc-later .lt-icons .pc-icon:focus-visible { outline: 1px dotted var(--hi); outline-offset: 0; }
.pc-later .lt-icons .pc-icon:focus-visible .lbl { background: var(--sel); }
.pc-later .lt-wins { position: absolute; left: 0; top: 0; z-index: 2; }
.pc-later .lt-fold .pc-icon.lt-grey .ic { filter: grayscale(1) contrast(.6) brightness(1.15); opacity: .55; }
.pc-later .lt-fold .pc-icon.lt-grey .lbl { color: var(--lo); }
.pc-later .lt-note { cursor: default; }
.pc-later .lt-bar { z-index: 25; }
.pc-later .lt-task { height: 13px; max-width: 92px; flex: 0 1 92px; overflow: hidden; justify-content: flex-start; min-width: 0; }
.pc-later .lt-task .t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; min-width: 0; }
.pc-later .lt-task.down { background: repeating-conic-gradient(var(--face) 0 25%, var(--hi) 0 50%) 0 0 / 2px 2px; }
.pc.phone .pc-later .lt-task { flex: none; width: 22px; max-width: 22px; justify-content: center; padding-left: 2px; padding-right: 2px; }
.pc.phone .pc-later .lt-task .t { display: none; }
.pc-later .pc-tray .lt-off { min-width: var(--tap, 12px); justify-content: center; }
.pc-later .pc-icon, .pc-later .pc-mi, .pc-later .pc-begin, .pc-later .lt-off { min-height: 0; }
.pc-later .lt-s0 .lt-icons, .pc-later .lt-s0 .lt-bar, .pc-later .lt-s1 .lt-bar { visibility: hidden; }
.pc-later .lt-fold { overflow-y: auto; overscroll-behavior: contain; }
.ag { padding:0 0 8px }
.ag-still { position:relative;overflow:hidden;background:#000;margin:0 -4px;line-height:0 }
.ag-still .ag-in { position:relative;width:320px;height:240px;transform-origin:0 0 }
.ag-still img,.ag-still canvas { position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges }
.ag-still img { width:320px;height:240px }
.ag-t { font:inherit;margin:7px 2px 4px;padding:0 0 3px;border-bottom:1px solid var(--lo,#7e7e86);font-weight:normal }
.ag-t a { color:var(--link,#2848a8);text-decoration:underline;text-underline-offset:1px;display:inline-flex;align-items:center;min-height:var(--tap,0) }
.ag-l { margin:0 2px;padding:0;list-style:none }
.ag-l li { margin:0 0 5px;line-height:12px;color:var(--ink,var(--dk,#2c2c34)) }
.br-page:has(.ag-card) { background:#000 }
.ag-card { position:relative;overflow:hidden;background:#000;margin:0 -4px -10px;line-height:0 }
.agc { position:relative;width:320px;height:240px;transform-origin:0 0;color:#e8e8ea;line-height:12px;font:inherit }
.agc canvas.agc-snow { position:absolute;left:0;top:0;width:320px;height:240px;image-rendering:pixelated }
.agc-p { position:absolute;box-sizing:border-box;border:2px dotted #6f7f99;border-radius:5px;box-shadow:inset 0 0 0 1px #2a3348,0 0 0 1px #2a3348;background:#000 }
.agc-opt { left:14px;top:14px;width:84px;height:40px;padding:4px 3px }
.agc-opt span { display:block;height:15px;line-height:15px;padding:0 8px }
.agc-opt span.on { background:#1b2a52;box-shadow:inset 2px 0 0 #6f7f99,inset -2px 0 0 #6f7f99 }
.agc-time { left:14px;top:196px;width:84px;height:30px;text-align:right;padding:8px 9px 0 }
.agc-sel { left:102px;top:14px;width:204px;height:212px;padding:6px 6px }
.agc-row { position:relative;height:50px;display:flex;align-items:center }
.agc-fr { width:44px;height:44px;flex:none;box-sizing:border-box;border:2px solid #6f7f99;box-shadow:inset 0 0 0 1px #000,inset 0 0 0 2px #3f4c66;background:#14204a;overflow:hidden;position:relative }
.agc-fr img { position:absolute;left:-8px;top:-6px;width:60px;height:60px;image-rendering:pixelated }
.agc-tx { margin-left:10px;display:flex;flex-direction:column;gap:3px }
.agc-tx .nm { color:#e8e8ea }
.agc-b { all:unset;box-sizing:border-box;display:flex;align-items:center;height:20px;margin-left:-6px;padding:0 6px;color:#e8e8ea;cursor:var(--hand,pointer);min-width:120px }
.agc-b:hover,.agc-b:focus-visible { background:#1b2a52;box-shadow:inset 2px 0 0 #6f7f99,inset -2px 0 0 #6f7f99 }
.agc-e { margin-left:54px;color:#7e8798 }
.agc-e2 { margin-left:54px }
.agc.agc-narrow .agc-opt { left:4px;top:4px;width:76px }
.agc.agc-narrow .agc-time { left:84px;right:4px;top:4px;width:auto;height:40px;padding:13px 8px 0 }
.agc.agc-narrow .agc-sel { left:4px;right:4px;top:48px;width:auto;height:172px;padding:6px 4px }
.agc.agc-narrow .agc-row { height:40px }
.agc.agc-narrow .agc-fr { width:36px;height:36px }
.agc.agc-narrow .agc-fr img { left:-10px;top:-6px;width:54px;height:54px }
.agc.agc-narrow .agc-tx { margin-left:8px }
.agc.agc-narrow .agc-b { min-width:0;max-width:100%;height:auto;min-height:20px;line-height:12px;padding:2px 6px;white-space:normal }
.agc.agc-narrow .agc-e,.agc.agc-narrow .agc-e2 { margin-left:44px }
.dz-new { display: flex; align-items: center; gap: 5px; margin: 3px 0 2px; padding: 2px 2px 3px; border-bottom: 1px dotted var(--lo); }
.dz-new .dz-tray { flex: none; width: 40px; height: 18px; padding: 0; border: 0; background: none; cursor: var(--hand, pointer); }
.dz-new .dz-tray canvas { display: block; width: 40px; height: 18px; image-rendering: pixelated; }
.dz-new .dz-nm { min-width: 0; padding: 0; border: 0; background: none; color: var(--link); text-decoration: underline;
text-underline-offset: 1px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: var(--hand, pointer); }
.dz-new .dt { flex: none; color: var(--ink); }
.dz-new .dz-pl { flex: none; margin-left: auto; width: 24px; min-height: max(16px, var(--tap, 16px)); display: inline-flex; align-items: center; justify-content: center; }
.app-disc .win-body { overflow: hidden; }
.dz { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: var(--paper); overflow: auto; }
.dz-top { position: relative; display: flex; gap: 8px; align-items: flex-start; }
.dz-cv { flex: none; width: 98px; height: 98px; background-size: 96px 96px; background-position: 1px 1px; background-repeat: no-repeat;
background-color: var(--k); border: 1px solid var(--k); image-rendering: pixelated; box-sizing: border-box; }
.dz-cv.post { background-size: 128px 96px; background-position: -15px 1px; }
.dz-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dz-tr { list-style: none; margin: 0; padding: 0; }
.dz-tr li { display: flex; gap: 4px; align-items: baseline; }
.dz-tr .n { flex: none; color: var(--ink2); }
.dz-tr .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.dz-tr .l { flex: none; color: var(--ink2); }
.dz-dt { color: var(--ink); }
.dz-ctl { display: flex; align-items: center; gap: 3px; }
.dz-ctl .btn { flex: none; width: 22px; min-width: 22px; box-sizing: border-box; min-height: max(16px, var(--tap, 16px)); display: inline-flex; align-items: center; justify-content: center; padding: 1px 0 0; }
.dz-ctl .sq { display: block; width: 6px; height: 6px; background: var(--ink); }
.dz-time { min-width: 26px; padding: 1px 3px; background: #0a0c12; color: #8ccf72; text-align: right; }
.dz-spin { width: 18px; height: 18px; margin-left: auto; image-rendering: pixelated; }
.dz-vis { width: 72px; height: 16px; image-rendering: pixelated; align-self: flex-start; }
.dz-st { display: flex; gap: 4px; flex-wrap: wrap; }
.pc a.dz-b, .pc a.dz-b:visited { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
min-height: max(22px, var(--tap, 22px)); padding: 2px 4px 1px; color: var(--ink); text-decoration: none; box-sizing: border-box; }
.pc a.dz-b.up { background: var(--paper); color: var(--link); text-decoration: underline; text-underline-offset: 1px;
outline: 1px solid var(--ink); outline-offset: -3px; }
.dz-ins { position: absolute; inset: 0; background: var(--paper); display: flex; align-items: center; justify-content: center; }
.dz-ins[hidden] { display: none; }
.dz-ins canvas { width: 180px; height: 96px; image-rendering: pixelated; }
.pc.phone .dz-ins canvas { width: 150px; height: 80px; }
.pc.phone .dz-cv { width: 82px; height: 82px; background-size: 80px 80px; }
.pc.phone .dz-cv.post { background-size: 107px 80px; background-position: -13px 1px; }
.dz-reading .ib-list { flex: 0 0 auto; max-height: 64px; }
.dz-reading .ib-read { flex: 1; height: auto; min-height: 0; overflow: auto; }
.dz-mail { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; padding: 3px; }
.dz-mail img { display: block; width: 100%; max-width: 124px; height: auto; image-rendering: pixelated; border: 1px solid var(--k); }
.pc .dz-mail a.dz-b { flex: none; min-width: 76px; }
.fold .dz-pd .dz-disc { width: 24px; height: 24px; margin: 3px 0 2px; image-rendering: pixelated; }
.fold .dz-pd .lbl { max-width: 56px; overflow: hidden; text-overflow: ellipsis; }
.pc.phone .dz { padding: 4px; gap: 5px; }
.pc.phone .dz-top { gap: 6px; }
.pc.phone .dz-st { gap: 3px; }
.pc.phone a.dz-b, .pc.phone a.dz-b:visited { flex: 1 1 40%; gap: 3px; padding: 2px 2px 1px; }
.pc.phone .dz-top { position: relative; }
.pc.phone .dz-spin { position: absolute; left: 64px; top: 64px; margin: 0; }
.pc.phone .dz-new { gap: 3px; }
.pc.phone .dz-new .dz-tray { width: 30px; overflow: hidden; }
.pc.phone .dz-new .dz-tray canvas { margin-left: -5px; }
.pc.phone .dz-mail { flex-direction: column; }
.pc.phone .dz-new .dz-nm { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.pg-start .pg-recs > li.dz-dup { display: none; }
.pc-file.g5-drag .ghost, .pc-file.g5-drag .arrow { translate: var(--g5-dx, 0) var(--g5-dy, 0); }
.g5-ghost { position: absolute; inset: 0; z-index: 28; pointer-events: none; overflow: hidden; }
.g5-ptr { position: absolute; left: 0; top: 0; width: 12px; height: 12px; display: none; opacity: .42;
background: url(../assets/computer/cursor_arrow_x1.png) no-repeat 0 0; image-rendering: pixelated; }
.g5-ptr.on { display: block; }
.g5-ring { position: absolute; width: 13px; height: 13px; margin: -7px 0 0 -7px; box-sizing: border-box;
border: 1px solid #5c5c68; border-radius: 50%; box-shadow: 0 0 0 1px rgba(236,235,240,.6); }
.g5-ring.s1 { opacity: .72; }
.g5-ring.s2 { opacity: .44; transform: scale(1.25); }
.g5-ring.s3 { opacity: .4; transform: scale(1.25); }
.g5-pg { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; }
.g5-pg img { width: 144px; height: 144px; image-rendering: pixelated; display: block; }
.g5-pg .g5-t { margin-top: 2px; }
.g5-pg .g5-d { color: var(--ink2, inherit); }
.g5-pg .g5-ln { display: flex; gap: 2px; }
.g5-pg .g5-ln a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap, 32px); min-height: var(--tap, 32px); }
.pc.phone .g5-pg img { width: 120px; height: 120px; }
/* the l̶a̴m̵p̷. */