:root{--paper:#f5f3ed;--card:#fffefa;--ink:#24352f;--muted:#7b8178;--line:#dddfd5;--sage:#456d5f;--lime:#d6e6ac;--serif:Georgia,'Times New Roman',serif;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit}button{cursor:pointer}button,a,input,textarea,label.upload-button{touch-action:manipulation}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,label:focus-within{outline:3px solid #92ad63;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}.hidden{display:none!important}.topbar{height:100px;margin:0 4.5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:20px}.brand{color:var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;font-size:15px;letter-spacing:3px;font-weight:800;line-height:1.3}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:2.5px;margin-top:4px}.brand-mark{font-size:39px;letter-spacing:-5px;line-height:1;display:flex}.brand-mark span{font-size:28px;letter-spacing:0;margin-top:-5px}.topbar nav{display:flex;gap:5px;padding:5px;border-radius:100px;background:#e8eae2}.flow-tab{border:0;background:transparent;padding:13px 20px;font-size:12px;font-weight:600;border-radius:100px;transition:background .2s}.flow-tab span{font-size:10px;margin-right:8px;opacity:.5}.flow-tab.active{background:var(--card);box-shadow:0 2px 7px #26382e0b}.demo-pill{font-size:10px;letter-spacing:.5px;border:1px solid var(--line);border-radius:100px;padding:9px 12px;display:flex;gap:7px;align-items:center;white-space:nowrap}.demo-pill i,.status-dot{display:inline-block;width:6px;height:6px;background:#638b52;border-radius:50%}main{max-width:1440px;margin:auto;padding:0 4.5%}.intro{padding:37px 0 31px;display:flex;justify-content:space-between;align-items:flex-end;gap:35px}.eyebrow{font-size:9px;font-weight:600;letter-spacing:2px;margin:0 0 13px}.intro h1{font-family:var(--serif);font-size:clamp(32px,3.4vw,51px);font-weight:400;letter-spacing:-1.6px;line-height:1.02;margin:0}.intro h1 em{font-weight:400;color:var(--sage)}.intro>p{font-size:12px;color:#727c72;line-height:1.7;margin:0 10px 4px 0;max-width:320px}.studio{display:grid;grid-template-columns:minmax(370px,.94fr) minmax(430px,1.3fr);border:1px solid var(--line);border-radius:20px;background:var(--card);overflow:hidden;box-shadow:0 20px 45px #2c403808}.editor{padding:25px 28px 26px;border-right:1px solid var(--line)}.step-heading{display:flex;align-items:center;gap:9px;margin:0 0 14px}.step-heading:not(:first-child){margin-top:23px}.step-heading>span{font-size:9px;width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;color:var(--muted)}.step-heading h2{font-size:13px;letter-spacing:-.2px;font-weight:650;margin:0}.step-heading small{margin-left:auto;font-size:8px;letter-spacing:1.5px;color:#959b91}.pet-source{display:flex;align-items:center;gap:14px;background:#f2f2eb;padding:12px;border-radius:12px}.pet-source>img{width:73px;height:77px;object-fit:cover;border-radius:8px}.pet-source strong{font-size:12px}.pet-source p{font-size:10px;line-height:1.5;color:#7c8379;margin:5px 0}.asset-note{font-size:8px;color:#84907e}.upload-button{margin-left:auto;border:1px dashed #bdc4b5;width:61px;min-width:61px;height:63px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;font-size:20px;cursor:pointer}.upload-button span{font-size:8px;font-weight:600}.upload-button:hover{background:#e5eacb}.style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.style-card{position:relative;padding:5px 5px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;text-align:left;min-width:0;transition:all .15s}.style-card:hover{transform:translateY(-2px)}.style-card.active{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage)}.style-image{height:110px;background:#f0efe7;border-radius:6px;margin-bottom:8px;overflow:hidden}.style-image img{width:100%;height:100%;object-fit:cover}.style-card strong{font-size:10px;display:block;margin:0 5px 4px}.style-card>span{font-size:8px;color:#8a9086;display:block;margin:0 5px}.style-card i{position:absolute;right:9px;top:9px;border-radius:50%;width:17px;height:17px;background:var(--sage);color:white;font-size:10px;font-style:normal;display:none;place-items:center}.style-card.active i{display:grid}.micro-note{font-size:9px;color:#919589;line-height:1.55;margin:10px 0 0}.micro-note>span{font-size:12px;color:#6b8660}.micro-note code{font-size:9px;background:#eeefe8;padding:1px 3px;border-radius:3px}.field-label{font-size:9px;font-weight:600;color:#74806f;margin:12px 0 7px;display:flex;justify-content:space-between}.field-label span{font-weight:400;color:#a4aa9d}.text-input,textarea{width:100%;border:1px solid #dbdfd4;border-radius:7px;padding:12px 13px;background:#fffefb;font-size:13px;color:#344535;transition:border .2s}.text-input:focus,textarea:focus{border-color:#73936c;outline:2px solid #bacba233;outline-offset:1px}.text-input.smaller{font-size:11px;padding:11px 13px}.caption-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}.caption-chips button{border:0;border-radius:30px;background:#f1f2e9;padding:6px 8px;color:#7d8876;font-size:8px}.caption-chips button:hover{background:#e1e8ce;color:var(--ink)}.palette-row{display:flex;align-items:center;justify-content:space-between;margin:19px 0 0;gap:15px}.palette-row>span{font-size:10px;color:#798474}.swatches{display:flex;gap:11px;align-items:center}.swatch{border:3px solid var(--card);background:var(--swatch);width:22px;height:22px;border-radius:50%;outline:1px solid transparent;padding:0}.swatch.active{outline-color:var(--swatch)}.preview-panel{position:relative;background:#eeefe6;display:flex;flex-direction:column;padding:23px 28px 21px;min-width:0}.preview-heading{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.preview-heading>span{font-size:10px}.preview-heading strong{font-size:10px;font-weight:500;margin-left:7px}.text-button{border:0;padding:0;background:none;font-size:9px;color:#667561;text-decoration:none;cursor:pointer}.text-button:hover{text-decoration:underline}#restore-pet,#remove-logo{margin-top:8px}.mug-stage{position:relative;height:400px;min-height:280px;isolation:isolate}.stage-word{position:absolute;top:50px;left:6px;z-index:-1;font-family:var(--serif);font-size:clamp(60px,8vw,115px);line-height:.8;color:#dee2d4;letter-spacing:-5px;user-select:none}.stage-word em{font-weight:400}#mug-view{width:100%;height:100%;cursor:grab;position:relative;z-index:1;min-height:300px}#mug-view:active{cursor:grabbing}#mug-view canvas{display:block;max-width:100%}.stage-label{position:absolute;right:0;top:20px;border-left:1px solid #c7cebd;padding:5px 0 5px 12px;z-index:2;pointer-events:none}.stage-label span{font-size:7px;letter-spacing:1.5px;display:block;color:#8b9681}.stage-label strong{font-family:var(--serif);font-size:14px;font-weight:400;display:block;margin-top:6px;max-width:160px;overflow-wrap:anywhere}.rotation-tip{position:absolute;bottom:10px;left:0;right:0;z-index:2;text-align:center;font-size:9px;color:#98a08f;pointer-events:none}.rotation-tip>span{font-size:17px;vertical-align:-1px;margin-right:3px}.view-controls{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #d9dfcf;padding-bottom:17px}.view-controls>div{display:flex;align-items:center;gap:5px}.view-controls button{border:1px solid #d6ddcc;background:#f7f8f1;height:27px;min-width:28px;border-radius:5px;font-size:12px}.view-controls #reset-view{font-size:9px;padding:0 10px}.view-controls>span{font-size:8px;color:#95a087;max-width:170px;text-align:right}.design-summary{display:flex;align-items:center;gap:11px;margin:20px 0 24px}.summary-icon{width:33px;height:33px;display:grid;place-items:center;font-size:23px;background:#e4e9d7;border-radius:50%;color:#63834f}.design-summary strong{font-size:11px;font-weight:500}.design-summary p{font-size:9px;color:#849075;margin:6px 0 0}.export-row{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #d9dfcf;padding-top:19px}.export-row .eyebrow{font-size:7px;letter-spacing:1.4px;margin:0 0 6px;color:#7a8a6c}.export-row p{font-family:var(--serif);font-size:15px;margin:0}.primary-button{border:0;background:var(--ink);color:#f8f8ef;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 19px;border-radius:8px;font-size:11px;white-space:nowrap;box-shadow:0 5px 12px #24352f14}.primary-button:hover{background:#3b5949}.primary-button>span{font-size:17px}.export-note{font-size:8px;color:#96a08c;line-height:1.5;max-width:430px;margin:12px 0 0}footer{display:flex;justify-content:space-between;font-size:8px;color:#9ba193;gap:20px;padding:22px 0 28px;line-height:1.5}.footer-divider{margin:0 10px}.team-brand{display:flex;align-items:center;gap:12px;margin-bottom:12px}.team-brand>div{flex:1;min-width:0}.team-brand .field-label{margin-top:0}.team-brand .text-input{padding:11px;font-size:11px;letter-spacing:1px}.team-symbol{width:47px;height:52px;display:grid;place-items:center;background:#e6eacd;border-radius:9px;color:var(--sage);font-size:40px;flex-shrink:0}.team-symbol img{width:42px;height:42px;object-fit:contain}.team-brand .upload-button{height:56px}.list-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.list-toolbar .field-label{margin:0}textarea{resize:vertical;min-height:148px;max-height:300px;line-height:1.6;font-size:12px;padding:11px 14px}.list-status{display:flex;justify-content:space-between;font-size:9px;color:#71905b;margin-top:9px;align-items:center}.list-status.error>span{color:#a45842}.team-templates{display:flex;gap:9px}.team-templates>button{width:50%;display:grid;grid-template-columns:40px 1fr;border:1px solid var(--line);border-radius:9px;padding:12px 10px;background:none;text-align:left;gap:4px 8px;align-items:center}.team-templates>button.active{border-color:var(--sage);background:#f0f3e7}.team-templates>button>span{grid-row:1/3;font-size:37px;color:var(--sage);line-height:1}.team-templates strong{font-size:10px;font-weight:500}.team-templates small{font-size:8px;color:#8a9581}.team-gallery{margin:17px 0 20px}.gallery-heading{display:flex;justify-content:space-between;margin-bottom:10px;align-items:center}.gallery-heading strong{font-size:10px;font-weight:500}.gallery-heading>span{font-size:8px;color:#89967c}.person-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.person-card{border:1px solid #d8dfca;border-radius:7px;overflow:hidden;background:#f5f6ed;padding:0;min-width:0}.person-card.active{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage)}.person-card canvas{width:100%;height:58px;display:block;object-fit:contain}.person-card span{display:block;font-size:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:5px 4px 7px;text-align:center}.person-pagination{display:flex;align-items:center;justify-content:center;gap:15px;margin-top:10px;font-size:9px;color:#829374}.person-pagination button{border:1px solid #d0d9c3;border-radius:3px;background:none;font-size:12px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;pointer-events:none;z-index:20;background:#24352ff2;color:white;padding:14px 22px;border-radius:8px;font-size:12px;transition:.2s;max-width:90vw;text-align:center;box-shadow:0 8px 25px #0002}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{padding:27px;border:1px solid var(--line);border-radius:16px;max-width:880px;width:90vw;background:var(--card);color:var(--ink);box-shadow:0 25px 80px #0002}dialog::backdrop{background:#1d2c25a3;backdrop-filter:blur(6px)}.dialog-header{display:flex;justify-content:space-between;align-items:center}.dialog-header h2{font-family:var(--serif);font-weight:400;font-size:28px;margin:0 0 22px}.dialog-header .eyebrow{font-size:8px}.dialog-header>button{width:32px;height:32px;border:0;background:#edf0e4;border-radius:50%;font-size:20px;align-self:flex-start}dialog>img{width:100%;border:1px solid var(--line);border-radius:8px;display:block}dialog>p{font-size:11px;line-height:1.6;color:#7c8973}dialog>.primary-button{margin-left:auto;font-size:10px;padding:12px 18px}.no-names{grid-column:1/-1;font-size:12px;padding:20px;color:#78896d;text-align:center}
@media(min-width:1500px){.topbar{max-width:1310px;margin:auto}.mug-stage{height:420px}.style-image{height:130px}.editor{padding:29px 32px}.step-heading:not(:first-child){margin-top:25px}}
@media(max-width:1050px){.topbar{margin:0 3%;height:85px}.topbar nav{padding:4px}.flow-tab{padding:11px 12px;font-size:10px}.demo-pill{font-size:8px;padding:8px}main{padding:0 3%}.studio{grid-template-columns:minmax(330px,1fr) minmax(350px,1.12fr)}.editor{padding:22px 19px}.preview-panel{padding:22px 19px}.style-image{height:93px}.stage-word{font-size:82px}.mug-stage{height:380px}.export-row{gap:8px}.primary-button{padding:14px;gap:13px;font-size:10px}.export-row p{font-size:13px}.intro{padding:28px 0}.intro>p{font-size:11px}.design-summary strong{font-size:10px}.design-summary p{font-size:8px}}
@media(max-width:760px){.topbar{height:auto;min-height:75px;flex-wrap:wrap;padding:15px 0 12px;gap:15px}.brand{font-size:12px}.brand-mark{font-size:32px}.brand-mark span{font-size:22px}.brand small{font-size:6px}.topbar nav{order:3;width:100%;justify-content:stretch}.flow-tab{flex:1;font-size:11px;padding:12px 5px}.flow-tab span{margin-right:4px}.demo-pill{margin-left:auto}.intro{padding:25px 0 24px;align-items:flex-start}.intro h1{font-size:34px;letter-spacing:-1.3px}.intro>p{display:none}.eyebrow{font-size:8px}.studio{display:flex;flex-direction:column;border-radius:14px}.editor{padding:22px 20px 25px;border-right:0;border-bottom:1px solid var(--line)}.preview-panel{padding:20px}.style-image{height:clamp(90px,25vw,155px)}.style-card strong{font-size:11px}.style-card>span{font-size:9px}.step-heading h2{font-size:14px}.step-heading small{font-size:8px}.pet-source>img{width:77px;height:80px}.pet-source strong{font-size:13px}.pet-source p{font-size:11px}.asset-note{font-size:8px}.field-label{font-size:10px}.text-input{font-size:14px;padding:14px}.text-input.smaller{font-size:12px;padding:13px}.caption-chips button{font-size:9px;padding:7px 9px}.micro-note{font-size:10px}.palette-row>span{font-size:11px}.swatch{width:27px;height:27px}.mug-stage{height:390px}.stage-word{font-size:95px}.view-controls>span{font-size:8px}.view-controls button{height:32px;min-width:32px}.design-summary strong{font-size:11px}.design-summary p{font-size:10px;line-height:1.5}.primary-button{font-size:11px}.export-row p{font-size:14px}.export-note{font-size:9px}.person-grid{grid-template-columns:repeat(3,1fr);gap:8px}.person-card canvas{height:72px}.person-card span{font-size:10px}.team-gallery{margin-bottom:20px}.gallery-heading strong{font-size:11px}footer{flex-direction:column;gap:6px;font-size:8px}.stage-label{top:17px}.topbar .flow-tab.active{box-shadow:0 2px 8px #26382e12}dialog{padding:20px}dialog>.primary-button{width:100%;justify-content:center}#renderer-note{max-width:140px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}.style-card:hover{transform:none}}
/* Ceramic material controls, shared by both gift flows. */
.ceramic-controls{border-bottom:1px solid #d9dfcf;padding:17px 0 13px}.ceramic-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:11px}.ceramic-heading strong{font-size:11px;font-weight:600}.ceramic-heading>span{font-size:9px;color:#68785c}.ceramic-parts{display:flex;gap:6px;margin-bottom:11px}.ceramic-parts button{display:flex;align-items:center;justify-content:center;gap:7px;flex:1;border:1px solid #d2d9c7;border-radius:6px;background:#f7f8f1;font-size:10px;min-height:32px;padding:5px 9px}.ceramic-parts button.active{border-color:var(--sage);background:#e4ebd8;box-shadow:0 0 0 1px var(--sage)}.ceramic-parts i{width:13px;height:13px;border-radius:50%;border:1px solid #24352f25}.ceramic-swatches{display:flex;gap:11px;flex-wrap:wrap;padding:3px 2px}.ceramic-swatch{position:relative;background:var(--ceramic);border:3px solid #eeefe6;outline:1px solid #c6cebb;width:28px;height:28px;border-radius:50%;padding:0}.ceramic-swatch[aria-pressed=true]{outline:2px solid var(--sage);box-shadow:0 0 0 3px #eeefe6}.ceramic-swatch[aria-pressed=true]::after{content:'';position:absolute;bottom:-7px;left:8px;width:6px;height:3px;border-radius:2px;background:var(--sage)}.ceramic-controls>p{font-size:9px;line-height:1.5;color:#748268;margin:12px 0 0}.view-controls #front-view,.view-controls #back-view{font-size:9px;padding:0 9px}.view-controls button[aria-pressed=true]{background:#dfe8d1;border-color:#6e8d5b}.view-controls{gap:10px}.view-controls>span{max-width:110px}.design-summary{margin:16px 0 20px}@media(max-width:760px){.ceramic-heading strong{font-size:12px}.ceramic-parts button{min-height:38px;font-size:11px}.ceramic-controls>p{font-size:10px}.ceramic-swatch{width:30px;height:30px}.ceramic-swatches{gap:10px}.view-controls{flex-wrap:wrap}.view-controls>span{text-align:left;max-width:none}.view-controls #reset-view{font-size:12px;padding:0 7px}}
.story-type-picker{display:flex;gap:5px;margin:0 0 22px;background:#edefe5;border-radius:8px;padding:4px}.story-type-picker button{flex:1;border:0;background:transparent;border-radius:5px;padding:10px 4px;font-size:10px;font-weight:600;line-height:1.3}.story-type-picker button[aria-pressed=true]{background:#fffefa;color:var(--sage);box-shadow:0 1px 5px #24352f12}@media(max-width:760px){.story-type-picker button{font-size:11px;padding:12px 4px}}
.subject-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}.subject-picker button{display:flex;align-items:center;gap:8px;min-width:0;padding:5px;border:1px solid var(--line);border-radius:8px;background:#fffefb;text-align:left;font-size:10px;font-weight:600}.subject-picker img{width:38px;height:38px;object-fit:cover;border-radius:5px}.subject-picker button[aria-pressed=true]{border-color:var(--sage);box-shadow:0 0 0 1px var(--sage);background:#edf2e5}@media(max-width:760px){.subject-picker button{font-size:11px}.subject-picker img{width:40px;height:40px}}