/* Character studio and the menu membership card. */
.idcard { position: relative; display: grid; grid-template-columns: 92px 1fr; gap: 16px; padding: 16px; margin: 8px 0 22px; border: 2px solid var(--ink); border-radius: 8px; background: #fff8e9; box-shadow: 4px 4px 0 var(--ink); cursor: pointer; text-align: left; }
.idcard:hover { background: #fff1ce; }
.idcard:focus-visible, #creator button:focus-visible { outline: 3px solid #157eaa; outline-offset: 3px; }
.idPhoto { position: relative; border: 2px solid var(--ink); border-radius: 4px; overflow: hidden; background: #e5d8c5; }
#idFace { position: static; display: block; width: 100%; height: 104px; }
.idInfo { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; min-width: 0; }
#idOrg { font-size: 10px; letter-spacing: 1.5px; font-weight: 900; }
#idNo { font: 10px monospace; color: var(--muted); }
#idName { font-size: 20px; font-weight: 900; overflow-wrap: anywhere; }
#idMeta { font-size: 11px; color: var(--muted); }
#idStamp { display: inline-block; color: #aa3541; border: 1px solid currentColor; padding: 2px 5px; margin-top: 5px; font: 800 9px monospace; letter-spacing: 1px; transform: rotate(-3deg); }
.idEdit { grid-column: 1 / -1; font-size: 11px; font-weight: 800; color: #74512d; }
#creator { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; color: #241e2a; background: #f6f1e8; isolation: isolate; }
#creator.hide { display: none; }
#creator button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.crTop { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 24px; border-bottom: 1px solid #ded5c7; background: #fffaf2; }
.crTitle { display: flex; flex-direction: column; gap: 2px; }
.crTitle b { font-family: var(--display); font-size: 25px; font-weight: 400; }
.crTitle span { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 2.5px; color: #857363; }
.crTopBtns { display: flex; align-items: center; gap: 8px; }
.crTopBtns button { border: 1px solid #d6cab9; border-radius: 6px; background: #fff; padding: 9px 14px; font-size: 12px !important; font-weight: 800 !important; }
.crTopBtns button:disabled { opacity: .35; cursor: default !important; }
.crTopBtns .crDone { background: #263b33; border-color: #263b33; color: #fff !important; padding-inline: 24px; }
.crMain { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .85fr); min-height: 0; flex: 1; }
.crStage { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: linear-gradient(#f7c197, #e0b588); }
#crGL { position: absolute; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#crGL:active { cursor: grabbing; }
.crNameTag { position: absolute; top: 22px; left: 24px; right: 24px; font-size: 12px; font-weight: 800; color: #4c3438; text-align: center; pointer-events: none; }
.crPoses { position: absolute; bottom: 57px; left: 16px; right: 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.crPoses button { padding: 7px 10px; border-radius: 20px; border: 1px solid #ffffff90; background: #fff8e7d9; font-size: 11px !important; font-weight: 800 !important; }
.crPoses button.sel { background: #2e3037; color: #fff !important; border-color: #2e3037; }
.crSpin { position: absolute; bottom: 16px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 16px; color: #624943; font-size: 10px; letter-spacing: 1px; }
.crSpin button { border: 1px solid #ffffff90; background: #fff8e7c9; border-radius: 50%; width: 28px; height: 28px; font-size: 17px !important; }
.crPanel { display: flex; flex-direction: column; overflow: hidden; background: #faf7f0; border-left: 1px solid #ded5c7; }
.crTabs { display: grid; grid-template-columns: repeat(6, 1fr); flex-shrink: 0; border-bottom: 1px solid #ded5c7; padding: 8px 10px 0; gap: 2px; }
.crTab { border: 0; border-bottom: 3px solid transparent; background: transparent; padding: 10px 2px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.crTab .ic { font-size: 21px; }
.crTab .nm { font-size: 10px; font-weight: 800; color: #8a7a69; }
.crTab.sel { background: #ece4d5; border-bottom-color: #b16437; border-radius: 6px 6px 0 0; }
.crTab.sel .nm { color: #542f20; }
.crOpts { flex: 1; min-height: 0; overflow: auto; padding: 20px 22px 28px; scrollbar-width: thin; }
.crSec { margin-bottom: 22px; }
.crSec h4 { margin: 0 0 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 1.7px; color: #796756; }
.crTiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.crTile { display: flex; flex-direction: column; align-items: center; min-width: 0; border: 1px solid #e2d8ca; border-radius: 7px; background: #f0eade; overflow: hidden; padding: 0 0 8px; transition: background .12s, border-color .12s; }
.crTile:hover { background: #e8dfce; border-color: #b8a38c; }
.crTile.sel { background: #e7ede4; border: 2px solid #4b705b; padding-bottom: 7px; }
.crTile canvas { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1; pointer-events: none; }
.crTile span { display: block; font-size: 10px; font-weight: 800; padding: 2px 4px 0; }
.crSwatches { display: flex; gap: 9px; flex-wrap: wrap; padding: 3px; }
.crSw { width: 28px; height: 28px; border-radius: 50%; padding: 0; border: 2px solid #ffffff; background: var(--c); box-shadow: 0 0 0 1px #d1c6b7; position: relative; cursor: pointer; }
.crSw.sel { box-shadow: 0 0 0 2px #2e503e; outline: 2px solid #faf7f0; outline-offset: 2px; }
.crSw.none { background: linear-gradient(135deg, #faf7f0 46%, #c55757 48%, #c55757 53%, #faf7f0 55%); }
.crSw.custom { display: block; background: conic-gradient(#ed5c54, #edcd65, #7cad83, #6f99c4, #b27eb6, #ed5c54); overflow: hidden; }
.crSw.custom input { width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.crUniform { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid #d8c9ac; border-radius: 8px; background: #eee5d2; font-size: 13px; line-height: 1.6; }
.crPresetBar { display: flex; align-items: stretch; gap: 16px; border-top: 1px solid #ded5c7; padding: 12px 22px; background: #fffaf2; flex-shrink: 0; }
.crPresetsLbl { align-self: center; width: 58px; flex-shrink: 0; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: 1.6px; line-height: 1.8; color: #7b6957; }
.crPresets { display: flex; gap: 8px; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
.crPreset { display: flex; align-items: center; gap: 4px; flex: 0 0 150px; min-width: 0; border: 1px solid #e4dbce; border-radius: 6px; background: #f3eee3; padding: 0 6px 0 0; text-align: left; }
.crPreset:hover { background: #e7ede4; border-color: #7b9a81; }
.crPreset canvas { position: static; display: block; width: 58px; height: 70px; flex-shrink: 0; }
.crPreset span { font-size: 10px; font-weight: 800; line-height: 1.4; }
.crLoading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; background: #f2d2afd9; font-size: 13px; line-height: 1.7; }
.crLoading.hide { display: none; }
@media (min-width: 1500px) { .crMain { grid-template-columns: minmax(0, 1fr) 560px; } .crTiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .crTop { padding: 11px 12px; gap: 8px; } .crTitle b { font-size: 18px; } .crTitle span { font-size: 8px; } .crTopBtns { gap: 4px; } .crTopBtns button { padding: 8px !important; font-size: 10px !important; } .crMain { grid-template-columns: 1fr; grid-template-rows: minmax(230px, 43%) minmax(0, 1fr); } .crPanel { border-left: 0; border-top: 1px solid #ded5c7; } .crOpts { padding: 14px 16px; } .crTiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } .crTabs { padding-top: 0; } .crTab { padding: 5px 2px; } .crTab .ic { font-size: 17px; } .crPresetBar { padding: 8px 12px; gap: 8px; } .crPresetsLbl { width: 42px; font-size: 8px; } .crPreset { flex-basis: 130px; } .crPreset canvas { width: 42px; height: 50px; } .crNameTag { top: 10px; font-size: 10px; } .crPoses { bottom: 40px; } .crPoses button { padding: 5px 8px; font-size: 10px !important; } .crSpin { bottom: 7px; } }
@media (max-height: 550px) and (min-width: 721px) { .crTop { padding-block: 8px; } .crPresetBar { padding-block: 6px; } .crPreset canvas { height: 48px; width: 42px; } .crNameTag { top: 9px; } .crTiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Restrained anime production studio. */
#creator { font-family: Inter, 'Segoe UI', system-ui, sans-serif; color: #e3e6eb; background: #12171e; }
#creator .crTop { background: #11161d; border-color: #2a323d; padding: 20px 28px; }
#creator .crTitle b { font-family: inherit; font-size: 22px; font-weight: 550; letter-spacing: -.6px; }
#creator .crTitle span { color: #75818f; font-size: 8px; letter-spacing: 2px; margin-top: 4px; }
#creator .crTopBtns button { background: #1b222c; border-color: #343d49; color: #b7c1ce; border-radius: 4px; font-weight: 500 !important; padding: 10px 16px; }
#creator .crTopBtns .crDone { background: #c6dfd1; color: #172a23 !important; border-color: #c6dfd1; }
#creator .crStage { background: #18212b; }
#creator .crNameTag { text-align: left; top: 24px; left: 28px; color: #a1b1bf; font-weight: 400; font-size: 11px; letter-spacing: .4px; }
#creator .crPanel { background: #141a22; border-color: #303946; }
#creator .crTabs { border-color: #2a323e; padding: 14px 12px 0; counter-reset: part; }
#creator .crTab { position: relative; padding: 12px 4px 16px; gap: 8px; border-bottom-width: 2px; }
#creator .crTab::before { counter-increment: part; content: '0' counter(part); font: 9px monospace; color: #5d6b7a; }
#creator .crTab .ic { display: none; }
#creator .crTab .nm { color: #8e9aa8; font-size: 10px; font-weight: 500; }
#creator .crTab.sel { background: transparent; border-color: #bbd8c7; border-radius: 0; }
#creator .crTab.sel .nm, #creator .crTab.sel::before { color: #d1e8da; }
#creator .crOpts { padding: 26px; }
#creator .crSec { margin-bottom: 30px; }
#creator .crSec h4 { font-size: 9px; font-weight: 500; color: #8392a3; letter-spacing: 1.8px; margin-bottom: 14px; }
#creator .crTile { background: #1e2731; border-color: #2b3643; border-radius: 4px; }
#creator .crTile:hover { background: #293542; border-color: #687b8c; }
#creator .crTile.sel { background: #263830; border-color: #bed9c9; border-width: 1px; padding-bottom: 8px; }
#creator .crTile span { font-weight: 400; font-size: 10px; color: #acb9c7; padding-top: 5px; }
#creator .crTile.sel span { color: #d8eddf; }
#creator .crSw { border-color: #141a22; box-shadow: 0 0 0 1px #4c5662; width: 26px; height: 26px; }
#creator .crSw.sel { box-shadow: 0 0 0 2px #d0e9dc; outline-color: #141a22; }
#creator .crSwatches { gap: 13px; }
#creator .crPoses { bottom: 59px; gap: 0; }
#creator .crPoses button { background: #17212bd9; color: #93a4b3; border-color: #384652; border-radius: 0; padding: 8px 16px; font-weight: 400 !important; font-size: 10px !important; }
#creator .crPoses button:first-child { border-radius: 4px 0 0 4px; }
#creator .crPoses button:last-child { border-radius: 0 4px 4px 0; }
#creator .crPoses button.sel { background: #c2dccd; color: #183027 !important; border-color: #c2dccd; }
#creator .crSpin { color: #748797; font-size: 9px; }
#creator .crSpin button { background: transparent; border-color: #3a4a59; color: #a6b8c5; }
#creator .crPresetBar { background: #11161d; border-color: #2b3440; padding: 15px 26px; }
#creator .crPresetsLbl { color: #738496; font-weight: 400; font-size: 8px; }
#creator .crPreset { background: #1b232d; border-color: #2b3643; border-radius: 4px; }
#creator .crPreset:hover { background: #293930; border-color: #8eac9b; }
#creator .crPreset span { color: #a5b2c1; font-size: 9px; font-weight: 400; }
#creator .crUniform { color: #b2c0cf; background: #202b35; border-color: #3b4a59; }
#creator .crLoading { background: #18212bf2; color: #bed1df; }
#creator button:focus-visible { outline-color: #d3eedf; }
@media(max-width:720px) { #creator .crTop { padding: 12px; } #creator .crTitle b { font-size: 17px; } #creator .crTitle span { max-width: 125px; font-size: 6px; line-height: 1.6; } #creator .crOpts { padding: 16px; } #creator .crTabs { padding-top: 3px; } #creator .crTab { padding-block: 6px; gap: 4px; } #creator .crPresetBar { padding: 8px 12px; } #creator .crPoses { bottom: 43px; } #creator .crPoses button { padding: 6px 12px; } }