.color-card-grid{display:grid;grid-template-columns:repeat(auto-fill,90px);gap:10px;justify-content:center}.color-card[data-v-df330680]{width:90px;height:278px;padding:10px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:space-between}.hex-value[data-v-df330680]{height:8px;width:100%;margin-bottom:4px;border-radius:2px;box-shadow:0 1px 2px #0000004d}.hex-text[data-v-df330680]{font-size:12px;margin-bottom:6px;text-align:left;width:100%;color:#fff}.header[data-v-df330680]{display:flex;justify-content:space-between;align-items:flex-start;height:40px;margin-bottom:6px;gap:8px}.id[data-v-df330680]{flex:0 0 30px;display:flex;align-items:flex-start;justify-content:flex-start;font-weight:700}.name-block[data-v-df330680]{display:flex;flex-direction:column;align-items:center;width:500px}.name[data-v-df330680]{writing-mode:vertical-rl;white-space:nowrap;color:#fff;font-weight:700;margin-bottom:10px}.pinyin[data-v-df330680]{writing-mode:vertical-rl;white-space:nowrap;color:#fff;font-size:12px;letter-spacing:1px;line-height:1.2}.cmyk[data-v-df330680]{display:flex;flex-direction:column;gap:4px;margin-bottom:6px;height:70px;width:50px;align-items:flex-start;justify-content:flex-start}.circle[data-v-df330680]{width:16px;height:16px;border-radius:50%;background:#ddd;position:relative;display:flex;align-items:center;justify-content:center;font-size:10px;color:#000;overflow:hidden}.circle[data-v-df330680]:after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(currentColor var(--percent),transparent 0);opacity:.5}.cmyk-bars[data-v-df330680]{display:flex;gap:2px;height:100px;align-items:flex-start;justify-content:flex-start}.bar[data-v-df330680]{width:2px;height:100%;background-color:#aaa;border-radius:2px 2px 0 0;position:relative;overflow:hidden}.bar[data-v-df330680]:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:var(--percent);background-color:#fff;opacity:.7}.c[data-v-df330680]{color:#0ff}.m[data-v-df330680]{color:#f0f}.y[data-v-df330680]{color:#ff0}.k[data-v-df330680]{color:#000}.hex-value input[data-v-df330680]{width:100%;text-align:center}@media (max-width: 768px){.color-card[data-v-df330680]{width:70px;height:220px;padding:8px}.hex-value[data-v-df330680]{height:6px;margin-bottom:3px}.hex-text[data-v-df330680]{font-size:10px;margin-bottom:4px}.header[data-v-df330680]{height:32px;margin-bottom:4px;gap:6px}.id[data-v-df330680]{flex:0 0 24px}.name-block[data-v-df330680]{width:350px}.name[data-v-df330680]{margin-bottom:6px;font-size:14px}.pinyin[data-v-df330680]{font-size:10px}.cmyk[data-v-df330680]{height:55px;width:40px}.circle[data-v-df330680]{width:12px;height:12px;font-size:8px}.cmyk-bars[data-v-df330680]{height:80px}.bar[data-v-df330680]{width:1.5px}}.color-container[data-v-65ef6402]{display:flex;flex-wrap:wrap;gap:10px}@media (max-width: 768px){.color-container[data-v-65ef6402]{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:10px;padding:0 10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;align-items:flex-end;justify-content:center;height:96vh}.color-container[data-v-65ef6402]>*{flex:0 0 auto;scroll-snap-align:start}.color-container[data-v-65ef6402]::-webkit-scrollbar{height:6px}.color-container[data-v-65ef6402]::-webkit-scrollbar-thumb{background:#0000004d;border-radius:3px}.color-container[data-v-65ef6402]::-webkit-scrollbar-track{background:transparent}}.color-box[data-v-33021e13]{position:relative;width:255px;height:507px;padding:15px;border-radius:6px;border:1px solid #aaa;color:#333;flex-shrink:0;position:sticky;top:20px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;box-sizing:border-box;background-image:none}.cmyk-column[data-v-33021e13]{display:flex;flex-direction:column;gap:10px;margin-bottom:10px;align-items:center}.ring[data-v-33021e13]{display:flex;flex-direction:column;align-items:center;width:50px}.ring svg[data-v-33021e13]{width:50px;height:50px}circle.bg[data-v-33021e13]{fill:none;stroke:#eee;stroke-width:4}circle.progress[data-v-33021e13]{fill:none;stroke-width:4;stroke-linecap:round;stroke:currentColor;transition:stroke-dasharray 1s ease;transform:rotate(-90deg);transform-origin:50% 50%}.ring[data-v-33021e13]:nth-child(1){color:#0ff}.ring[data-v-33021e13]:nth-child(2){color:#f0f}.ring[data-v-33021e13]:nth-child(3){color:#ff0}.ring[data-v-33021e13]:nth-child(4){color:#000}.ring text.ring-text[data-v-33021e13]{font-size:10px;fill:currentColor;dominant-baseline:middle}.label[data-v-33021e13]{margin-top:2px;font-size:10px;color:#fff}.separator[data-v-33021e13],.middle-separator[data-v-33021e13]{height:1px;width:100%;background-color:#fff;margin:4px 0}.rgb-column[data-v-33021e13]{display:flex;flex-direction:column;align-items:center;position:relative}.rgb-item[data-v-33021e13]{display:flex;gap:8px;padding:2px 6px;background-color:#ffffff0d;font-size:14px}.rgb-label[data-v-33021e13],.rgb-value[data-v-33021e13]{color:#fff}.hex-tooltip[data-v-33021e13]{position:absolute;left:105%;top:0;padding:4px 8px;background-color:#000c;color:#fff;border-radius:4px;font-size:14px;white-space:nowrap;z-index:100}.hex-tooltip.left[data-v-33021e13]{left:auto;right:105%}.title-vertical[data-v-33021e13]{position:absolute;top:15px;right:15px;text-align:center;display:flex;flex-direction:column;align-items:center}@font-face{font-family:CustomFont;src:url(/api/fonts.woff2) format("woff2")}.chinese[data-v-33021e13]{writing-mode:vertical-rl;font-size:60px;font-weight:700;font-family:CustomFont,sans-serif;color:#fff;overflow:hidden;display:inline-block;white-space:nowrap;border-right:2px solid transparent;animation:writeChinese 3s steps(10) forwards}.pinyin[data-v-33021e13]{font-family:adobe-garamond-pro-1,adobe-garamond-pro-2,sans-serif;writing-mode:horizontal-tb;font-size:14px;color:#fff;margin-top:4px}@media (max-width: 768px){.color-box[data-v-33021e13]{position:fixed;top:2vh;left:50%;transform:translate(-50%);width:90%;max-width:255px;height:60vh;max-height:507px;z-index:1000;box-sizing:border-box;padding:10px;overflow:hidden}.main-layout[data-v-33021e13]{padding-top:62vh}.cmyk-column .ring svg[data-v-33021e13]{width:40px;height:40px}.rgb-item[data-v-33021e13]{font-size:12px;padding:1px 4px}.hex-tooltip[data-v-33021e13]{font-size:12px;padding:2px 6px}.title-vertical .chinese[data-v-33021e13]{font-size:40px}.title-vertical .pinyin[data-v-33021e13]{font-size:12px}}html,body{height:100%;margin:0;padding:0;background:transparent}#app{transition:background-color .5s linear;min-height:100vh;background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px),radial-gradient(circle at 10% 20%,rgba(0,0,0,.02) 0%,transparent 40%),radial-gradient(circle at 80% 70%,rgba(0,0,0,.015) 0%,transparent 40%),radial-gradient(circle at 50% 60%,rgba(0,0,0,.01) 0%,transparent 50%);background-size:30px 30px,30px 30px,100px 100px,100px 100px,150px 150px;background-position:0 0,0 0,0 0,100px 100px,50px 50px;background-blend-mode:overlay,overlay,multiply,multiply,multiply;border-radius:8px;box-shadow:0 2px 8px #0000000d}.main-layout{display:flex;gap:20px;padding:20px;box-sizing:border-box}@media (max-width: 768px){.main-layout{flex-direction:column-reverse;gap:60px;align-items:center;width:100%;overflow-y:auto}}