.classic-page { background: #fcc; color: #000; }
.classic-page .site-header, .classic-page .sidebar, .classic-page .site-footer { display: none; }
.classic-page .layout { display: block; max-width: none; margin: 0; padding: 0; }

.fay-test {
  display: grid; grid-template-rows: minmax(0, 30%) minmax(0, 1fr); height: 100dvh;
  background: #fafafa; color: #555; font: 16px/normal "Times New Roman", "Hiragino Mincho ProN", serif;
}
.fay-test [hidden] { display: none; }
.fay-top { display: grid; grid-template-columns: 70% 30%; border-bottom: 4px ridge #aaa; }
.fay-pane { min-width: 0; overflow: auto; overflow-wrap: anywhere; padding: 10px 15px; }
.fay-top aside { border-left: 4px ridge #aaa; }
.fay-test h1 { margin: .67em 0; font: bold 20px/normal "MS PGothic", Osaka, Arial, sans-serif; }
.fay-test form { margin: 0 0 1em; }
.fay-test :is(button, input, select) { max-width: 100%; font: 13px system-ui, sans-serif; }
.fay-test a { color: #00e; text-decoration: underline; }
.fay-test a:hover { color: #f00; }
.fay-test ul { margin: 1em 0; padding-inline-start: 40px; }
.fay-system { color: #55d; }
#fay-error { color: #a00; }

.classic-room {
  --split: 35%;
  display: grid;
  grid-template-rows: var(--split) 6px minmax(0, 1fr);
  height: 100vh;
  height: 100dvh;
  color: #000;
  background: #fcc;
  font: 16px/normal "Times New Roman", "Hiragino Mincho ProN", "Yu Mincho", serif;
}
.classic-room [hidden] { display: none; }
.classic-top, .classic-bottom { overflow: auto; padding: 8px; }
.classic-bottom { padding: 4px; overflow-wrap: anywhere; }
.classic-bottom-group { display: grid; min-height: 0; }
.classic-unframed .classic-bottom-group { display: block; }
.classic-divider {
  cursor: ns-resize;
  touch-action: none;
  background: #faf0e6;
  border-block: 1px solid #ac9d91;
}
.classic-divider:focus-visible { outline-offset: -2px; }
.classic-unframed { display: block; height: auto; min-height: 100dvh; }
.classic-unframed .classic-divider { display: none; }
.classic-room a, .classic-link { color: red; text-decoration: underline; }
.classic-room a:visited { color: red; }
.classic-room button, .classic-room select, .classic-room input { font: 13px system-ui, sans-serif; }
.classic-room button { color: buttontext; }
.classic-room .classic-link { border: 0; background: none; padding: 0; font: inherit; color: red; }
.classic-room input:not([type=checkbox]) {
  width: auto;
  max-width: 100%;
  min-height: 0;
  padding: 1px 2px;
  border: 2px inset #aaa;
  border-radius: 0;
  background: white;
  color: black;
}
.classic-entry-table { border: 2px outset #aaa; border-spacing: 0; max-width: 100%; }
.classic-entry-table td { border: 1px inset #aaa; padding: 0; }
.classic-entry-table h1 { display: inline; margin: 0; font-size: 1.5em; color: hotpink; }
.classic-joined .classic-intro, .classic-joined .classic-name-note { display: none; }
.classic-name-row { background: #faa; }
.classic-privacy { margin: 0; }
.classic-tools { text-align: right; font-size: small; }
.classic-room hr { border: 0; border-top: 1px solid #999; border-bottom: 1px solid #eee; margin: .5em 0; }
.classic-compose-actions { margin: 2px 0; }
.classic-message-field label { display: flex; align-items: baseline; max-width: var(--classic-message-width, 630px); }
.classic-message-field input:not([type=checkbox]) { flex: 1; min-width: 0; }
.classic-options { margin-block: .65em; }
.classic-line { white-space: pre-wrap; }
.classic-line time { color: #555; font-size: .83em; }
.classic-admin { color: blue; }
.classic-guest-name { font-size: 1.5em; }
.classic-notice { color: red; }
.classic-credit { margin: 1.67em 0; text-align: right; }
.classic-error { margin: 4px 0; color: #8b0000; }
.classic-swatches { display: grid; width: max-content; max-width: 100%; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.classic-swatches button { background: #fcc; border: 1px inset #aaa; text-align: left; font: bold 1rem "Times New Roman", serif; }

@media (max-width: 650px) {
  .classic-room:not(.classic-unframed) { grid-template-rows: max(240px, var(--split)) 8px minmax(0, 1fr); }
  .classic-room button, .classic-room select, .classic-room input { font-size: 16px; }
  .classic-name-note { display: inline-block; }
  .classic-swatches { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.classic-room { background: var(--classic-background, #fcc); color: var(--classic-text, #000); }
.classic-room a, .classic-room .classic-link { color: var(--classic-link, red); }
.classic-room a:visited { color: var(--classic-visited, var(--classic-link, red)); }
.classic-room a:active { color: var(--classic-active, var(--classic-link, red)); }
.classic-name-row { background: pink; color: #000; }
.classic-divider { background: var(--classic-divider, pink); }
.classic-swatches button { background: var(--classic-background, #fcc); }
.classic-crab { --split: 150px; }
.classic-crab .classic-entry-table { margin-inline: auto; border-width: 4px; }
.classic-room-guide { text-align: center; margin: 0 0 4px; }
.classic-coral { --classic-text: #90c; --classic-link: darkviolet; --classic-visited: purple; --classic-active: mediumvioletred; --classic-divider: #fee; }
.classic-coral .classic-entry-table, .classic-coral .classic-entry-table td { border: 0; }
.classic-coral .classic-entry-table h1 { color: goldenrod; }
.classic-coral .classic-name-row { background: gold; color: #90c; }
.classic-coral .classic-swatches { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.classic-coral .classic-swatches button { border: 0; background: transparent; overflow-wrap: anywhere; }
.classic-shark { --classic-text: white; }
.classic-shark .classic-line time { color: #bbb; }
.telegram { margin: 5px 0; }
.telegram summary { cursor: pointer; }
.telegram-form { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.telegram-log { max-height: 18dvh; overflow: auto; overflow-wrap: anywhere; }
.telegram-log p { margin: 3px 0; }
.classic-entry-table h1 { color: var(--classic-heading, hotpink); }
.classic-name-row { background: var(--classic-name-row, pink); }
.classic-coral .classic-name-row { background: gold; }
.replica-yui .classic-entry-table, .replica-yui .classic-entry-table td,
.replica-niwa .classic-entry-table, .replica-niwa .classic-entry-table td { border: 0; }
.replica-yui input[name="messageSize"] { width: 6ch; }
.replica-yonohate:not(.classic-joined):not(.classic-unframed) .classic-bottom-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.replica-manners { overflow: auto; min-height: 0; padding: 4px; border-right: 2px ridge blue; }
.replica-manners :is(h2, p) { margin: 0 0 12px; }
.replica-manners li { margin-bottom: .5em; }
.classic-joined .replica-manners, .classic-unframed .replica-manners { display: none; }
@media (max-width: 480px) {
  .replica-yonohate:not(.classic-joined):not(.classic-unframed) .classic-bottom-group { grid-template-columns: 1fr; grid-template-rows: minmax(0, 38%) minmax(0, 1fr); }
  .replica-manners { border-right: 0; border-bottom: 2px ridge blue; }
}