#mote-object { --mo-paper:light-dark(#f6f5f1,#191918); --mo-ink:light-dark(#20201e,#f0efea); --mo-muted:light-dark(#777772,#a1a19b); --mo-line:light-dark(#d6d5ce,#41413d); --mo-accent:#f4512b; --mo-panel:light-dark(#fbfaf7,#242422); --mo-pad:40px; color:var(--mo-ink); font-family:Arial,Helvetica,sans-serif; font-size:14px; line-height:1.45; }
#mote-object * { box-sizing:border-box; }
#mote-object [hidden] { display:none !important; }
#mote-object button, #mote-object input { font:inherit; color:inherit; }
#mote-object button { -webkit-tap-highlight-color:transparent; }
#mote-object button:disabled { opacity:.35; cursor:not-allowed; }
#mote-object .mo-screen { min-height:782px; background:var(--mo-paper); position:relative; overflow:hidden; display:flex; flex-direction:column; }
#mote-object .mo-header { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:29px var(--mo-pad) 0; }
#mote-object .mo-logo { font-size:28px; font-weight:600; letter-spacing:-2px; display:flex; gap:4px; align-items:baseline; line-height:1; }
#mote-object .mo-logo::after { content:''; display:block; width:6px; height:6px; border-radius:50%; background:var(--mo-accent); }
#mote-object .mo-quiet-button { border:0; background:transparent; padding:8px 0; font-size:11px; color:var(--mo-muted); }
#mote-object .mo-quiet-button:hover { color:var(--mo-ink); }
#mote-object .mo-mono { font-family:Consolas,'Courier New',monospace; font-size:10px; letter-spacing:1.1px; text-transform:uppercase; font-weight:400; }
#mote-object .mo-stage { position:relative; flex:1; padding:48px var(--mo-pad) 20px; }
#mote-object .mo-caption { position:absolute; left:var(--mo-pad); top:75px; display:grid; gap:9px; }
#mote-object .mo-caption .mo-mono { color:var(--mo-muted); }
#mote-object .mo-caption p { margin:0; font-size:13px; letter-spacing:-.15px; line-height:1.5; }
#mote-object .mo-caption p span { display:block; }
#mote-object .mo-index { position:absolute; right:var(--mo-pad); top:78px; color:var(--mo-muted); writing-mode:vertical-rl; font-size:9px; letter-spacing:1.5px; }
#mote-object .mo-composer { width:100%; margin:0 auto; text-align:center; }
#mote-object .mo-art-area { width:330px; max-width:100%; height:297px; margin:0 auto; position:relative; display:grid; place-items:center; perspective:1100px; }
#mote-object .mo-art-area::after { content:''; position:absolute; bottom:11px; width:142px; height:8px; border-radius:50%; background:light-dark(#19191124,#00000075); filter:blur(9px); transform:translateX(6px); }
#mote-object .mo-coin-button { padding:0; border:0; background:transparent; width:226px; height:226px; border-radius:50%; position:relative; transform-style:preserve-3d; z-index:1; transition:transform 400ms cubic-bezier(.2,.7,.3,1); transform:rotateX(var(--mo-rx,11deg)) rotateY(var(--mo-ry,-21deg)) rotateZ(-15deg); }
#mote-object .mo-metal { display:block; width:100%; height:100%; border-radius:50%; position:relative; background:conic-gradient(from 28deg,#969a98 0deg,#eff0e9 34deg,#989d98 63deg,#d5d8d0 93deg,#fafbf5 116deg,#949a95 151deg,#555d58 174deg,#cad1c8 199deg,#fafbf5 233deg,#9ca29a 270deg,#e1e5dc 307deg,#969a98 360deg); box-shadow:1px 1px 0 #c9cbc2,2px 2px 0 #7a8078,3px 3px 0 #b7bdb2,4px 4px 0 #767f73,5px 5px 0 #bdc3b8,6px 6px 0 #727b6b,7px 7px 0 #c6cec0,8px 8px 0 #68755f,9px 9px 0 #838e79,15px 21px 22px #0000000d,inset 0 0 0 1px #f1f3e4; }
#mote-object .mo-metal::before { content:''; position:absolute; inset:8px; border-radius:50%; background:conic-gradient(from 214deg,#848e82,#f3f5e9 19%,#a7b0a2 31%,#e2e8d8 48%,#9aa593 59%,#eff2e5 72%,#99a38f 86%,#848e82); box-shadow:inset 1px 1px 2px #00000044,0 1px 1px #ffffffbb; }
#mote-object .mo-metal::after { content:''; position:absolute; inset:0; border-radius:50%; background:repeating-conic-gradient(from 0deg,#ffffff00 0deg,#ffffff13 .35deg,#00000008 .7deg,#ffffff00 1.05deg); mix-blend-mode:soft-light; pointer-events:none; }
#mote-object .mo-inner { position:absolute; inset:20px; border-radius:50%; border:1px solid #65715c55; box-shadow:inset 1px 1px 1px #ffffff99,1px 1px 1px #ffffff99; display:grid; place-items:center; overflow:hidden; }
#mote-object .mo-glyph { font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; font-size:138px; line-height:1; letter-spacing:-10px; padding:0 15px 23px 0; color:#87957b; text-shadow:1px 2px 1px #eff7de,-1px -1px 1px #43503c; transform:rotateZ(15deg); user-select:none; }
#mote-object .mo-engraving { position:absolute; bottom:16px; width:100%; left:0; font-size:7px; letter-spacing:3px; color:#526249; text-shadow:0 1px #eff7de; font-family:Consolas,monospace; }
#mote-object .mo-uploaded { width:100%; height:100%; object-fit:cover; transform:rotateZ(15deg) scale(1.12); }
#mote-object .mo-uploaded + .mo-engraving { display:none; }
#mote-object [data-finish="Porcelain"] .mo-metal { background:linear-gradient(135deg,#fcfaf3,#d4d0c6 83%,#eeeae1); box-shadow:1px 1px 0 #c9c5ba,2px 2px 0 #d3cfc3,3px 3px 0 #b4b0a4,4px 4px 0 #cac5b8,6px 6px 0 #b8b1a4,12px 15px 20px #00000012,inset 0 0 0 1px #ffffff; }
#mote-object [data-finish="Porcelain"] .mo-metal::before { background:radial-gradient(ellipse at 20% 15%,#f2eee5,#e8e4d9 64%,#d7d0c3); box-shadow:inset 1px 1px 3px #b4b09f,0 1px 1px #fff; }
#mote-object [data-finish="Porcelain"] .mo-glyph { color:#dfd9cb; text-shadow:1px 2px 1px #fffdf3,-1px -1px 2px #b2a993; }
#mote-object [data-finish="Porcelain"] .mo-inner { border-color:#c5bdad; }
#mote-object [data-finish="Porcelain"] .mo-engraving { color:#928977; text-shadow:0 1px #fffdf5; }
#mote-object [data-finish="Ink"] .mo-metal { background:conic-gradient(from 20deg,#252729,#656967,#232825,#464d47,#191d19,#4d554c,#282d27); box-shadow:1px 1px 0 #171a17,2px 2px 0 #484e46,3px 3px 0 #191e16,4px 4px 0 #434a3e,6px 6px 0 #181e13,12px 17px 22px #00000025,inset 0 0 0 1px #909987; }
#mote-object [data-finish="Ink"] .mo-metal::before { background:conic-gradient(from 212deg,#2c332b,#4b5547,#32382e,#6d7962,#373e2d,#505b43,#2c332b); box-shadow:inset 1px 1px 2px #00000099,0 1px 1px #b6c2a644; }
#mote-object [data-finish="Ink"] .mo-glyph { color:#414c36; text-shadow:1px 2px 1px #8d9d7a,-1px -1px 1px #151b0e; }
#mote-object [data-finish="Ink"] .mo-inner { border-color:#242d1d; box-shadow:inset 1px 1px 1px #c8d4b344,1px 1px 1px #c8d4b333; }
#mote-object [data-finish="Ink"] .mo-engraving { color:#a0b58c; text-shadow:0 -1px #12180f; }
#mote-object .mo-tools { display:flex; justify-content:center; align-items:center; gap:17px; margin:1px 0 21px; color:var(--mo-muted); }
#mote-object .mo-tools > button { font-size:10px; border:0; border-bottom:1px solid var(--mo-line); padding:2px 0; background:none; }
#mote-object .mo-swatches { display:flex; align-items:center; gap:5px; }
#mote-object .mo-swatch { width:22px; height:22px; background:none; border:0; padding:5px; border-radius:50%; }
#mote-object .mo-swatch::before { content:''; display:block; width:12px; height:12px; border-radius:50%; background:var(--swatch); border:1px solid #00000014; }
#mote-object .mo-swatch[aria-pressed="true"] { box-shadow:0 0 0 1px var(--mo-ink); }
#mote-object .mo-name-label { display:block; width:100%; margin:0; }
#mote-object .mo-name { border:0; border-radius:0; padding:0 0 4px; display:block; width:min(770px,100%); margin:0 auto; background:none; color:var(--mo-ink); text-align:center; font-size:72px; line-height:1.09; font-weight:400; letter-spacing:-4px; }
#mote-object .mo-name::placeholder { color:var(--mo-muted); }
#mote-object .mo-name-hint { display:block; color:var(--mo-muted); font-size:10px; margin-bottom:8px; }
#mote-object .mo-ticker { display:flex; justify-content:center; align-items:center; gap:4px; color:var(--mo-muted); margin-top:13px; }
#mote-object .mo-ticker input { border:0; background:none; color:var(--mo-muted); font-family:Consolas,'Courier New',monospace; font-size:11px; letter-spacing:1px; text-transform:uppercase; padding:5px 0; border-bottom:1px solid var(--mo-line); border-radius:0; width:65px; }
#mote-object .mo-ticker > span { font-family:Consolas,monospace; font-size:11px; }
#mote-object .mo-create-row { margin-top:33px; display:flex; justify-content:center; }
#mote-object .mo-create { display:inline-flex; gap:26px; align-items:center; justify-content:space-between; border:0; padding:8px 8px 8px 24px; background:var(--mo-ink); color:var(--mo-paper); border-radius:40px; min-height:48px; font-size:12px; }
#mote-object .mo-create-dot { background:var(--mo-accent); color:#231d16; border-radius:50%; width:33px; height:33px; display:grid; place-items:center; transition:transform 180ms; flex:none; }
#mote-object .mo-create-dot svg { width:16px; height:16px; }
#mote-object .mo-create:hover .mo-create-dot { transform:rotate(-35deg); }
#mote-object .mo-create-note { font-size:10px; color:var(--mo-muted); margin:13px 0 0; }
#mote-object .mo-footer { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:28px var(--mo-pad) 27px; color:var(--mo-muted); }
#mote-object .mo-footer .mo-mono { font-size:9px; letter-spacing:.8px; }
#mote-object .mo-footer-left { display:flex; align-items:center; gap:8px; }
#mote-object .mo-tiny-dot { width:4px; height:4px; border-radius:50%; background:var(--mo-accent); }
#mote-object .mo-help { position:absolute; top:74px; right:var(--mo-pad); z-index:3; width:290px; max-width:calc(100% - 40px); padding:23px; background:var(--mo-panel); border:1px solid var(--mo-line); box-shadow:0 10px 30px #00000010; }
#mote-object .mo-help h2 { font-size:17px; font-weight:400; margin:0 0 17px; letter-spacing:-.4px; }
#mote-object .mo-help p { margin:12px 0; font-size:12px; line-height:1.6; }
#mote-object .mo-help p:last-child { color:var(--mo-muted); font-size:11px; }
#mote-object .mo-overlay { position:absolute; inset:0; z-index:4; background:light-dark(#f6f5f1ee,#191918ef); padding:90px 20px 25px; display:flex; align-items:flex-start; justify-content:center; backdrop-filter:blur(12px); }
#mote-object .mo-sheet { width:384px; max-width:100%; background:var(--mo-panel); border:1px solid var(--mo-line); padding:28px; position:relative; box-shadow:0 20px 60px #0000000b; }
#mote-object .mo-sheet-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:38px; }
#mote-object .mo-sheet-top span { color:var(--mo-muted); }
#mote-object .mo-close { background:none; border:0; padding:4px; width:28px; height:28px; display:grid; place-items:center; }
#mote-object .mo-close svg { width:17px; height:17px; }
#mote-object .mo-sheet h2 { font-size:36px; line-height:1.08; letter-spacing:-1.6px; font-weight:400; margin:0 0 15px; }
#mote-object .mo-sheet p { margin:0 0 25px; font-size:12px; line-height:1.6; color:var(--mo-muted); }
#mote-object .mo-label { display:block; font-size:11px; margin-bottom:8px; color:var(--mo-muted); }
#mote-object .mo-email { width:100%; border:0; border-bottom:1px solid var(--mo-line); background:none; padding:11px 0; border-radius:0; font-size:16px; }
#mote-object .mo-sheet-button { margin-top:23px; width:100%; padding:13px 17px; border:1px solid var(--mo-ink); background:var(--mo-ink); color:var(--mo-paper); border-radius:0; display:flex; justify-content:space-between; align-items:center; min-height:45px; font-size:12px; }
#mote-object .mo-sheet-button svg { width:15px; height:15px; }
#mote-object .mo-google { background:none; color:var(--mo-ink); border-color:var(--mo-line); margin-top:12px; justify-content:center; gap:10px; }
#mote-object .mo-fine { margin:20px 0 0 !important; font-size:10px !important; }
#mote-object .mo-review-line { display:flex; justify-content:space-between; gap:15px; padding:14px 0; border-bottom:1px solid var(--mo-line); font-size:12px; }
#mote-object .mo-review-line > span:first-child { color:var(--mo-muted); }
#mote-object .mo-review-line > span:last-child { text-align:right; }
#mote-object .mo-consent { font-size:11px; display:flex; align-items:flex-start; gap:8px; margin-top:21px; color:var(--mo-muted); }
#mote-object .mo-consent input { accent-color:var(--mo-accent); margin:2px 0 0; flex:none; }
#mote-object .mo-error { color:light-dark(#ac371b,#fda48f); font-size:11px; margin:10px 0 0 !important; }
#mote-object .mo-screen-reader { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#mote-object .mo-issued { display:flex; align-items:center; justify-content:center; gap:7px; color:var(--mo-muted); font-size:10px; letter-spacing:1px; margin-top:16px; }
#mote-object .mo-issued::before { content:''; width:5px; height:5px; background:var(--mo-accent); border-radius:50%; }
#mote-object .mo-share { font-family:Consolas,monospace; font-size:11px; letter-spacing:.1px; border:0; background:none; padding:11px 0; border-bottom:1px solid var(--mo-line); margin:15px 0 0; overflow-wrap:anywhere; color:var(--mo-ink); max-width:100%; }
#mote-object .mo-after { margin-top:23px; color:var(--mo-muted); font-size:10px; }
#mote-object .mo-after button { background:none; border:0; padding:5px 0; text-decoration:underline; text-underline-offset:4px; font-size:10px; }
@media(max-width:720px) { #mote-object { --mo-pad:27px; } #mote-object .mo-caption { top:53px; } #mote-object .mo-caption p { font-size:11px; } #mote-object .mo-caption .mo-mono { font-size:8px; } #mote-object .mo-index { top:55px; font-size:8px; } #mote-object .mo-art-area { height:300px; } #mote-object .mo-name { font-size:62px; letter-spacing:-3px; } }
@media(max-width:480px) { #mote-object { --mo-pad:22px; } #mote-object .mo-screen { min-height:757px; } #mote-object .mo-header { padding-top:24px; } #mote-object .mo-stage { padding-top:65px; } #mote-object .mo-caption { top:28px; left:0; width:100%; text-align:center; } #mote-object .mo-caption p { display:none; } #mote-object .mo-caption .mo-mono { font-size:9px; } #mote-object .mo-index { display:none; } #mote-object .mo-art-area { height:280px; } #mote-object .mo-coin-button { width:206px; height:206px; } #mote-object .mo-glyph { font-size:123px; } #mote-object .mo-name { font-size:46px; letter-spacing:-2.5px; } #mote-object .mo-tools { margin-bottom:22px; } #mote-object .mo-footer { gap:12px; padding-top:21px; align-items:flex-end; } #mote-object .mo-footer .mo-mono { font-size:8px; letter-spacing:.3px; } #mote-object .mo-footer-right { max-width:105px; text-align:right; } #mote-object .mo-sheet { padding:24px; } #mote-object .mo-overlay { padding:75px 16px 20px; } #mote-object .mo-sheet h2 { font-size:33px; } #mote-object .mo-ticker input { font-size:16px; } }
@media(pointer:coarse) { #mote-object .mo-tools > button { min-height:44px; } #mote-object .mo-swatch { width:32px; height:44px; padding:10px; border-radius:0; } #mote-object .mo-swatch[aria-pressed="true"] { box-shadow:none; border-bottom:1px solid var(--mo-ink); } #mote-object .mo-close { width:44px; height:44px; } }
@media(prefers-reduced-motion:reduce) { #mote-object .mo-coin-button, #mote-object .mo-create-dot { transition:none; } }