#kimodo-dojo-toggle { display: block !important; color: #ffd28a; } #kimodo-dojo-toggle.active { background: #4a3320 !important; border-color: #b97736 !important; color: #ffe0ad !important; } .kimodo-dojo-label { display: block; margin: 10px 0 5px; font-size: 11px; color: #b8bec6; } .kimodo-dojo-mode { margin: 10px 0 8px; background: #201a16; border-color: #4a3320; } .kimodo-dojo-mode .kimodo-cz-segbtn { color: #b9905a !important; } .kimodo-dojo-mode .kimodo-cz-segbtn.active { background: #4a3320 !important; color: #ffe0ad !important; } .kimodo-dojo-settings { display: grid; gap: 8px; margin: 8px 0 10px; padding: 8px; border: 1px solid #34343c; border-radius: 7px; background: #202026; } .kimodo-dojo-range { display: grid; gap: 5px; font-size: 11px; color: #b8bec6; } .kimodo-dojo-check { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #c4cad2; } .kimodo-dojo-check input { accent-color: #b97736; } .kimodo-dojo-range span { display: flex; justify-content: space-between; gap: 8px; } .kimodo-dojo-range output { color: #ffe0ad; } .kimodo-dojo-range input { width: 100%; accent-color: #b97736; } .kimodo-dojo-prompt { width: 100%; box-sizing: border-box; padding: 7px 8px; font: inherit; font-size: 12px; line-height: 1.4; resize: vertical; background: #1c1c22; color: #e3e3e8; border: 1px solid #3a3a40; border-radius: 6px; } .kimodo-dojo-prompt:focus { outline: none; border-color: #b97736; } .kimodo-dojo-presets { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 8px 0 10px; } .kimodo-dojo-preset, .kimodo-dojo-actions button { padding: 7px 8px; font-size: 12px; cursor: pointer; border-radius: 6px; background: #34343a !important; color: #ddd !important; border: 1px solid #444 !important; box-shadow: none !important; } .kimodo-dojo-preset:hover, .kimodo-dojo-actions button:hover:not(:disabled) { background: #3f3f48 !important; } .kimodo-dojo-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 2px; } .kimodo-dojo-grid2 label { display: grid; gap: 4px; font-size: 11px; color: #b8bec6; } .kimodo-dojo-grid2 input { width: 100%; box-sizing: border-box; padding: 6px 7px; background: #1c1c22; color: #e3e3e8; border: 1px solid #3a3a40; border-radius: 6px; } .kimodo-dojo-actions { display: flex; gap: 7px; margin-top: 8px; } .kimodo-dojo-actions button { flex: 1; } .kimodo-dojo-actions .kimodo-dojo-primary { background: #4a3320 !important; color: #ffe0ad !important; border-color: #b97736 !important; } .kimodo-dojo-status { margin-top: 10px; } .kimodo-dojo-time, .kimodo-dojo-detail { margin-top: 7px; min-height: 15px; font-size: 11px; line-height: 1.35; color: #aeb5be; } .kimodo-dojo-detail { color: #87909b; } .kimodo-dojo-progress { display: grid; gap: 6px; margin-top: 10px; padding: 8px; background: #202026; border: 1px solid #34343c; border-radius: 7px; } .kimodo-dojo-step { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #7f8792; } .kimodo-dojo-step span { width: 9px; height: 9px; border-radius: 50%; background: #4a4a52; flex: 0 0 auto; } .kimodo-dojo-step.active { color: #ffe0ad; } .kimodo-dojo-step.active span { background: conic-gradient(from 0deg, #ffd166, #8a642f, #ffd166); animation: kimodo-spin .9s linear infinite; } .kimodo-dojo-step.done { color: #9fe6c0; } .kimodo-dojo-step.done span { background: #49b978; } .kimodo-dojo-step.fail { color: #ff9a9a; } .kimodo-dojo-step.fail span { background: #d85d5d; } .kimodo-dojo-preview-wrap { display: none; margin-top: 9px; border: 1px solid #34343c; border-radius: 7px; overflow: hidden; background: #151519; } .kimodo-dojo-preview-wrap.on { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; } .kimodo-dojo-preview-wrap figure { margin: 0; position: relative; min-width: 0; } .kimodo-dojo-preview-wrap figcaption { position: absolute; left: 5px; top: 5px; padding: 2px 5px; border-radius: 4px; background: rgba(0, 0, 0, 0.62); color: #e9edf2; font-size: 9px; line-height: 1; } .kimodo-dojo-preview-wrap img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } /* ============ Library / create restructure ============ */ .kimodo-dojo-view[hidden] { display: none; } /* Mine|Community pill — dojo (amber) palette, NOT the purple My Karate one. */ .kimodo-dojo-seg { background: #201a16; border-color: #4a3320; } .kimodo-dojo-seg .kimodo-cz-segbtn { color: #b9905a !important; } .kimodo-dojo-seg .kimodo-cz-segbtn.active { background: #4a3320 !important; color: #ffe0ad !important; } /* "+ Add dojo" — same dashed-outline style as "+ Add a stance", dojo colors. */ .kimodo-dojo-addbtn { display: block; width: 100%; padding: 11px; margin-bottom: 10px; font-size: 13px; font-weight: 600; cursor: pointer; border-radius: 9px; background: #4a3320 !important; color: #ffe0ad !important; border: 1px dashed #b97736 !important; box-shadow: none !important; } .kimodo-dojo-addbtn:hover { background: #5a3f27 !important; } .kimodo-dojo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .kimodo-dojo-card { position: relative; cursor: pointer; border-radius: 8px; overflow: hidden; background: #202026; border: 1px solid #34343c; } .kimodo-dojo-card:hover { border-color: #b97736; } .kimodo-dojo-card .thumb { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #15151a; } .kimodo-dojo-card .ph { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 1 / 1; font-size: 26px; color: #6a5a3a; background: #1b1b20; } .kimodo-dojo-card .nm { padding: 5px 7px; font-size: 10.5px; line-height: 1.25; color: #d7d3c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kimodo-dojo-card .badge { position: absolute; left: 5px; top: 5px; padding: 1px 5px; border-radius: 4px; font-size: 8.5px; font-weight: 700; letter-spacing: .03em; background: rgba(0, 0, 0, 0.6); color: #ffd28a; } .kimodo-dojo-card .del { position: absolute; top: 4px; right: 5px; padding: 1px 5px; font-size: 12px; line-height: 1; cursor: pointer; color: #ccc !important; background: rgba(0, 0, 0, 0.55) !important; border: 0 !important; border-radius: 5px; box-shadow: none !important; } .kimodo-dojo-card .del:hover { color: #ff9a9a !important; } .kimodo-dojo-empty { margin-top: 12px; text-align: center; color: #87909b; } /* Back to the dojo list — arrow only, like My Karate's ‹ back. */ .kimodo-dojo-back { background: none !important; border: 0 !important; box-shadow: none !important; color: #ffd28a !important; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 6px 6px 2px; } .kimodo-dojo-back:hover { color: #ffe0ad !important; } /* "Describe the dojo" heading row with a right-anchored erase icon. */ .kimodo-dojo-promptrow { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 5px; } .kimodo-dojo-promptrow .kimodo-dojo-label { margin: 0; } .kimodo-dojo-erase { padding: 2px 6px; font-size: 14px; line-height: 1; cursor: pointer; color: #b9905a !important; background: none !important; border: 0 !important; box-shadow: none !important; } .kimodo-dojo-erase:hover { color: #ffd28a !important; } .kimodo-dojo-improve { width: 100%; margin: 7px 0 4px; padding: 8px; font-size: 12px; font-weight: 600; cursor: pointer; border-radius: 7px; background: #33271a !important; color: #ffd28a !important; border: 1px solid #7a5424 !important; box-shadow: none !important; } .kimodo-dojo-improve:hover:not(:disabled) { background: #3f3020 !important; } .kimodo-dojo-improve:disabled { opacity: .55; cursor: default; } .kimodo-dojo-adv { margin: 8px 0; border: 1px solid #34343c; border-radius: 7px; background: #1d1d22; overflow: hidden; } .kimodo-dojo-adv > summary { padding: 8px 10px; font-size: 11.5px; font-weight: 600; color: #b8bec6; cursor: pointer; list-style: none; } .kimodo-dojo-adv > summary::-webkit-details-marker { display: none; } .kimodo-dojo-adv > summary::after { content: " ▾"; color: #7f8792; } .kimodo-dojo-adv[open] > summary::after { content: " ▴"; } .kimodo-dojo-adv-body { padding: 0 10px 8px; } .kimodo-dojo-adv-body .kimodo-dojo-mode { margin-top: 2px; } /* ===== Panorama disabled for now: hide its controls ===== */ .kimodo-dojo-panoctl { display: none !important; } /* ===== Generation stage: flux iso image + 3D-conversion effect ===== */ .kimodo-dojo-stage { margin-top: 10px; } .kimodo-dojo-iso { position: relative; width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #15151a; border: 1px solid #34343c; } .kimodo-dojo-iso.generating::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, #1b1b20 30%, #2a2620 50%, #1b1b20 70%); background-size: 220% 100%; animation: kimodo-dojo-shimmer 1.3s linear infinite; } .kimodo-dojo-iso-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); filter: blur(14px); transition: opacity .9s ease, filter .9s ease, transform .9s ease; } .kimodo-dojo-iso.has-img .kimodo-dojo-iso-img { opacity: 1; transform: scale(1); filter: blur(0); } .kimodo-dojo-iso-scan, .kimodo-dojo-iso-3d { opacity: 0; transition: opacity .3s ease; pointer-events: none; } .kimodo-dojo-iso.converting .kimodo-dojo-iso-scan, .kimodo-dojo-iso.converting .kimodo-dojo-iso-3d { opacity: 1; } .kimodo-dojo-iso-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(255,210,138,0.05) 0 2px, transparent 2px 6px), linear-gradient(180deg, transparent 0%, rgba(255,210,138,0.55) 50%, transparent 100%); background-size: 100% 100%, 100% 22%; background-repeat: no-repeat, no-repeat; background-position: 0 0, 0 -22%; mix-blend-mode: screen; } .kimodo-dojo-iso.converting .kimodo-dojo-iso-scan { animation: kimodo-dojo-scan 1.6s ease-in-out infinite; } .kimodo-dojo-iso-3d { position: absolute; left: 0; right: 0; bottom: 0; padding: 6px; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; color: #ffe0ad; background: linear-gradient(0deg, rgba(0,0,0,0.62), transparent); } @keyframes kimodo-dojo-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } @keyframes kimodo-dojo-scan { 0% { background-position: 0 0, 0 -22%; } 100% { background-position: 0 0, 0 122%; } } /* Improve/reroll button loading state (matches move-gen green loader). */ .kimodo-dojo-improve.loading { background: #243a2c !important; color: #8fcaa6 !important; border-color: #2f5a3e !important; } /* Save-to-dataset button (appears after a successful generation). */ .kimodo-dojo-save { display: block; width: 100%; margin: 8px 0 2px; padding: 9px; font-size: 12.5px; font-weight: 600; cursor: pointer; border-radius: 8px; background: #243a2c !important; color: #9fe6c0 !important; border: 1px solid #2f5a3e !important; box-shadow: none !important; } .kimodo-dojo-save[hidden] { display: none; } .kimodo-dojo-save:hover:not(:disabled) { background: #2c4836 !important; } .kimodo-dojo-save:disabled { opacity: .6; cursor: default; } /* Contributor attribution on a community card (replaces the old SPLAT badge). */ .kimodo-dojo-card .by { padding: 0 7px 5px; font-size: 9px; color: #8a7a5a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* "No dojo" card (first in the grid) — clears the scene, back to the grid floor. */ .kimodo-dojo-clearcard { background: #1a1a1f; border-style: dashed; border-color: #44444c; } .kimodo-dojo-clearcard:hover { border-color: #6a6a72; } .kimodo-dojo-clearcard .ph { color: #7a7a84; background: transparent; } .kimodo-dojo-clearcard .nm { color: #9aa0aa; }