:root { color-scheme: light; font-family: system-ui, "Yu Gothic", Meiryo, sans-serif; color: #282c25; background: #f5f6f2; } * { box-sizing: border-box; } [hidden] { display: none !important; } body { margin: 0; } main { max-width: 1200px; margin: auto; padding: 24px 20px; } header { margin-bottom: 22px; } h1 { font-size: clamp(23px, 4vw, 32px); margin: 10px 0; } h2 { font-size: 18px; margin: 0; } h3 { font-size: 14px; margin: 12px 0; } p { line-height: 1.65; } header p { margin: 0; } .badge { display: inline-block; background: #5bad00; color: #142800; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: bold; } .workspace { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(340px, 1fr); gap: 24px; align-items: start; } .preview, .controls { background: white; padding: 18px; border: 1px solid #dfe3d9; border-radius: 14px; min-width: 0; margin: 0; } .preview { position: sticky; top: 12px; } .preview-top, .section-heading, .dialog-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .preview-top button { font-size: 13px; } .canvas-scroll { overflow: auto; touch-action: auto; } .canvas-wrap { position: relative; width: 100%; margin: auto; } canvas { display: block; width: 100%; height: auto; border-radius: 6px; } #interaction { position: absolute; inset: 0; touch-action: auto; cursor: grab; } #interaction:active { cursor: grabbing; } .selection-box { position: absolute; transform: translate(-50%, -50%); border: 2px solid #5bad00; box-shadow: 0 0 0 1px white; pointer-events: none; border-radius: 3px; } label { display: block; font-weight: 700; margin: 12px 0 7px; font-size: 14px; } input, select, button { font: inherit; } input[type="search"], input[type="text"], select { width: 100%; border: 1px solid #a7af9d; border-radius: 7px; padding: 10px 12px; background: white; color: inherit; min-height: 44px; font-size: 16px; } input[type="color"] { width: 44px; height: 44px; padding: 3px; background: white; border: 1px solid #a7af9d; border-radius: 6px; cursor: pointer; } input[type="range"] { width: 100%; min-height: 36px; accent-color: #5bad00; } button { border: 1px solid #b8c1ae; border-radius: 8px; padding: 9px 12px; min-height: 44px; background: #fff; color: inherit; cursor: pointer; } button:hover { background: #f1f6e9; } button.primary, .mode-tabs button[aria-pressed="true"] { background: #5bad00; border-color: #29331f; color: #ffffff; font-weight: 800; } button:disabled { opacity: .45; cursor: not-allowed; } :focus-visible { outline: 3px solid #5bad00; outline-offset: 2px; } .actions { display: flex; gap: 10px; flex-wrap: wrap; } .mode-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 18px; } .hint, small, .footnote { font-size: 12px; color: #59614f; line-height: 1.6; } .error { color: #a02020; font-size: 13px; margin: 8px 0; } .error:empty { display: none; } #status { font-size: 12px; min-height: 20px; margin: 8px 0; } #easy-panel, #free-panel { margin-top: 20px; } .section-gap { margin-top: 14px; } .full-width { width: 100%; } .selected-card { border: 1px solid #dce3d5; border-radius: 10px; padding: 12px; margin-bottom: 10px; } .selected-card-head { display: flex; align-items: center; gap: 10px; } .selected-card-head .entry-button { font-size: 28px; min-width: 58px; } .selected-card-head .role-label { font-size: 12px; flex: 1; } .selected-card .font-button { width: 100%; margin-top: 8px; text-align: left; font-size: 13px; } .selected-card .amount { margin-top: 8px; } .color-control { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; } .color-code { font: 12px monospace; min-width: 65px; } .swatch { width: 28px; height: 32px; min-height: 32px; padding: 4px; border-color: transparent; } .swatch span { display: block; background: var(--swatch); width: 18px; height: 18px; border-radius: 50%; } #object-controls { margin: 18px 0 0; border: 1px solid #dce3d5; border-radius: 10px; padding: 12px; min-width: 0; } #object-controls legend { font-weight: bold; font-size: 14px; } #object-font { margin-top: 12px; font-size: 13px; } dialog { width: min(620px, calc(100% - 24px)); max-height: 90svh; border: 1px solid #b8c1ae; border-radius: 14px; padding: 20px; overscroll-behavior: contain; } dialog::backdrop { background: #17230f66; } .chips { display: flex; gap: 6px; overflow-x: auto; margin: 12px 0; padding: 4px; } .chips button { flex: 0 0 auto; font-size: 12px; } .chips button[aria-pressed="true"] { border-color: #5bad00; background: #edf7df; } .character-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; } .character-option { padding: 6px 2px; min-height: 65px; } .character-option strong { display: block; font-size: 27px; font-weight: 500; } .character-option small { display: block; font-size: 10px; overflow-wrap: anywhere; } #more-characters { margin-top: 14px; } #font-list { max-height: 48svh; overflow-y: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 4px; } .font-tile { position: relative; min-width: 0; } .font-star { position: absolute; top: 5px; right: 5px; min-width: 44px; padding: 5px; color: #5bad00; font-size: 22px; } .font-star[aria-pressed="true"] { background: #edf7df; } .font-option { text-align: left; width: 100%; min-width: 0; display: flex; flex-direction: column; min-height: 135px; padding: 12px; } .font-option > span:first-child { font-size: 12px; overflow-wrap: anywhere; padding-right: 36px; } .font-option[aria-pressed="true"] { border: 2px solid #5bad00; } .font-sample { font-size: clamp(19px, 4vw, 34px); line-height: 1.35; min-height: 60px; overflow-wrap: anywhere; } .font-option small { font-size: 11px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .preview-top { margin-bottom: 6px; } .zoom-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-bottom: 8px; } .zoom-controls button { min-width: 44px; min-height: 44px; padding: 6px; } .zoom-controls select { width: 82px; min-width: 0; padding: 6px 3px; } .zoom-controls #zoom-fit { margin-left: auto; font-size: 12px; white-space: nowrap; } .preview-gesture-hint { margin: 6px 0; } @media (max-width: 720px) { main { padding: 16px 10px; } header { margin-bottom: 14px; } .workspace { grid-template-columns: minmax(0, 1fr); gap: 14px; } .preview { top: 0; z-index: 2; padding: 10px; box-shadow: 0 3px 10px #20301012; } .preview-top { margin-bottom: 4px; } .preview { padding-inline: 5px; } .controls { padding: 14px; } .preview .actions button { padding: 8px 12px; } dialog { padding: 16px; } } @media (max-height: 500px) { .preview { position: static; } } #selection-layer { position: absolute; inset: 0; pointer-events: none; } #marquee { position: absolute; border: 1px solid #5bad00; background: #5bad0025; pointer-events: none; } #multi-select[aria-pressed="true"] { background: #5bad00; color: #fff; border-color: #5bad00; } .decorations, .developer-tools { margin-top: 12px; border-top: 1px solid #ddd; padding-top: 12px; } summary { cursor: pointer; min-height: 32px; font-weight: 700; } .decoration-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .decoration-fields label { margin: 4px 0; font-size: .85rem; } .decoration-fields select { margin-top: 4px; } .decoration-fields input[type="color"] { display: block; width: 100%; height: 42px; margin-top: 4px; } #template-json { width: 100%; max-width: 100%; font: 13px/1.5 monospace; resize: vertical; } #json-message { overflow-wrap: anywhere; font-size: .9rem; } .template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .template-card { padding: 8px; text-align: left; display: flex; flex-direction: column; gap: 8px; } .template-card canvas { width: 100%; height: auto; border-radius: 8px; } .template-card span { font-size: .8rem; font-weight: normal; } /* Editor overlays are outside the export canvas. */ .selection-box.is-locked { border-style: dashed; border-color: #59614f; } .lock-marker { position: absolute; transform: translate(0, -100%); pointer-events: none; font-size: 13px; line-height: 1; background: #ffffffdd; border-radius: 3px; } #selection-count { margin: 10px 0; padding: 6px 10px; border-left: 3px solid #5bad00; background: #f1f6e9; font-size: 13px; font-weight: 700; } .selection-tools { margin: 8px 0; } .selection-tools button { flex: 1 1 135px; } #toggle-lock[aria-pressed="true"] { border-color: #5bad00; background: #edf7df; } .layer-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } #pan-mode[aria-pressed="true"] { background: #5bad00; border-color: #5bad00; color: #142800; font-weight: 700; } .canvas-scroll.is-pan-mode, .canvas-scroll.is-space-pan, .canvas-scroll.is-pan-mode #interaction, .canvas-scroll.is-space-pan #interaction { cursor: grab; } .canvas-scroll.is-pan-mode:active, .canvas-scroll.is-space-pan:active, .canvas-scroll.is-pan-mode:active #interaction, .canvas-scroll.is-space-pan:active #interaction { cursor: grabbing; } .reset-actions { margin-top: 18px; padding-top: 14px; border-top: 1px solid #ddd; } .color-choice-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: 100%; font-size: 12px; } .color-choice-row > span:first-child { min-width: 76px; font-weight: 700; } .recent-color-row:empty { display: none; } .style-tools button { flex: 1 1 140px; font-size: 13px; } .character-option.is-word { grid-column: span 2; } .character-option.is-word strong { font-size: 18px; line-height: 1.25; white-space: nowrap; } .save-tools { margin-top: 18px; border: 1px solid #dce3d5; border-radius: 10px; padding: 12px; } .save-tools summary { font-size: 16px; } .save-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; } .save-list-heading h3 { margin: 0; } .save-list-heading button { min-height: 38px; font-size: 12px; } .save-list { display: grid; gap: 8px; margin-top: 8px; } .save-entry { border: 1px solid #dce3d5; border-radius: 8px; padding: 9px; min-width: 0; } .save-entry strong, .save-entry small { display: block; overflow-wrap: anywhere; } .save-entry .actions { margin-top: 8px; } .save-entry .actions button { min-height: 40px; font-size: 13px; } #autosave-status { margin: 6px 0 0; } .template-question { font-weight: 700; margin: 12px 0 4px; } .template-filters { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .55fr); gap: 10px; align-items: end; } .template-filters input, .template-filters select { width: 100%; } .template-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 0; } .template-list-heading p { margin: 0; } .template-tile { border: 1px solid #d9e3ce; border-radius: 10px; padding: 6px; min-width: 0; } .template-tile .template-card { width: 100%; border: 0; padding: 2px; } .template-tile .template-card:disabled { opacity: .6; } .template-tile .template-favorite { width: 100%; margin-top: 6px; font-size: .85rem; } .template-tile .template-favorite[aria-pressed="true"] { border-color: #5bad00; color: #3b7600; background: #edf7df; } .template-tile .template-category-label { font-size: .75rem; color: #506446; } #template-empty { padding: 16px; background: #f6f9f1; border-radius: 10px; text-align: center; } #template-more { margin-top: 12px; } @media (max-width: 420px) { .template-filters { grid-template-columns: 1fr; } .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } } .character-favorite-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; } #character-favorite-filter[aria-pressed="true"] { border-color: #5bad00; color: #3b7600; background: #edf7df; } #related-section { padding: 10px; margin: 10px 0; border: 1px solid #cfe3b8; border-radius: 10px; background: #f8fbf4; } #related-section .section-heading { margin-bottom: 6px; } #related-section h3 { margin: 0; font-size: 1rem; } .character-tile { min-width: 0; } .character-tile.is-word { grid-column: span 2; } .character-tile .character-option { width: 100%; } .character-tile .character-option.is-word { grid-column: auto; } .character-tile-tools { display: flex; gap: 3px; margin-top: 3px; } .character-tile-tools button { min-width: 0; min-height: 28px; padding: 2px 3px; font-size: 11px; } .character-tile-tools .character-star { flex: 0 0 30px; font-size: 17px; color: #5bad00; } .character-tile-tools .character-related { flex: 1 1 auto; } .character-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); } .character-tile-tools button { min-height: 40px; } .character-tile-tools .character-star { flex-basis: 40px; } .palette-tools { margin: 16px 0; border: 1px solid #dce3d5; border-radius: 10px; padding: 12px; } .palette-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 10px 0; } .palette-option { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-width: 0; font-size: 13px; } .palette-chips { display: flex; gap: 3px; flex-shrink: 0; } .palette-chips i { width: 17px; height: 17px; border: 1px solid #0002; border-radius: 50%; background: var(--chip); } @media (max-width: 390px) { .palette-list { grid-template-columns: 1fr; } #font-list { gap: 6px; } .font-option { padding: 8px; } } /* The mobile editor keeps the full-width canvas in the page and opens controls independently. */ .mobile-start-actions, #mobile-toolbar, #mobile-sheet-backdrop, #mobile-sheet-header, #mobile-complete-panel { display: none; } @media (max-width: 720px) { body { padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px)); } body.mobile-sheet-visible { overflow: hidden; } main { padding: 8px max(8px, env(safe-area-inset-right, 0px)) 16px max(8px, env(safe-area-inset-left, 0px)); } header { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; flex-wrap: wrap; } header h1 { margin: 0; font-size: 20px; } header p { display: none; } header .badge { font-size: 10px; padding: 2px 5px; } .workspace { gap: 0; } .preview { position: static; display: flex; flex-direction: column; top: auto; padding: 5px; box-shadow: none; } .preview-top { order: 0; margin: 0 0 3px; } .canvas-scroll { order: 1; } .preview-edit-actions { order: 2; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 6px 0; } .preview-edit-actions #save { display: none; } .preview-edit-actions button { min-width: 0; min-height: 44px; } .zoom-controls { order: 3; display: grid; grid-template-columns: 44px minmax(65px, 1fr) 44px minmax(83px, 1fr) minmax(84px, 1fr); gap: 4px; margin: 0 0 6px; } .zoom-controls select { width: 100%; min-width: 0; min-height: 44px; } .zoom-controls button { padding: 4px; min-width: 0; font-size: 11px; } .zoom-controls #zoom-fit { margin: 0; } .mobile-start-actions { order: 4; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 2px 0 4px; } .mobile-start-actions button { min-width: 0; font-size: 13px; font-weight: 700; } .preview-gesture-hint { display: none; } #status { order: 5; margin: 2px 0; min-height: 0; } #autosave-status { order: 6; margin: 0; } #mobile-toolbar { display: block; position: fixed; inset: auto 0 0; z-index: 15; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid #cbd7bd; box-shadow: 0 -3px 14px #12290f22; } #mobile-toolbar-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; } #mobile-toolbar-actions button { min-width: 0; min-height: 52px; padding: 4px 2px; font-size: clamp(10px, 2.8vw, 13px); line-height: 1.2; font-weight: 700; overflow-wrap: anywhere; } #mobile-selection-status { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding: 0 5px; font-size: 12px; font-weight: 700; } #mobile-selection-status button { min-height: 30px; padding: 2px 9px; font-size: 12px; } body.mobile-sheet-visible #mobile-toolbar { visibility: hidden; } #mobile-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 19; background: #15230e78; } #controls { display: none; } #controls.mobile-sheet-open { display: block; position: fixed; left: 0; right: 0; z-index: 20; width: 100%; max-width: 720px; margin: 0 auto; overflow-y: auto; overscroll-behavior: contain; background: #fff; border-radius: 18px 18px 0 0; padding: 0 14px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -5px 20px #12290f35; } #mobile-sheet-header { display: flex; position: sticky; top: 0; z-index: 2; align-items: center; justify-content: space-between; gap: 8px; min-height: 54px; padding: 6px 0; margin-bottom: 6px; border-bottom: 1px solid #dce3d5; background: #fff; } #mobile-sheet-header strong { font-size: 17px; } #mobile-sheet-header button { min-width: 70px; } #mobile-complete-panel { display: grid; gap: 8px; justify-items: center; } #mobile-complete-preview { display: block; width: min(52vw, 190px); height: auto; border: 1px solid #dce3d5; border-radius: 6px; } #mobile-complete-panel p { margin: 0; } #controls[data-mobile-view] > :not(#mobile-sheet-header) { display: none !important; } #controls[data-mobile-view="easy-word"] #easy-panel, #controls[data-mobile-view="easy-layout"] #easy-panel, #controls[data-mobile-view="easy-color"] #easy-panel, #controls[data-mobile-view="easy-more"] #easy-panel, #controls[data-mobile-view="free-tools"] #free-panel, #controls[data-mobile-view="free-color"] #free-panel, #controls[data-mobile-view="free-size"] #free-panel, #controls[data-mobile-view="free-more"] #free-panel { display: block !important; } #controls[data-mobile-view="easy-word"] #easy-panel > *, #controls[data-mobile-view="easy-layout"] #easy-panel > *, #controls[data-mobile-view="easy-color"] #easy-panel > *, #controls[data-mobile-view="free-tools"] #free-panel > *, #controls[data-mobile-view="free-color"] #free-panel > *, #controls[data-mobile-view="free-size"] #free-panel > * { display: none !important; } #controls[data-mobile-view="easy-word"] #easy-word-heading, #controls[data-mobile-view="easy-word"] #selected-items, #controls[data-mobile-view="easy-color"] #selected-items, #controls[data-mobile-view="easy-layout"] #pattern-label, #controls[data-mobile-view="easy-layout"] #pattern, #controls[data-mobile-view="easy-layout"] #easy-size-heading, #controls[data-mobile-view="easy-layout"] #size, #controls[data-mobile-view="easy-layout"] #easy-placement-actions, #controls[data-mobile-view="free-tools"] #free-word-heading, #controls[data-mobile-view="easy-word"] #easy-word-heading, #controls[data-mobile-view="free-tools"] #free-word-heading, #controls[data-mobile-view="easy-layout"] #easy-size-heading, #controls[data-mobile-view="free-tools"] #free-selection-actions, #controls[data-mobile-view="free-tools"] #selection-count, #controls[data-mobile-view="free-tools"] #free-selection-tools, #controls[data-mobile-view="free-tools"] #object-list-label, #controls[data-mobile-view="free-tools"] #object-list, #controls[data-mobile-view="free-color"] #selection-count, #controls[data-mobile-view="free-color"] #object-controls, #controls[data-mobile-view="free-size"] #selection-count, #controls[data-mobile-view="free-size"] #object-controls { display: block !important; } #controls[data-mobile-view="easy-word"] #easy-word-heading, #controls[data-mobile-view="free-tools"] #free-word-heading, #controls[data-mobile-view="easy-layout"] #easy-size-heading, #controls[data-mobile-view="free-tools"] #free-selection-actions, #controls[data-mobile-view="free-tools"] #free-selection-tools, #controls[data-mobile-view="easy-layout"] #easy-placement-actions { display: flex !important; } #controls[data-mobile-view="easy-word"] .selected-card .color-control, #controls[data-mobile-view="easy-word"] .selected-card .font-button, #controls[data-mobile-view="easy-word"] .selected-card .decorations, #controls[data-mobile-view="easy-color"] .selected-card .font-button, #controls[data-mobile-view="easy-color"] .selected-card .decorations, #controls[data-mobile-view="easy-color"] .selected-card .amount { display: none !important; } #controls[data-mobile-view="free-color"] #object-controls > *, #controls[data-mobile-view="free-size"] #object-controls > * { display: none !important; } #controls[data-mobile-view="free-color"] #object-name, #controls[data-mobile-view="free-color"] #object-color-control, #controls[data-mobile-view="free-size"] #object-name, #controls[data-mobile-view="free-size"] #object-size-label, #controls[data-mobile-view="free-size"] #object-size { display: block !important; } #controls[data-mobile-view="easy-color"] #palette-tools, #controls[data-mobile-view="easy-more"] #palette-tools, #controls[data-mobile-view="free-color"] #palette-tools, #controls[data-mobile-view="free-more"] #palette-tools, #controls[data-mobile-view="complete"] #save-tools, #controls[data-mobile-view="complete"] #mobile-complete-panel, #controls[data-mobile-view="easy-layout"] #mode-tabs, #controls[data-mobile-view="easy-more"] #mode-tabs, #controls[data-mobile-view="free-more"] #mode-tabs { display: block !important; } #controls[data-mobile-view="easy-layout"] #mode-tabs, #controls[data-mobile-view="easy-more"] #mode-tabs, #controls[data-mobile-view="free-more"] #mode-tabs { display: grid !important; } #controls[data-mobile-view="easy-layout"] #title-controls, #controls[data-mobile-view="easy-more"] #title-controls, #controls[data-mobile-view="free-more"] #title-controls { display: block !important; } #controls[data-mobile-view="easy-more"] #reset-actions, #controls[data-mobile-view="free-more"] #reset-actions, #controls[data-mobile-view="easy-more"] .developer-tools, #controls[data-mobile-view="free-more"] .developer-tools { display: block !important; } #controls[data-mobile-view="complete"] #save-tools { margin-top: 12px; } #character-dialog[open], #font-dialog[open], #template-dialog[open] { display: flex; flex-direction: column; position: fixed; left: 0; right: 0; top: calc(var(--mobile-visual-top, 0px) + 8px); width: 100%; max-width: 720px; height: calc(var(--mobile-visual-height, 100dvh) - 8px); max-height: none; margin: 0 auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 16px 16px 0 0; overflow: hidden; } #character-dialog .dialog-heading, #font-dialog .dialog-heading, #template-dialog .dialog-heading { flex: none; margin-bottom: 4px; } #character-dialog .dialog-heading h2, #font-dialog .dialog-heading h2, #template-dialog .dialog-heading h2 { font-size: 18px; } #character-dialog label, #font-dialog label, #template-dialog label { margin: 5px 0; } #character-dialog .chips { margin: 6px 0; } #character-dialog .picker-body, #template-dialog .picker-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2px 8px; } #character-scroll, #template-scroll { min-height: 0; overflow: visible; } #word-kind-filters, #categories, #template-purposes { flex: none; flex-wrap: nowrap; min-height: 56px; overflow-x: auto; overflow-y: hidden; margin: 6px 0; padding: 4px; overscroll-behavior-x: contain; scrollbar-width: thin; } #word-kind-filters button, #categories button, #template-purposes button { flex: 0 0 auto; min-height: 44px; white-space: nowrap; } #font-list { flex: 1 1 auto; min-height: 120px; overflow-y: auto; overscroll-behavior: contain; max-height: none; } #font-dialog #font-message { flex: none; } } @media (max-width: 360px) { .zoom-controls { grid-template-columns: 38px minmax(60px, 1fr) 38px minmax(70px, 1fr) minmax(76px, 1fr); gap: 3px; } .zoom-controls button { font-size: 10px; } } @media (min-width: 721px) and (max-height: 500px) and (pointer: coarse) { main { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); } } #title-count, #title-help { margin: 4px 0; } #title-presets { margin: 6px 0 12px; } /* Readability editing aids use the same controls on desktop and mobile. */ .readability-box { margin: 12px 0; padding: 12px; border: 1px solid #dce3d5; border-radius: 10px; } .readability-box p { margin: 6px 0; } .readability-box.has-warning { border-color: #5bad00; background: #f5fbeF; } .assist-toggle { display: flex; align-items: center; gap: 8px; } .assist-toggle input { width: 20px; height: 20px; accent-color: #5bad00; flex: 0 0 auto; } .readability-selected, #readability-all { border-color: #5bad00; } .color-control select { max-width: 100%; min-width: 0; width: 100%; } @media (max-width: 720px) { #controls[data-mobile-view="easy-color"] #readability-settings, #controls[data-mobile-view="free-color"] #readability-settings, #controls[data-mobile-view="complete"] #readability-check { display: block !important; } #controls[data-mobile-view="easy-word"] .readability-selected { display: none !important; } } /* Completion actions keep their spacing even when the panel is displayed as a block. */ .maker-header { position: relative; padding-right: 54px; min-height: 44px; } .maker-help { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: 44px; height: 44px; color: #26351e; text-decoration: none; } .maker-help span { display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid #33432a; border-radius: 50%; font-size: 21px; font-weight: 800; background: #fff; } .completion-save-actions { display: grid; width: 100%; gap: 14px; margin: 14px 0 10px; } #completion-support { display: none; } #controls[data-mobile-view="complete"] #completion-support { display: block !important; margin-top: 20px; padding-top: 16px; border-top: 1px solid #dce3d5; } #completion-support p { margin: 8px 0; font-size: 13px; } #completion-support h2 { font-size: 15px; } #completion-support .completion-secondary-link { display: inline-flex; align-items: center; min-height: 44px; color: #304c21; text-underline-offset: 3px; font-weight: 700; } .completion-feedback { margin-top: 18px; }