:root { --paper: #f8f8f8; --ink: #111; --shadow: rgba(0, 0, 0, 0.2); --menu-height: 52px; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; } body { margin: 0; overflow: hidden; background: white; color: #111; font-family: "Roboto Mono", monospace; font-weight: 200; font-style: normal; } button, input, textarea, select, a { font: inherit; color: black; text-decoration: none; } a, a:link, a:visited, a:hover, a:active { color: black; text-decoration: none; } .top-menu { position: fixed; top: 12px; left: 12px; right: 12px; min-height: 34px; max-width: calc(100vw - 24px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; background: white; border: 1px solid #111; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); z-index: 1000; display: flex; align-items: flex-start; gap: 8px; padding: 5px; white-space: nowrap; touch-action: pan-x pinch-zoom; } .menu-title { flex: 0 0 auto; padding: 4px 8px; font-weight: bold; font-size: 13px; } .menu-group { position: relative; flex: 0 0 auto; } .menu-toggle, .card-button, .card-body button, .card-body a.button-link, .music-tone, .guestbook-card button[type="submit"] { background: #fff; border: 2px solid #111; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2); color: #111; text-decoration: none; font-size: 12px; padding: 3px 9px; cursor: pointer; } .menu-toggle { flex: 0 0 auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .menu-toggle:active, .card-button:active, .card-body button:active, .card-body a.button-link:active, .music-tone:active, .guestbook-card button[type="submit"]:active { box-shadow: none; transform: translate(2px, 2px); } .menu-list { display: none; position: fixed; min-width: 190px; background: var(--paper); border: 0.5px solid #111; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); padding: 4px; z-index: 1200; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .menu-group.open .menu-list { display: block; } .menu-list.is-open, .menu-list-floating { display: block; } .menu-list-floating { position: fixed; z-index: 5000; } .menu-list button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; width: 100%; display: block; text-align: left; background: transparent; border: 0; box-shadow: none; font-size: 12px; padding: 6px; cursor: pointer; } .menu-list button:hover { background: #111; color: #fff; } .canvas { position: relative; width: 100vw; height: 100vh; padding-top: 64px; } .archive-card { position: absolute; width: min(var(--card-width, 340px), calc(100vw - 28px)); height: min(var(--card-height, 340px), calc(100vh - 92px)); min-width: min(200px, calc(100vw - 28px)); min-height: 120px; max-width: calc(100vw - 24px); max-height: calc(100vh - 84px); overflow: hidden; background: var(--paper); border: 2px solid #111; box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2); z-index: 10; } .card-title-bar, .popup-title-bar { height: 24px; border-bottom: 2px solid #111; background: var(--paper); display: flex; align-items: center; justify-content: space-between; padding: 0 6px; font-size: 12px; cursor: grab; user-select: none; touch-action: none; } .card-title-bar:active { cursor: grabbing; } .card-close, .popup-close, .zine-close { width: 18px; height: 18px; background: #fff; border: 1px solid #111; font-size: 14px; line-height: 14px; padding: 0; margin: 2px; cursor: pointer; } .card-body { height: calc(100% - 24px); overflow: auto; padding: 12px; font-size: 13px; line-height: 1.45; } .card-body h2 { margin: 0 0 8px; border-bottom: 1px dotted #111; padding-bottom: 5px; font-size: 16px; font-weight: normal; } .card-body p { margin: 0 0 10px; white-space: pre-line; } .card-body img { display: block; width: 100%; max-height: 520px; object-fit: cover; border: 2px solid #111; margin: 8px 0 12px; background: #fff; } .card-resize-handle { position: absolute; right: 0; bottom: 0; width: 24px; height: 24px; cursor: nwse-resize; touch-action: none; } .card-resize-handle::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 11px; height: 11px; border-right: 2px solid #111; border-bottom: 2px solid #111; opacity: 0.7; } .note-card { --card-width: 300px; --card-height: 260px; background: white; } .note-card .card-body { padding: 10px; overflow: hidden; } .note-textarea { width: 100%; height: 100%; border: 0; background: transparent; resize: none; outline: none; padding: 8px; color: #111; font-size: 13px; line-height: 1.45; } .note-textarea::placeholder { color: rgba(0,0,0,.45); } .paint-card { --card-width: 400px; --card-height: 400px; } .paint-card .card-body { padding: 0; overflow: hidden; } .paint-canvas { display: block; width: 1000px; height: 1000px; background: white; cursor: crosshair; touch-action: none; } .drawn-card { --card-width: 210px; --card-height: 460px; background: #fff; } .drawn-card img.reversed-card-image { transform: rotate(180deg); } .drawn-card .card-body {text-align: center; } .drawn-card img { width: 180px; max-height: 320px; object-position: center; } .drawn-meaning { text-align: left; border-top: 1px dotted #111; padding-top: 8px; margin-top: 8px; } .drawn-keywords { font-size: 12px; opacity: .75; margin-top: 8px; text-align: left; } .star-symbol { position: absolute; z-index: 10; line-height: 1; opacity: .8; user-select: none; cursor: grab; touch-action: none; font-family: Georgia, "Times New Roman", serif; text-shadow: 1px 1px 0 rgba(0,0,0,.08); } .guestbook-card { --card-width: 520px; --card-height: 640px; background: #fff; } .guestbook-row { display: flex; gap: 8px; margin-bottom: 8px; } .guestbook-row .guestbooks___input-container { flex: 1 1 0; min-width: 0; } .guestbook-card input, .guestbook-card textarea { width: 100%; border: 1px dotted #111; background: #fff; padding: 6px 8px; margin: 0 0 8px; outline: none; } .guestbook-card input:focus, .guestbook-card textarea:focus { border-style: solid; } .guestbook-card hr { border: 0; border-top: 1px dotted #111; margin: 16px 0 12px; } .guestbook-card h3 { font-size: 14px; font-weight: normal; margin: 0 0 10px; } .guestbook-card a { text-decoration: none; } .guestbook-card a:link { color: lightgrey; } .guestbook-card a:visited { color: lightpink; } .guestbook-card #guestbooks___guestbook-messages-container [class*="reply"], .guestbook-card #guestbooks___guestbook-messages-container [id*="reply"], .guestbook-card #guestbooks___guestbook-messages-container [class*="host"], .guestbook-card #guestbooks___guestbook-messages-container [id*="host"] { margin-left: 8px; padding-left: 12px; border-left: 1px dotted #111; } .music-card { --card-width: 360px; --card-height: 320px; } .music-sequence { width: 100%; min-height: 130px; resize: vertical; border: 1px dotted #111; background: #fff; padding: 8px; margin-bottom: 8px; outline: none; } .music-controls { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 4px 0 10px; } .music-tone-label, .music-help { font-size: 12px; } .music-help { line-height: 1.4; opacity: .75; border-top: 1px dotted #111; padding-top: 8px; } .music-help code { background: #fff; border: 1px dotted #111; padding: 0 3px; } .zine-object { position: absolute; width: min(178px, calc(100vw - 30px)); height: 248px; z-index: 10; cursor: grab; user-select: none; touch-action: none; } .zine-close { position: absolute; top: -10px; right: -10px; border-radius: 50%; z-index: 5; box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2); } .zine-book { position: relative; width: 160px; height: 220px; margin: 14px 0 0 6px; perspective: 1000px; transform-style: preserve-3d; touch-action: pan-y; } .zine-book .page { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; transition: transform .65s ease, z-index .65s ease; } .zine-book .page.flipped { transform: rotateY(-180deg); } .zine-book .page-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; border: 2px solid #111; background: #fff; background-position: center; background-size: cover; backface-visibility: hidden; box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2); white-space: pre-line; text-align: center; font-size: 8px; line-height: 1.45; overflow: hidden; } .zine-book .back { transform: rotateY(180deg); } .zine-book a { pointer-events: auto; } .hexagram-entry { width: 100%; max-width: 125px; margin: 0 auto; text-align: center; line-height: 1.35; } .hexagram-name, .hexagram-image, .hexagram-line { font-size: 8px; } .hexagram-name { margin-bottom: 8px; } .hexagram-symbol { display: block; font-size: 34px; line-height: 1; margin: 8px 0; } .word-toggle { border-top: 1px dotted #111; padding: 6px 0; margin-top: 4px; } .word-toggle summary { cursor: pointer; list-style: none; font-size: 12px; user-select: none; } .word-toggle summary::before { content: "+ "; } .word-toggle[open] summary::before { content: "- "; } .word-toggle p { margin: 6px 0 0; font-size: 12px; opacity: .85; white-space: pre-line; } .embed-content { width: 100%; margin: 8px 0 12px; text-align: center; } .embed-content iframe { max-width: 100%; border: 2px solid #111; } .embed-content:not(.is-interactive) iframe { pointer-events: none; } .embed-content img { display: inline-block; } .welcome-popup { position: fixed; top: 50%; left: 50%; width: min(320px, calc(100vw - 30px)); background: white; border: 2px solid #111; box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.2); transform: translate(-50%, -50%); z-index: 2000; } .welcome-body { padding: 18px; font-size: 14px; line-height: 1.5; } .welcome-body h1 { margin: 0 0 10px; border-bottom: 1px dotted #111; padding-bottom: 6px; font-size: 17px; font-weight: normal; } .small-text { font-size: 12px; opacity: .8; } @media (max-width: 560px) { :root { --menu-height: 58px; } .top-menu { top: 8px; left: 8px; right: 8px; max-width: calc(100vw - 16px); gap: 6px; } .menu-toggle { padding: 5px 9px; font-size: 12px; } .canvas { padding-top: 70px; } .archive-card { min-width: 180px; min-height: 120px; box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2); } .guestbook-row { flex-direction: column; } .card-body { font-size: 12px; padding: 10px; } }