:root {
    --ink:#192f39;
    --muted:#586a72;
    --navy:#162c35;
    --paper:#fff;
    --ground:#f0f3f4;
    --line:#d5dfe3;
    --accent:#a74b24;
    --accent-dark:#803817;
    --tint:#f8eee6;
    --error:#9a2727;
    --radius:12px;
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    color:var(--ink);
    background:var(--ground);
    font-size:16px;
    line-height:1.55;
}
* {
    box-sizing:border-box;
}
body {
    margin:0;
}
a {
    color:var(--accent);
    text-underline-offset:3px;
}
a:hover {
    color:var(--accent-dark);
}
button,input,select,textarea {
    font:inherit;
}
button,.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:46px;
    padding:10px 19px;
    border:1px solid var(--accent);
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-weight:650;
    text-decoration:none;
    cursor:pointer;
    line-height:1.3;
    text-align:center;
}
button:hover,.button:hover {
    background:var(--accent-dark);
    color:#fff;
}
button:disabled {
    opacity:.4;
    cursor:default;
}
.secondary {
    background:#fff;
    color:var(--ink);
    border-color:var(--line);
}
.secondary:hover {
    background:#e9eef0;
    color:var(--ink);
}
.compact {
    min-height:40px;
    padding:6px 13px;
    font-size:.875rem;
}
.wide {
    width:100%;
}
.danger {
    color:var(--error);
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,[tabindex]:focus-visible {
    outline:3px solid #327d9c;
    outline-offset:3px;
}
input,select,textarea {
    width:100%;
    min-height:46px;
    padding:10px 12px;
    border:1px solid #b8c7ce;
    border-radius:7px;
    background:#fff;
    color:var(--ink);
    min-width:0;
}
textarea {
    resize:vertical;
    line-height:1.6;
}
input[type=checkbox] {
    width:20px;
    height:20px;
    min-height:20px;
    margin:0;
    accent-color:var(--accent);
}
input[type=file] {
    padding:9px;
    max-width:100%;
}
input[readonly] {
    background:#f4f6f7;
}
label {
    display:block;
    font-size:.875rem;
    font-weight:600;
    margin-bottom:16px;
}
label input,label textarea,label select {
    margin-top:5px;
    font-size:1rem;
    font-weight:400;
}
form {
    margin:0;
}
fieldset {
    margin:20px 0;
    padding:18px;
    border:1px solid var(--line);
    border-radius:8px;
    min-width:0;
}
legend {
    font-weight:650;
    padding:0 5px;
}
h1,h2,h3,p {
    margin-top:0;
}
h1 {
    font-family:Georgia,"Times New Roman",serif;
    font-weight:500;
    font-size:2.25rem;
    line-height:1.15;
    margin-bottom:12px;
    overflow-wrap:anywhere;
}
h2 {
    font-size:1.15rem;
    line-height:1.35;
    margin-bottom:14px;
    overflow-wrap:anywhere;
}
h3 {
    font-size:1rem;
    margin-top:24px;
}
p {
    margin-bottom:16px;
}
.muted,.hint {
    color:var(--muted);
}
.hint {
    font-size:.875rem;
}
.eyebrow {
    font-size:.75rem;
    letter-spacing:.12em;
    font-weight:750;
    margin-bottom:10px;
    color:var(--muted);
}
.badge {
    display:inline-block;
    font-size:.75rem;
    font-weight:650;
    padding:4px 9px;
    border-radius:5px;
    background:#eaf0f2;
    color:#435963;
    line-height:1.5;
}
.icon {
    width:22px;
    height:22px;
    flex-shrink:0;
}
.topbar {
    height:88px;
    padding:0 max(28px,calc((100vw - 1240px)/2));
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:var(--navy);
    color:white;
    gap:20px;
}
.brand {
    color:#fff;
    display:flex;
    align-items:center;
    gap:13px;
    text-decoration:none;
    letter-spacing:.13em;
    font-family:Georgia,serif;
    font-size:1.125rem;
}
.brand:hover {
    color:white;
}
.brand small {
    display:block;
    font-family:system-ui,sans-serif;
    font-size:.75rem;
    letter-spacing:.03em;
    font-weight:400;
    color:#adbec5;
    margin-top:3px;
}
.brand-mark {
    display:grid;
    place-items:center;
    border:1px solid #a7805e;
    color:#e6c7a0;
    width:39px;
    height:46px;
    font-family:Georgia,serif;
    font-size:1.8rem;
}
.account-link {
    display:flex;
    align-items:center;
    gap:8px;
    color:#e5edf0;
    text-decoration:none;
    font-size:.875rem;
}
.account-link:hover {
    color:white;
}
.navigation {
    display:flex;
    gap:12px;
    padding:0 max(28px,calc((100vw - 1240px)/2));
    border-bottom:1px solid var(--line);
    background:white;
}
.navigation a {
    display:flex;
    align-items:center;
    gap:8px;
    padding:17px 19px;
    text-decoration:none;
    font-weight:600;
    color:var(--muted);
    border-bottom:3px solid transparent;
    font-size:.875rem;
}
.navigation a[aria-current] {
    color:var(--accent);
    border-color:var(--accent);
}
.workspace {
    max-width:1296px;
    margin:auto;
    padding:32px 28px 64px;
}
.page-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:25px;
}
.page-heading h1 {
    margin-bottom:0;
}
.panel {
    padding:24px;
    background:white;
    border:1px solid var(--line);
    border-radius:var(--radius);
    min-width:0;
}
.map-layout {
    display:grid;
    grid-template-columns:minmax(0,2.1fr) minmax(270px,1fr);
    gap:24px;
    align-items:start;
}
.map-panel {
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    background:#e0d7c0;
}
.map-toolbar {
    padding:12px 16px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    background:white;
    border-bottom:1px solid var(--line);
}
.map-toolbar>span {
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:650;
    font-size:.875rem;
}
.map-toolbar>div {
    display:flex;
    gap:5px;
}
.map-viewport {
    height:650px;
    overflow:auto;
    overscroll-behavior:contain;
    text-align:center;
    background:#d9d0b9;
}
.map-viewport img {
    display:block;
    width:100%;
    height:auto;
    margin:0 auto;
    max-width:none;
}
.map-viewport[data-zoom="2"] img {
    width:160%;
}
.map-viewport[data-zoom="3"] img {
    width:230%;
}
.map-viewport[data-zoom="4"] img {
    width:320%;
}
.map-caption {
    padding:12px 16px;
    margin:0;
    font-size:.875rem;
    background:#fff;
}
.map-sidebar {
    display:grid;
    gap:20px;
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:15px;
}
.section-heading h2 {
    margin:0;
}
.section-heading>a {
    font-size:.875rem;
}
.list-link {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:13px 0;
    text-decoration:none;
    color:var(--ink);
    border-bottom:1px solid #e5ebed;
    font-size:.9375rem;
    overflow-wrap:anywhere;
}
.list-link:last-child {
    border-bottom:0;
}
.list-link small {
    display:block;
    color:var(--muted);
    font-size:.75rem;
    margin-top:4px;
}
.search {
    display:flex;
    gap:10px;
    max-width:700px;
    margin-bottom:25px;
}
.note-grid,.clock-grid,.image-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}
.note-card h2 {
    margin-top:18px;
}
.note-card h2 a {
    color:var(--ink);
    text-decoration:none;
}
.note-card>.muted {
    font-size:.875rem;
}
.empty {
    text-align:center;
    padding:70px 20px;
    color:var(--muted);
}
.empty h2 {
    color:var(--ink);
}
.prose {
    line-height:1.75;
    overflow-wrap:anywhere;
}
.prose h1 {
    font-size:1.8rem;
}
.prose h2 {
    margin-top:24px;
}
.prose img {
    max-width:100%;
    height:auto;
    border-radius:8px;
    display:block;
    margin:20px 0;
}
.prose pre {
    overflow:auto;
    max-width:100%;
    padding:16px;
    background:#edf1f3;
}
.prose code,code {
    font-size:.875em;
    background:#edf1f3;
    border-radius:3px;
    padding:2px 4px;
    overflow-wrap:anywhere;
}
.prose blockquote {
    margin-left:0;
    padding-left:20px;
    border-left:3px solid var(--accent);
    color:var(--muted);
}
.prose table {
    display:block;
    overflow:auto;
    border-collapse:collapse;
}
.prose td,.prose th {
    border:1px solid var(--line);
    padding:8px 12px;
}
.prose hr {
    border:0;
    border-top:1px solid var(--line);
}
.linked-notes {
    margin-top:20px;
}
.delete-form {
    margin-top:24px;
}
.editor-form {
    max-width:920px;
}
.editor-toolbar {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:20px 0 8px;
    font-size:.875rem;
    color:var(--muted);
}
#markdown-body {
    font-family:ui-monospace,Consolas,monospace;
    font-size:1rem;
}
.preview {
    padding:20px;
    background:var(--ground);
    margin-top:14px;
    border-radius:8px;
}
.editor-help {
    margin:18px 0;
    font-size:.875rem;
}
.editor-help p {
    margin-top:14px;
}
.form-actions {
    display:flex;
    align-items:center;
    gap:20px;
    margin-top:20px;
}
.reader-list {
    display:flex;
    flex-wrap:wrap;
    gap:10px 25px;
}
.check {
    display:flex;
    gap:10px;
    align-items:center;
    font-weight:400;
}
.check input {
    margin:0;
}
.sharing .hint {
    margin-bottom:0;
}
.clock-card {
    text-align:center;
}
.clock-card h2 {
    margin-top:18px;
}
.clock-card .prose {
    text-align:left;
    font-size:.9375rem;
}
.clock-ring {
    width:180px;
    height:180px;
    margin:5px auto 15px;
    display:block;
}
.clock-ring circle {
    fill:none;
    stroke-width:10;
    transform:rotate(-90deg);
    transform-origin:60px 60px;
}
.clock-track {
    stroke:#e3e9ec;
}
.clock-progress {
    stroke:var(--accent);
}
.clock-ring text {
    font-size:25px;
    fill:var(--ink);
    font-family:Georgia,serif;
}
.clock-total {
    font-size:13px;
    fill:var(--muted);
}
.clock-controls {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-bottom:20px;
}
.clock-controls button {
    width:50px;
    font-size:1.3rem;
}
.clock-controls span {
    font-size:.875rem;
}
.upload-panel {
    margin-bottom:24px;
    max-width:800px;
}
.upload-panel form {
    padding-top:20px;
}
.image-card {
    padding:0;
    overflow:hidden;
}
.image-card>a img {
    display:block;
    width:100%;
    height:210px;
    object-fit:cover;
    background:#e7edef;
}
.image-info {
    padding:20px;
}
.image-info h2 {
    margin-top:14px;
}
.image-info details {
    margin-top:20px;
}
.image-info details form {
    margin-top:18px;
}
summary {
    cursor:pointer;
    font-weight:650;
    min-height:30px;
    line-height:1.5;
}
details[open]>summary {
    margin-bottom:20px;
}
.form-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 20px;
}
.character-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:20px;
}
.character-tabs [aria-current] {
    background:var(--navy);
    color:white;
}
.sheet-modes {
    display:flex;
    gap:5px;
    max-width:980px;
    margin:0 0 18px;
    padding:5px;
    border-radius:10px;
    background:#dfe7ea;
}
.sheet-modes a {
    flex:1;
    padding:10px;
    border-radius:7px;
    text-align:center;
    text-decoration:none;
    color:var(--ink);
    font-weight:700;
}
.sheet-modes [aria-current] {
    background:#fff;
    box-shadow:0 1px 6px #162c351c;
}
.play-sheet { max-width:980px; }
.play-sheet>.panel,.play-top>.panel { margin-bottom:18px; }
.play-intro { color:var(--muted); margin:0 0 16px; font-size:.9rem; }
.play-message { margin-bottom:16px; }
.play-top { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.play-sheet h2 { margin:0 0 15px; }
.play-status-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.play-status-grid>div { padding:10px; background:var(--ground); border-radius:8px; }
.play-status-grid span,.play-status-grid strong { display:block; }
.play-status-grid span { color:var(--muted); font-size:.75rem; }
.play-status-grid strong { font-size:1.15rem; overflow-wrap:anywhere; }
.play-hp { display:grid; grid-template-columns:minmax(0,1fr) 78px 44px 44px; align-items:end; gap:7px; margin-top:16px; }
.play-hp-total>span,.play-hp-total strong { display:block; }
.play-hp-total>span { color:var(--muted); font-size:.8rem; }
.play-hp-total strong { font-size:1.5rem; line-height:1.3; }
.play-hp label { margin:0; font-size:.72rem; }
.play-hp input { min-height:43px; padding:7px; text-align:center; }
.play-hp button { padding:6px; min-height:43px; font-size:1.3rem; }
.play-roll-row { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.play-roll-row .play-roll { flex:1; }
.play-bonus { display:block; color:var(--muted); font-size:.77rem; text-align:center; margin-top:3px; }
.play-roll { width:100%; min-height:48px; padding:8px 11px; background:#fff; border-color:var(--line); color:var(--ink); justify-content:space-between; text-align:left; }
.play-roll:hover { background:#e9eef0; color:var(--ink); }
.play-roll:active { background:#dfe8ec; }
.play-roll [data-roll-value] { min-width:27px; text-align:right; font-size:1.25rem; color:var(--accent); font-variant-numeric:tabular-nums; }
.play-attribute-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; }
.play-attribute { min-width:0; text-align:center; }
.play-attribute-button { min-height:89px; display:flex; flex-direction:column; justify-content:center; gap:2px; text-align:center; }
.play-attribute-button span { font-size:.82rem; }
.play-attribute-button [data-roll-value] { min-width:0; text-align:center; font-size:1.6rem; }
.play-attribute>small { display:block; margin-top:4px; color:var(--muted); font-size:.72rem; }
.play-skill-list { display:grid; grid-template-columns:1fr; }
.play-skill-row { display:grid; grid-template-columns:25px minmax(0,1fr) 46px; align-items:center; gap:5px; }
.play-skill-button { min-height:43px; }
.play-proficiency { display:flex; align-items:center; gap:2px; min-width:25px; }
.play-proficiency i { display:block; width:9px; height:9px; border-radius:50%; background:#e1b93e; }
.play-proficiency-bonus { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.play-skill-context { margin:1px 0 8px 30px; color:var(--muted); font-size:.72rem; }
.play-skills h3 { border-top:1px solid var(--line); padding-top:14px; margin:14px 0; }
.play-pair-head,.play-pair { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.play-pair-head { color:var(--muted); font-size:.78rem; font-weight:700; text-align:center; margin:0 0 6px; }
.play-action-row { padding:11px 0; border-top:1px solid var(--line); }
.play-action-row h3 { margin:0 0 8px; font-size:1rem; }
.play-action-row h3 small { color:var(--muted); font-weight:400; font-size:.75rem; }
.play-action-row .hint { margin:7px 0 0; font-size:.78rem; overflow-wrap:anywhere; }
.play-pair>div { min-width:0; }
.play-pair .play-roll,.play-static-roll { min-height:55px; }
.play-pair .play-roll { flex-wrap:wrap; gap:2px; }
.play-static-roll { display:flex; align-items:center; justify-content:space-between; gap:5px; padding:8px 11px; background:var(--ground); border-radius:8px; font-size:.86rem; }
.play-static-roll strong { white-space:nowrap; }
.play-item-row { display:flex; align-items:center; gap:10px; margin-top:8px; }
.play-item-button { flex:1; min-width:0; }
.play-item-button span { overflow-wrap:anywhere; }
.play-item-row>span { color:var(--muted); min-width:35px; text-align:right; }
.play-item-detail { margin:3px 0 8px; font-size:.77rem; overflow-wrap:anywhere; }
.play-spell-form>label { display:flex; align-items:center; gap:8px; margin:0 0 8px; }
.play-spell-form>label select { width:auto; max-width:100%; min-height:38px; margin:0; padding:5px 8px; }
.play-new-cast { display:block; width:100%; margin-top:7px; min-height:36px; padding:5px; font-size:.8rem; }
.slot-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:14px 0; }
.slot-control { padding:12px; border:1px solid var(--line); border-radius:8px; }
.slot-control strong,.slot-control span { display:block; }
.slot-control>div { display:flex; gap:5px; margin-top:8px; }
.slot-control button { min-height:40px; min-width:40px; padding:6px 9px; }
.reset-all { margin-bottom:18px; }
.custom-roll { display:flex; align-items:end; gap:12px; flex-wrap:wrap; }
.custom-roll h2 { width:100%; margin:0; }
.custom-roll label { margin:0; max-width:200px; }
.custom-roll output { font-weight:700; }
.custom-roll .hint { width:100%; margin:0; }
.action-editor-row { align-items:start; }
.action-editor-fields,.spellcasting-edit { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; flex:1; }
.action-editor-fields .check { align-self:center; display:flex; gap:8px; align-items:center; }
.slot-edit-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.slot-edit-row { padding:12px; background:var(--ground); border-radius:8px; }
.slot-edit-row strong { display:block; margin-bottom:8px; }
.slot-edit-row label { margin:0 0 7px; }
.sheet-form {
    max-width:980px;
}
.sheet-form>.panel {
    margin-bottom:18px;
}
.combat-panel {
    border-top:3px solid var(--accent);
}
.combat-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:16px;
}
.combat-grid label {
    margin:0;
}
.combat-grid input {
    font-size:1.5rem;
    font-weight:600;
    padding:7px 10px;
}
.stat {
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    font-size:.875rem;
    font-weight:600;
    padding-bottom:5px;
}
.stat strong {
    font-family:Georgia,serif;
    font-size:1.9rem;
    line-height:1.4;
}
.ability-grid {
    display:grid;
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:12px;
    margin-top:15px;
}
.ability {
    background:var(--ground);
    padding:12px;
    text-align:center;
    border-radius:8px;
}
.ability label {
    font-size:.875rem;
    margin-bottom:6px;
}
.ability input {
    text-align:center;
    font-size:1.2rem;
}
.ability output {
    font-weight:700;
    color:var(--accent);
    font-size:1.25rem;
}
.skill-head,.skill-row {
    display:grid;
    grid-template-columns:minmax(110px,1.5fr) minmax(110px,1fr) 70px 55px;
    gap:12px;
    align-items:center;
    border-bottom:1px solid var(--line);
    padding:10px 0;
}
.skill-head {
    font-size:.75rem;
    color:var(--muted);
}
.skill-row {
    font-size:.875rem;
}
.skill-row small {
    display:block;
    color:var(--muted);
    font-size:.75rem;
}
.skill-row input,.skill-row select {
    padding:8px;
    min-height:42px;
}
.skill-row output {
    text-align:center;
    font-weight:700;
    font-size:1.1rem;
}
.repeat-row {
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:12px;
    padding:14px;
    background:var(--ground);
    border-radius:8px;
}
.repeat-fields {
    display:grid;
    grid-template-columns:2fr 90px 2fr;
    gap:12px;
    flex:1;
    min-width:0;
}
.repeat-fields label {
    margin:0;
}
.remove-row {
    padding:8px;
    width:38px;
    min-height:40px;
    flex-shrink:0;
    font-size:1.4rem;
}
.save-bar {
    position:sticky;
    bottom:12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:14px 20px;
    background:var(--navy);
    color:white;
    border-radius:10px;
    box-shadow:0 5px 18px #182d3520;
    z-index:2;
}
.save-bar span {
    font-size:.875rem;
}
.account-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;
    max-width:950px;
}
.logout-form {
    margin-top:24px;
}
.notice {
    background:#e5f2ec;
    border:1px solid #b7d6c7;
    padding:14px 18px;
    border-radius:8px;
    margin-bottom:20px;
}
.notice.error {
    background:#fff0ed;
    border-color:#e9b9ae;
    color:#792d22;
}
.login-page {
    min-height:100vh;
    background:var(--navy);
    padding:44px 20px;
}
.login-card {
    max-width:470px;
    margin:auto;
    padding:32px;
    background:white;
    border-radius:14px;
}
.login-card h1 {
    font-size:2.8rem;
}
.login-card .eyebrow {
    color:var(--accent);
}
.login-map {
    display:block;
    width:100%;
    height:170px;
    object-fit:cover;
    object-position:50% 42%;
    border-radius:8px;
    margin:22px 0;
}
.login-card button {
    margin-top:5px;
}
.login-card>.hint {
    margin-top:18px;
    margin-bottom:0;
}
.site-footer {
    text-align:center;
    color:var(--muted);
    font-size:.75rem;
    padding:20px;
}
.login-page .site-footer {
    color:#b7c5ca;
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:20;
    background:white;
    padding:12px;
}
.skip-link:focus {
    top:10px;
}
[hidden] {
    display:none!important;
}
@media(max-width:1000px) {
    .note-grid,.clock-grid,.image-grid {
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
    .map-layout {
        grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);
    }
    .map-viewport {
        height:560px;
    }
    .combat-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
    .ability-grid {
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:700px) {
    .topbar {
        height:76px;
        padding:0 18px;
    }
    .brand {
        font-size:1rem;
        gap:9px;
    }
    .brand-mark {
        width:31px;
        height:39px;
        font-size:1.5rem;
    }
    .brand small {
        font-size:.7rem;
    }
    .account-link span {
        max-width:95px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }
    .navigation {
        position:fixed;
        bottom:0;
        left:0;
        right:0;
        padding:0 6px env(safe-area-inset-bottom);
        gap:0;
        justify-content:space-around;
        z-index:5;
        border-top:1px solid var(--line);
        border-bottom:0;
        box-shadow:0 -3px 15px #162c3508;
    }
    .navigation a {
        flex:1;
        min-width:0;
        flex-direction:column;
        gap:4px;
        padding:10px 2px 7px;
        font-size:.75rem;
        border-bottom:0;
        border-top:3px solid transparent;
        min-height:68px;
    }
    .navigation .icon {
        width:21px;
        height:21px;
    }
    .workspace {
        padding:25px 16px 95px;
    }
    .page-heading {
        gap:14px;
        align-items:flex-start;
        margin-bottom:20px;
        flex-wrap:wrap;
    }
    .page-heading h1 {
        font-size:1.8rem;
    }
    .eyebrow {
        font-size:.7rem;
        margin-bottom:9px;
    }
    .page-heading>.button {
        padding:10px 13px;
        font-size:.875rem;
    }
    .map-layout {
        display:block;
    }
    .map-sidebar {
        margin-top:20px;
        grid-template-columns:1fr;
    }
    .map-viewport {
        height:57vh;
        min-height:340px;
        max-height:620px;
    }
    .map-toolbar {
        padding:10px;
    }
    .map-toolbar>span {
        font-size:.8rem;
    }
    .map-toolbar .icon {
        display:none;
    }
    .map-toolbar .compact {
        padding:7px 10px;
    }
    .map-caption {
        font-size:.8rem;
        padding:10px 12px;
    }
    .panel {
        padding:18px;
    }
    .note-grid,.clock-grid,.image-grid,.account-grid {
        grid-template-columns:1fr;
    }
    .search {
        gap:7px;
    }
    .search button {
        padding:10px 13px;
    }
    .form-grid {
        gap:0 12px;
    }
    .combat-grid {
        gap:14px 10px;
    }
    .combat-grid label,.stat {
        font-size:.8rem;
    }
    .combat-grid input {
        font-size:1.35rem;
    }
    .ability-grid {
        gap:10px;
    }
    .ability {
        padding:10px 7px;
    }
    .ability label {
        font-size:.8rem;
    }
    .skill-head,.skill-row {
        grid-template-columns:minmax(85px,1fr) 106px 49px 34px;
        gap:6px;
    }
    .skill-row {
        font-size:.8rem;
    }
    .skill-row input,.skill-row select {
        font-size:.875rem;
        padding:7px 5px;
    }
    .repeat-row {
        padding:12px;
        align-items:flex-start;
        gap:7px;
    }
    .repeat-fields {
        grid-template-columns:minmax(0,1fr) 75px;
        gap:10px;
    }
    .repeat-fields label:last-child {
        grid-column:1/-1;
    }
    .repeat-row .remove-row {
        margin-top:26px;
        width:30px;
        padding:5px;
    }
    .play-top { grid-template-columns:1fr; gap:0; }
    .play-attribute-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .play-status-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .slot-grid { grid-template-columns:1fr; }
    .slot-edit-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .action-editor-fields { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .play-hp { grid-template-columns:minmax(0,1fr) 70px 42px 42px; }
    .save-bar {
        bottom:80px;
        padding:12px 14px;
    }
    .save-bar span {
        font-size:.75rem;
        max-width:145px;
    }
    .save-bar button {
        padding:10px 13px;
        white-space:nowrap;
    }
    .app-page .site-footer {
        padding-bottom:100px;
    }
    .login-page {
        padding:24px 16px;
    }
    .login-card {
        padding:26px;
    }
    .image-card {
        padding:0;
    }
    .form-actions {
        flex-wrap:wrap;
    }
    .prose h1 {
        font-size:1.55rem;
    }
    fieldset {
        padding:13px;
    }
    .reader-list {
        gap:8px 18px;
    }
}
@media(max-width:360px) {
    .form-grid {
        grid-template-columns:1fr;
    }
    .skill-head,.skill-row {
        grid-template-columns:minmax(65px,1fr) 95px 45px 30px;
        gap:4px;
    }
    .account-link .icon {
        display:none;
    }
    .topbar {
        padding:0 12px;
    }
    .workspace {
        padding-left:12px;
        padding-right:12px;
    }
}
.map-viewport:not([data-zoom]) img,.map-viewport[data-zoom="1"] img {
    width:100%;
    height:100%;
    object-fit:contain;
}
@media(prefers-reduced-motion:no-preference) {
    button,a,input {
        transition:background-color .12s,border-color .12s;
    }
}