.gogorender-document { overflow-x: hidden; }
.gogorender-document .home-header-brand { color: inherit; text-decoration: none; }
.gogorender-main { width: min(1120px, calc(100% - 56px)); min-height: calc(100svh - 80px); margin: auto; padding: 56px 0 50px; }
.gogorender-main .template-intro { margin-bottom: 34px; }
.gogorender-main .template-intro h1 { font-size: clamp(32px, 4.5vw, 58px); }
.gogorender-main .template-intro > p:last-child { max-width: 800px; }
.gogorender-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gogorender-card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid #719c73aa; border-radius: 24px; background: rgb(249 255 241 / 84%); box-shadow: 0 18px 40px rgb(49 95 61 / 13%); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease; }
.gogorender-card:hover, .gogorender-card:focus-visible { transform: translateY(-5px); box-shadow: 0 23px 46px rgb(49 95 61 / 21%); outline: none; }
.gogorender-card-preview { display: grid; place-items: center; min-height: 220px; padding: 26px; background: rgb(239 249 224 / 80%); }
.gogorender-card-preview img { display: block; max-width: 100%; max-height: 180px; object-fit: contain; filter: drop-shadow(0 14px 20px rgb(33 69 40 / 18%)); }
.carrier-visual { --physical-ratio: 1; --asset-ratio: 1; position: relative; width: 100%; height: 195px; overflow: visible; isolation: isolate; }
.carrier-visual img { display: block; position: absolute; top: 50%; left: 50%; width: auto; height: clamp(120px, calc(156px * var(--physical-ratio)), 238px); max-width: none; max-height: none; aspect-ratio: var(--asset-ratio); pointer-events: none; backface-visibility: hidden; transform-origin: center; will-change: transform, opacity; transition: opacity .42s cubic-bezier(.2,.8,.25,1), transform .52s cubic-bezier(.2,.8,.25,1); }
.carrier-visual-cover { z-index: 2; transform: translate(-50%, -50%) scale(.94); }
.carrier-visual-object { z-index: 1; opacity: 0; transform: translate(-50%, -50%) scale(.82); }
.carrier-visual.is-hovering .carrier-visual-cover { transform: translate(calc(-50% - 34px), -50%) scale(.74); }
.carrier-visual.is-hovering .carrier-visual-object { opacity: 1; transform: translate(calc(-50% + 34px), -50%) scale(.74); }
.carrier-visual-CD { --physical-ratio: 1; --asset-ratio: 640 / 566; }
.carrier-visual-CassetteTape { --physical-ratio: .872; --asset-ratio: 392 / 600; }
.carrier-visual-Vinyl { --physical-ratio: 2.52; --asset-ratio: 598 / 600; }
.gogorender-card-preview .template-vinyl { width: min(170px, 76%); }
.gogorender-card-body { display: flex; flex: 1; flex-direction: column; padding: 22px 23px 24px; }
.gogorender-card-body h2 { margin: 0; color: var(--home-ink); font: 700 23px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.gogorender-card-body p:not(.template-card-kicker) { min-height: 64px; margin: 12px 0 19px; color: #617566; font-size: 13px; line-height: 1.7; }
.gogorender-card-body .template-card-link { margin-top: auto; }
.gogorender-config-layout { display: grid; grid-template-columns: minmax(260px, .74fr) minmax(0, 1.26fr); gap: 18px; align-items: start; }
.gogorender-panel { min-width: 0; padding: 24px; border: 1px solid #719c73aa; border-radius: 24px; background: rgb(249 255 241 / 86%); box-shadow: 0 18px 40px rgb(49 95 61 / 13%); }
.gogorender-panel + .gogorender-panel { min-height: 100%; }
.gogorender-panel h2 { margin: 0; color: var(--home-ink); font: 700 24px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.gogorender-panel .template-card-kicker { margin-bottom: 9px; }
.gogorender-panel-intro { margin: 10px 0 18px; color: #617566; font-size: 12px; line-height: 1.7; }
.gogorender-specs { display: grid; gap: 8px; }
.gogorender-specs button, .gogorender-option-row button { min-height: 46px; border: 1px solid #b7cbb6; border-radius: 12px; background: #fffefa; color: #617566; font: 700 13px "Noto Sans SC", sans-serif; text-align: left; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
.gogorender-specs button { padding: 0 14px; }
.gogorender-specs button small { display: block; margin-top: 3px; color: #8d9a90; font-size: 10px; font-weight: 600; }
.gogorender-specs button.is-disabled, .gogorender-specs button:disabled { border-style: dashed; border-color: #c8d0c6; background: #edf0eb; color: #9da69f; cursor: not-allowed; opacity: .78; }
.gogorender-specs button.is-disabled:hover, .gogorender-specs button:disabled:hover { border-color: #c8d0c6; transform: none; }
.gogorender-specs button:hover, .gogorender-specs button:focus-visible, .gogorender-option-row button:hover, .gogorender-option-row button:focus-visible { border-color: #6e9b70; box-shadow: 0 8px 18px rgb(49 95 61 / 11%); transform: none; outline: none; }
.gogorender-specs button.is-active, .gogorender-option-row button.is-active { border-color: #6e9b70; background: #e1f2b8; color: #23442e; box-shadow: inset 0 0 0 1px #9fbd7b; }
.gogorender-cd-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gogorender-specs .gogorender-cd-spec-option { position: relative; display: grid; grid-template-rows: 84px auto; place-items: center; gap: 7px; min-height: 122px; overflow: hidden; padding: 9px 8px 11px; text-align: center; isolation: isolate; }
.gogorender-cd-spec-option::after { content: ""; position: absolute; inset: -45% auto -45% -28%; z-index: -1; width: 58%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 58%), transparent); opacity: 0; transform: translateX(-120%) rotate(8deg); transition: opacity .25s ease, transform .55s ease; }
.gogorender-cd-spec-option:hover::after, .gogorender-cd-spec-option:focus-visible::after { opacity: 1; transform: translateX(260%) rotate(8deg); }
.gogorender-cd-spec-option img, .gogorender-cd-spec-option canvas { display: block; width: 100%; height: 84px; object-fit: contain; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 20%)); transition: transform .4s cubic-bezier(.2,.75,.2,1), filter .3s ease; }
.gogorender-cd-spec-option strong { font-size: 12px; }
.gogorender-cd-spec-option:hover img, .gogorender-cd-spec-option:hover canvas, .gogorender-cd-spec-option:focus-visible img, .gogorender-cd-spec-option:focus-visible canvas { filter: drop-shadow(0 9px 9px rgb(23 36 31 / 27%)); transform: translateY(-2px) scale(1.035); }
.gogorender-config-section { margin-top: 24px; padding-top: 22px; border-top: 1px solid #c6d8c1; }
.gogorender-config-section h3 { margin: 0; color: var(--home-ink); font-size: 15px; }
.gogorender-config-section h3 + .gogorender-option-row { margin-top: 12px; }
.gogorender-config-section > p { margin: 7px 0 12px; color: #617566; font-size: 11px; line-height: 1.55; }
.gogorender-option-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gogorender-option-row + .gogorender-option-row { margin-top: 8px; }
.gogorender-option-row button { padding: 0 10px; text-align: center; font-size: 12px; }
.gogorender-option-row button small { display: block; margin-top: 3px; color: #78907e; font-size: 10px; font-weight: 500; }
.gogorender-option-row button.is-active small { color: #52745b; }
.gogorender-cd-hub-row button { display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 5px; min-height: 72px; padding: 7px 8px; }
.gogorender-cd-hub-row canvas, .gogorender-cd-hub-row img { display: block; width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 5px 5px rgb(23 36 31 / 18%)); transition: transform .35s ease; }
.gogorender-cd-hub-row button:hover canvas, .gogorender-cd-hub-row button:focus-visible canvas, .gogorender-cd-hub-row button:hover img, .gogorender-cd-hub-row button:focus-visible img { transform: rotate(8deg) scale(1.05); }
.gogorender-cd-hub-row button span { text-align: center; }
.gogorender-cassette-type-row { grid-template-columns: 1fr; }
.gogorender-cassette-print-section .gogorender-specs { margin-top: 12px; }
.gogorender-option-row .gogorender-cassette-visual-option, .gogorender-specs .gogorender-cassette-visual-option { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 112px; overflow: hidden; padding: 8px 14px 8px 8px; text-align: center; isolation: isolate; }
.gogorender-cassette-option-visual { position: relative; display: block; width: 128px; height: 94px; }
.gogorender-cassette-option-visual::after { content: ""; position: absolute; z-index: 0; right: 4px; bottom: 11px; width: 72px; height: 13px; border-radius: 50%; background: radial-gradient(ellipse, rgb(31 48 38 / 26%), rgb(31 48 38 / 0%) 72%); opacity: 0; transform: translateX(-8px) scale(.72); transition: opacity .35s ease, transform .48s cubic-bezier(.2,.75,.2,1); }
.gogorender-cassette-option-visual img { position: absolute; top: 50%; left: 50%; display: block; width: auto; max-width: none; object-fit: contain; pointer-events: none; backface-visibility: hidden; transform-origin: center; will-change: transform; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 18%)); transition: transform .48s cubic-bezier(.2,.75,.2,1), filter .3s ease; }
.gogorender-cassette-option-cover { z-index: 2; height: 78px; transform: translate(-50%, -50%) scale(.94); }
.gogorender-cassette-option-object { z-index: 1; height: 86px; transform: translate(-50%, -50%) scale(.78); }
.gogorender-cassette-visual-option[data-cassette-type] .gogorender-cassette-option-object { clip-path: inset(3.5% 7% 4% 4% round 2%); filter: none; }
.gogorender-cassette-visual-option:hover .gogorender-cassette-option-cover, .gogorender-cassette-visual-option:focus-visible .gogorender-cassette-option-cover, .gogorender-cassette-visual-option.is-active .gogorender-cassette-option-cover { transform: translate(-79%, -50%) scale(.72) rotate(-2deg); }
.gogorender-cassette-visual-option:hover .gogorender-cassette-option-object, .gogorender-cassette-visual-option:focus-visible .gogorender-cassette-option-object, .gogorender-cassette-visual-option.is-active .gogorender-cassette-option-object { transform: translate(-17%, -50%) scale(.72) rotate(2deg); }
.gogorender-cassette-visual-option[data-cassette-type]:hover .gogorender-cassette-option-cover, .gogorender-cassette-visual-option[data-cassette-type]:focus-visible .gogorender-cassette-option-cover, .gogorender-cassette-visual-option[data-cassette-type].is-active .gogorender-cassette-option-cover { transform: translate(-94%, -50%) scale(.72) rotate(-2deg); }
.gogorender-cassette-visual-option[data-cassette-type]:hover .gogorender-cassette-option-object, .gogorender-cassette-visual-option[data-cassette-type]:focus-visible .gogorender-cassette-option-object, .gogorender-cassette-visual-option[data-cassette-type].is-active .gogorender-cassette-option-object { transform: translate(8%, -50%) scale(.72) rotate(-90deg); }
.gogorender-cassette-visual-option[data-cassette-type]:hover .gogorender-cassette-option-visual::after, .gogorender-cassette-visual-option[data-cassette-type]:focus-visible .gogorender-cassette-option-visual::after, .gogorender-cassette-visual-option[data-cassette-type].is-active .gogorender-cassette-option-visual::after { opacity: 1; transform: translateX(0) scale(1); }
.gogorender-cassette-visual-option.is-print .gogorender-cassette-option-visual::after { display: none; }
.gogorender-cassette-visual-option.is-print .gogorender-cassette-option-object { height: 92px; transform: translate(-50%, -50%) scale(.9); }
.gogorender-cassette-visual-option.is-print:hover .gogorender-cassette-option-object, .gogorender-cassette-visual-option.is-print:focus-visible .gogorender-cassette-option-object, .gogorender-cassette-visual-option.is-print.is-active .gogorender-cassette-option-object { transform: translate(-50%, -50%) scale(.98); }
.gogorender-cassette-visual-option:hover .gogorender-cassette-option-visual img, .gogorender-cassette-visual-option:focus-visible .gogorender-cassette-option-visual img { filter: drop-shadow(0 9px 9px rgb(23 36 31 / 24%)); }
.gogorender-cassette-visual-option > strong { font-size: 13px; text-align: center; }
.gogorender-vinyl-type-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gogorender-option-row .gogorender-vinyl-type-option { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; min-height: 96px; overflow: hidden; padding: 9px 18px 9px 12px; text-align: left; isolation: isolate; }
.gogorender-vinyl-type-option::after { content: ""; position: absolute; inset: -45% auto -45% -28%; z-index: -1; width: 58%; background: linear-gradient(100deg, transparent, rgb(255 255 255 / 58%), transparent); opacity: 0; transform: translateX(-120%) rotate(8deg); transition: opacity .25s ease, transform .55s ease; }
.gogorender-vinyl-type-option:hover::after, .gogorender-vinyl-type-option:focus-visible::after { opacity: 1; transform: translateX(260%) rotate(8deg); }
.gogorender-option-row .gogorender-vinyl-type-option:hover, .gogorender-option-row .gogorender-vinyl-type-option:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 18px rgb(49 95 59 / 11%); }
.gogorender-vinyl-type-option > strong { position: relative; z-index: 2; font-size: 13px; text-align: center; }
.gogorender-vinyl-type-visual { position: relative; display: block; width: 68px; aspect-ratio: 1; overflow: hidden; border-radius: 50%; filter: drop-shadow(0 7px 7px rgb(23 36 31 / 22%)); transform: rotate(-7deg); transition: transform .45s cubic-bezier(.2,.75,.2,1), filter .35s ease; }
.gogorender-vinyl-type-visual > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.gogorender-vinyl-type-option:hover .gogorender-vinyl-type-visual, .gogorender-vinyl-type-option:focus-visible .gogorender-vinyl-type-visual { filter: drop-shadow(0 9px 9px rgb(23 36 31 / 28%)); transform: translateY(-2px) rotate(8deg) scale(1.06); }
.gogorender-vinyl-type-option.is-active .gogorender-vinyl-type-visual { animation: gogorender-vinyl-turn 7s linear infinite; }
.gogorender-vinyl-clear-backdrop { border: 1px solid rgb(70 91 78 / 24%); border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 58%) 0 18%, transparent 19%), repeating-conic-gradient(rgb(221 232 222 / 42%) 0 12deg, rgb(255 255 255 / 72%) 12deg 24deg); }
.gogorender-vinyl-type-visual .gogorender-vinyl-default-label { inset: 32.4%; z-index: 4; width: 35.2%; height: 35.2%; border: 1px solid rgb(23 36 31 / 25%); border-radius: 50%; object-fit: cover; box-shadow: 0 1px 3px rgb(23 36 31 / 22%); }
.gogorender-vinyl-type-visual .gogorender-vinyl-default-label-hole { inset: 47.5%; z-index: 5; width: 5%; height: 5%; border: 1px solid rgb(23 36 31 / 28%); border-radius: 50%; background: #f2f4ee; box-shadow: 0 0 0 1px rgb(255 255 255 / 40%); }
.gogorender-vinyl-type-visual.is-picture { background: #f2f4ee; }
.gogorender-vinyl-type-visual.is-picture .gogorender-vinyl-picture-art { inset: 3%; width: 94%; height: 94%; border-radius: 50%; object-fit: cover; }
.gogorender-vinyl-type-visual.is-picture .gogorender-vinyl-picture-template { mix-blend-mode: multiply; opacity: .66; }
@keyframes gogorender-vinyl-turn { to { transform: rotate(353deg); } }
.gogorender-color-picker { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 9px 11px 9px 14px; border: 1px solid #b7cbb6; border-radius: 12px; background: #fffefa; color: #23442e; font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, background-color .18s ease; }
.gogorender-color-picker:hover, .gogorender-color-picker:focus-visible { border-color: #6e9b70; background: #f7fbe8; outline: none; }
.gogorender-color-picker span { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.gogorender-color-picker strong { font-size: 12px; }
.gogorender-color-picker small { color: #78907e; font: 600 10px/1 Outfit, sans-serif; letter-spacing: .08em; }
.gogorender-color-picker-swatch { display: block; width: 48px; height: 36px; border: 4px solid #fff; border-radius: 999px; background: var(--picker-color); box-shadow: 0 0 0 1px #a9bea9, inset 0 0 0 1px rgb(23 36 31 / 10%); }
.gogorender-color-picker-cassette { position: relative; isolation: isolate; display: block; width: 88px; aspect-ratio: 101 / 63.8; overflow: hidden; border-radius: 8px; background: #eef2ea; filter: drop-shadow(0 6px 7px rgb(23 36 31 / 18%)); transition: transform .28s ease, filter .28s ease; }
.gogorender-color-picker-cassette img, .gogorender-color-picker-cassette b { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.gogorender-color-picker-cassette img { z-index: 1; }
.gogorender-color-picker-cassette b { z-index: 2; background: var(--picker-color); mix-blend-mode: color; opacity: .72; }
.gogorender-color-picker:hover .gogorender-color-picker-cassette, .gogorender-color-picker:focus-visible .gogorender-color-picker-cassette { filter: drop-shadow(0 8px 9px rgb(23 36 31 / 24%)); transform: translateY(-2px) rotate(-2deg) scale(1.03); }
.gogorender-color-picker input[type="color"] { width: 48px; height: 36px; border: 1px solid #a9bea9; border-radius: 999px; padding: 3px; background: #fff; cursor: pointer; }
.gogorender-color-picker input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.gogorender-color-picker input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 999px; }
.gogorender-inputs { display: grid; gap: 9px; margin-top: 13px; }
.gogorender-file-picker { position: relative; display: grid; gap: 4px; min-width: 0; padding: 12px 13px; border: 1px dashed #7ca37d; border-radius: 12px; background: #f4faed; color: #315f3b; cursor: pointer; transition: background-color .18s ease, border-color .18s ease; }
.gogorender-file-picker:hover, .gogorender-file-picker:focus-within { border-color: #315f3b; background: #eaf7d7; }
.gogorender-file-picker.is-pending { border-color: #c79839; background: #fff4d4; }
.gogorender-file-picker.is-confirmed { border-color: #4d8b5b; background: #e2f4bc; box-shadow: inset 0 0 0 1px rgb(77 139 91 / 18%); }
.gogorender-file-picker.is-confirmed em { color: #315f3b; }
.gogorender-file-picker input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.gogorender-file-picker span { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.gogorender-file-picker small, .gogorender-file-picker em { color: #628068; font: 500 10px/1.4 Outfit, "Noto Sans SC", sans-serif; font-style: normal; }
.gogorender-file-picker em { color: #8a9b8e; overflow-wrap: anywhere; }
.gogorender-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.gogorender-preview-head h2 { margin: 0; color: var(--home-ink); font: 700 24px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.gogorender-reset { flex: 0 0 auto; border: 1px solid #b7cbb6; border-radius: 999px; padding: 8px 12px; background: #fffefa; color: #52745b; font: 700 11px "Noto Sans SC", sans-serif; cursor: pointer; }
.gogorender-reset:hover { border-color: #6e9b70; background: #eaf7d7; }
.gogorender-views { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 17px; }
.gogorender-views button { min-height: 37px; border: 1px solid #b7cbb6; border-radius: 999px; padding: 0 13px; background: #fffefa; color: #617566; font: 700 11px "Noto Sans SC", sans-serif; cursor: pointer; }
.gogorender-views button.is-active { border-color: #6e9b70; background: #e1f2b8; color: #23442e; box-shadow: inset 0 0 0 1px #9fbd7b; }
.gogorender-canvas-wrap { position: relative; display: grid; place-items: center; min-height: 430px; margin-top: 17px; overflow: hidden; border: 1px solid #cddbc9; border-radius: 17px; background: #eef3ed; }
.gogorender-canvas-wrap canvas { display: block; width: 100%; height: auto; }
.gogorender-note { margin: 13px 0 0; color: #617566; font-size: 11px; line-height: 1.6; }
.gogorender-actions { display: flex; flex-direction: column; justify-content: center; gap: 16px; margin-top: 24px; }
.gogorender-actions .template-card-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; cursor: pointer; font: 600 13px/1 "Noto Sans SC", sans-serif; text-align: center; }
.gogorender-actions .template-card-link:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.gogorender-empty { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; padding: 20px; color: #78907e; font: 600 13px Outfit, "Noto Sans SC", sans-serif; text-align: center; pointer-events: none; }
.gogorender-empty[hidden] { display: none; }
.gogorender-empty p { margin: 0; }
.gogorender-start { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; border: 0; border-radius: 999px; background: #17241f; color: #fff; font: 600 13px/1 "Noto Sans SC", sans-serif; cursor: pointer; box-shadow: none; transition: transform .2s ease, opacity .2s ease, background-color .18s ease; }
.gogorender-start span { font-size: 18px; line-height: 1; }
.gogorender-start:hover:not(:disabled) { transform: translateY(-3px); }
.gogorender-start:disabled { background: #bfc8bd; border-color: #bfc8bd; color: #f7faf4; cursor: not-allowed; box-shadow: none; }
.gogorender-start.is-compact { width: 100%; height: 48px; border-radius: 999px; box-shadow: none; font-size: 13px; }
.gogorender-start.is-compact span { display: none; }
.gogorender-actions .gogorender-start { flex: 0 0 auto; }
#gogorender-crop-dialog { width: min(560px, calc(100vw - 28px)); max-width: 560px; border: 0; border-radius: 24px; padding: 0; color: var(--home-ink); box-shadow: 0 24px 90px rgb(23 36 31 / 28%); }
#gogorender-crop-dialog::backdrop { background: rgb(23 36 31 / 44%); backdrop-filter: blur(8px); }
.gogorender-crop-dialog { position: relative; padding: 28px; background: #fffefa; }
.gogorender-crop-dialog h2 { margin: 0; font: 700 25px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.gogorender-crop-dialog > p:not(.template-card-kicker) { margin: 11px 0 0; color: #617566; font-size: 12px; line-height: 1.65; }
.gogorender-dialog-close { position: absolute; top: 13px; right: 16px; border: 0; background: none; color: var(--home-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.gogorender-crop-stage { position: relative; width: min(100%, 450px); margin: 17px auto 0; overflow: hidden; touch-action: none; background: repeating-conic-gradient(#e9ebe6 0 25%, #f8f8f5 0 50%) 50% / 14px 14px; outline: 2px solid #06a9a6; }
.gogorender-crop-stage img { display: block; width: 100%; height: 100%; object-fit: fill; user-select: none; pointer-events: none; }
.gogorender-crop-selection { position: absolute; box-shadow: 0 0 0 9999px rgb(17 28 23 / 48%); border: 2px solid #06a9a6; cursor: move; touch-action: none; }
.gogorender-crop-selection span { position: absolute; width: 14px; height: 14px; border: 2px solid #fff; border-radius: 50%; background: #06a9a6; box-shadow: 0 1px 4px #0006; }
.gogorender-crop-selection span:nth-child(1) { left: -8px; top: -8px; cursor: nwse-resize; }.gogorender-crop-selection span:nth-child(2) { right: -8px; top: -8px; cursor: nesw-resize; }.gogorender-crop-selection span:nth-child(3) { left: -8px; bottom: -8px; cursor: nesw-resize; }.gogorender-crop-selection span:nth-child(4) { right: -8px; bottom: -8px; cursor: nwse-resize; }
.gogorender-crop-hint { font-size: 11px !important; }
.gogorender-crop-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 18px; }
.gogorender-secondary, .gogorender-primary { min-height: 43px; border-radius: 999px; padding: 0 17px; font: 700 12px "Noto Sans SC", sans-serif; cursor: pointer; }
.gogorender-secondary { border: 1px solid #b7cbb6; background: #fffefa; color: #52745b; }.gogorender-primary { border: 0; background: #17241f; color: #fff; }
#gogorender-vinyl-color-dialog { width: min(620px, calc(100vw - 28px)); max-width: 620px; max-height: calc(100svh - 28px); overflow: auto; border: 0; border-radius: 26px; padding: 0; color: var(--home-ink); box-shadow: 0 26px 90px rgb(23 36 31 / 30%); }
#gogorender-vinyl-color-dialog::backdrop { background: rgb(23 36 31 / 46%); backdrop-filter: blur(9px); }
.gogorender-vinyl-color-dialog { position: relative; padding: 30px; background: #fffefa; text-align: center; }
.gogorender-vinyl-color-dialog h2 { margin: 0; font: 700 28px/1.2 Outfit, "Noto Sans SC", sans-serif; }
.gogorender-vinyl-color-dialog > p:not(.template-card-kicker, .gogorender-vinyl-color-name) { max-width: 450px; margin: 10px auto 0; color: #617566; font-size: 12px; line-height: 1.65; }
.gogorender-vinyl-color-preview { position: relative; isolation: isolate; width: 132px; aspect-ratio: 1; margin: 18px auto 10px; overflow: hidden; border-radius: 50%; background: #f0f2ea; box-shadow: 0 13px 24px rgb(35 66 45 / 22%); }
.gogorender-vinyl-color-preview > * { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
.gogorender-cassette-color-preview { width: 168px; aspect-ratio: 101 / 63.8; border-radius: 15px; background: #eef2ea; }
.gogorender-cassette-color-preview img { z-index: 1; }
.gogorender-cassette-color-preview .gogorender-cassette-color-tint { z-index: 2; background: var(--vinyl-color); mix-blend-mode: color; opacity: .72; }
.gogorender-vinyl-material-base { background: var(--vinyl-color); -webkit-mask: var(--vinyl-mask) center / contain no-repeat; mask: var(--vinyl-mask) center / contain no-repeat; }
.gogorender-vinyl-material-burn { mix-blend-mode: multiply; }
.gogorender-vinyl-material-screen { mix-blend-mode: screen; }
.gogorender-vinyl-color-current { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 17px; }
.gogorender-vinyl-color-name { margin: 0; color: #617566; font-size: 12px; }
.gogorender-vinyl-color-name strong { color: #23442e; }
.gogorender-vinyl-color-current button { min-height: 32px; border: 1px solid #b7cbb6; border-radius: 999px; padding: 0 13px; background: #f4faed; color: #52745b; font: 700 11px "Noto Sans SC", sans-serif; cursor: pointer; }
.gogorender-vinyl-color-current button:hover, .gogorender-vinyl-color-current button:focus-visible { border-color: #6e9b70; background: #e1f2b8; outline: none; }
.gogorender-vinyl-color-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.gogorender-vinyl-color-option { display: grid; place-items: center; gap: 7px; min-height: 84px; border: 1px solid #c3d2c0; border-radius: 15px; background: #f7faef; color: #526c59; cursor: pointer; transition: border-color .18s ease, background-color .18s ease, transform .18s ease; }
.gogorender-vinyl-color-option:hover, .gogorender-vinyl-color-option:focus-visible { border-color: #6e9b70; transform: translateY(-2px); outline: none; }
.gogorender-vinyl-color-option.is-active { border-color: #527d5a; background: #e1f2b8; box-shadow: inset 0 0 0 1px #9fbd7b; }
.gogorender-vinyl-color-option span { display: block; width: 38px; height: 38px; border: 3px solid #fff; border-radius: 50%; background: var(--vinyl-color); box-shadow: 0 0 0 1px rgb(45 72 54 / 27%), inset 0 0 0 1px rgb(23 36 31 / 9%); }
.gogorender-vinyl-color-option strong { font: 700 11px "Noto Sans SC", sans-serif; }
.gogorender-vinyl-custom-option span { background: conic-gradient(#ef5b5b, #e4ce3f, #65c979, #22c9c2, #5e83d7, #a66fd0, #d35c96, #ef5b5b); }
.gogorender-vinyl-custom-controls { margin-top: 12px; padding: 14px 16px; border: 1px solid #c7d8c3; border-radius: 16px; background: #f4faed; text-align: left; }
.gogorender-vinyl-custom-controls[hidden] { display: none; }
.gogorender-vinyl-custom-controls > p { margin: 0 0 10px; color: #617566; font-size: 11px; text-align: center; }
.gogorender-vinyl-custom-controls label { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 31px; color: #315f3b; font-size: 11px; font-weight: 700; }
.gogorender-vinyl-custom-controls input[type="range"] { width: 100%; accent-color: #527d5a; cursor: pointer; }
#gogorender-vinyl-custom-hue { accent-color: #08cdbb; }
.gogorender-vinyl-color-dialog .gogorender-crop-actions { justify-content: center; }
.gogorender-loading { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 40%, rgb(225 249 178 / 96%), rgb(244 245 239 / 98%) 64%); }
.gogorender-loading[hidden] { display: none; }
.gogorender-loading-card { width: min(560px, 100%); padding: 32px; border: 1px solid #d2dfce; border-radius: 26px; background: #fffefa; box-shadow: 0 24px 80px rgb(23 36 31 / 24%); text-align: center; }
.gogorender-loading-card h2 { margin: 0; font: 700 clamp(25px, 4vw, 38px)/1.2 Outfit, "Noto Sans SC", sans-serif; }.gogorender-loading-card p:not(.template-card-kicker) { margin: 10px 0 0; color: #617566; font-size: 13px; line-height: 1.65; }
.gogorender-spinner { width: 48px; height: 48px; margin: 0 auto 17px; border: 3px solid #dce8d5; border-top-color: #52745b; border-radius: 50%; animation: gogorender-spin .8s linear infinite; }.gogorender-spinner span { display: block; width: 7px; height: 7px; margin: 5px auto; border-radius: 50%; background: #c9ff46; }
.gogorender-loading-track { height: 12px; margin-top: 22px; overflow: hidden; border-radius: 999px; background: #e8eee4; }.gogorender-loading-track span { display: block; width: 48%; height: 100%; border-radius: inherit; background: #9bc47d; animation: gogorender-progress 1.15s ease-in-out infinite alternate; }
@keyframes gogorender-spin { to { transform: rotate(360deg); } } @keyframes gogorender-progress { from { transform: translateX(-105%); } to { transform: translateX(215%); } }
@media (prefers-reduced-motion: reduce) { .gogorender-start, .gogorender-spinner, .gogorender-loading-track span { animation: none; transition: none; } }
.gogorender-main > .site-credits { margin-top: 30px; }
@media (max-width: 900px) { .gogorender-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gogorender-config-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .gogorender-main { width: calc(100% - 28px); padding: 42px 0 40px; } .gogorender-card-grid { grid-template-columns: 1fr; gap: 14px; } .gogorender-card-preview { min-height: 180px; } .gogorender-card-body { padding: 20px 20px 22px; } .gogorender-card-body p:not(.template-card-kicker) { min-height: 0; font-size: 12px; } .gogorender-panel { padding: 20px; } .gogorender-preview-head h2 { font-size: 20px; } .gogorender-canvas-wrap { min-height: 245px; } .gogorender-views button { flex: 1 1 auto; } .gogorender-vinyl-color-dialog { padding: 25px 18px; } .gogorender-vinyl-color-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .carrier-visual { height: 160px; } .carrier-visual img { height: clamp(112px, calc(136px * var(--physical-ratio)), 194px); } .carrier-visual.is-hovering .carrier-visual-cover { transform: translate(-50%, -50%) scale(.94); } .carrier-visual.is-hovering .carrier-visual-object { opacity: 0; transform: translate(-50%, -50%) scale(.82); } }
@media (max-width: 420px) { .gogorender-vinyl-type-row, .gogorender-cd-specs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .gogorender-card, .gogorender-specs button, .gogorender-option-row button, .gogorender-file-picker, .carrier-visual img, .gogorender-vinyl-type-visual, .gogorender-vinyl-type-option::after, .gogorender-cassette-option-visual img { animation: none; transition: none; } }

/* Match the vinyl size selector to the upload page: use the real vinyl asset,
   keep the 12-inch/7-inch previews visibly proportional, and retain the
   disabled-card treatment for the not-yet-open EP size. */
.gogorender-specs .gogorender-vinyl-size-option {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 96px;
  padding: 9px 14px 9px 10px;
  text-align: left;
}
.gogorender-vinyl-size-option img {
  display: block;
  width: 72px;
  height: 72px;
  justify-self: center;
  border-radius: 50%;
  object-fit: contain;
  filter: drop-shadow(0 7px 7px rgb(23 36 31 / 20%));
  transition: transform .4s cubic-bezier(.2,.75,.2,1), filter .3s ease;
}
.gogorender-vinyl-size-option img[data-vinyl-size="10"] { width: 64px; height: 64px; }
.gogorender-vinyl-size-option img[data-vinyl-size="7"] { width: 54px; height: 54px; }
.gogorender-vinyl-size-option > span { display: grid; gap: 4px; min-width: 0; text-align: left; }
.gogorender-vinyl-size-option > span strong { font-size: 13px; }
.gogorender-vinyl-size-option:hover img,
.gogorender-vinyl-size-option:focus-visible img {
  filter: drop-shadow(0 9px 9px rgb(23 36 31 / 27%));
  transform: translateY(-2px) scale(1.035);
}
.gogorender-specs .gogorender-vinyl-size-option.is-disabled,
.gogorender-specs .gogorender-vinyl-size-option.is-disabled:hover {
  border-style: dashed;
  border-color: #c8d0c6;
  background: #edf0eb;
  color: #9da69f;
  cursor: not-allowed;
  opacity: .78;
  transform: none;
}
.gogorender-vinyl-size-option.is-disabled img { filter: grayscale(.35); }
@media (prefers-reduced-motion: reduce) {
  .gogorender-vinyl-size-option,
  .gogorender-vinyl-size-option img { transition: none; }
}