@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#403b34;background:#ece7de;font-synthesis:none;font-size:12px}*{box-sizing:border-box}body{margin:0}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:1px solid #68584a;outline-offset:6px;border-radius:3px}button:disabled{opacity:.25;cursor:default}#workspace{position:relative;width:100%;height:100svh;min-height:620px;overflow:hidden;background:#eee9df}#scene{position:absolute;inset:0}#scene canvas{display:block;width:100%;height:100%;touch-action:pan-y}#loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#eee9df;font:italic 32px 'Instrument Serif',serif;z-index:9;transition:opacity .4s}#loading span{font:11px 'DM Sans',sans-serif;margin-top:12px;opacity:.5}.signature{position:absolute;top:31px;left:36px;font:30px 'Instrument Serif',Georgia,serif;letter-spacing:-1px;pointer-events:none}.signature span{display:block;font:8px 'DM Sans',sans-serif;letter-spacing:1.8px;margin-top:8px;opacity:.55}.top-actions{position:absolute;right:34px;top:37px;display:flex;align-items:center;gap:32px}.top-actions button{font-size:11px;padding:8px 0}.top-actions #done{font-size:13px;border-bottom:1px solid #756b5a;padding-bottom:7px}.top-actions #done span{margin-left:22px}#sound{opacity:.55}#guide{position:absolute;left:50%;top:34%;transform:translateX(-50%);text-align:center;pointer-events:none;transition:opacity .8s;width:260px}.guide-number{font-size:8px;letter-spacing:3px;opacity:.45}#guide p{font:italic 25px 'Instrument Serif',Georgia,serif;margin:11px 0}#guide>span:last-child{font-size:10px;opacity:.6}.table-objects{position:absolute;bottom:70px;left:5%;right:5%;display:flex;align-items:flex-end;justify-content:space-between;pointer-events:none;transition:transform 1s,opacity .8s}.table-objects>*{pointer-events:auto}.polish-zone{width:340px}.tray{display:flex;align-items:flex-end;gap:16px;overflow-x:auto;scrollbar-width:none;padding:18px 18px 12px;scroll-behavior:smooth;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}.tray::-webkit-scrollbar{display:none}.bottle{position:relative;width:62px;height:128px;flex-shrink:0;transform:rotate(var(--angle));transition:transform .25s;isolation:isolate}.bottle:hover{transform:rotate(var(--angle)) translateY(-3px)}.bottle .glass{position:absolute;bottom:0;left:5px;width:52px;height:64px;background:linear-gradient(90deg,#ffffff45,transparent 18%,#0001 75%,#ffffff70),var(--color);border-radius:8px 8px 11px 11px;box-shadow:inset 0 0 0 3px #ffffff55,inset -7px -4px 10px #0002,6px 8px 7px #64553b26,2px 2px 1px #51493520;border:1px solid #fff8}.bottle .glass:before{content:'';position:absolute;left:6px;top:6px;width:4px;height:45px;background:#fff7;border-radius:50%}.bottle .glass:after{content:'n / s';font:italic 13px 'Instrument Serif',serif;position:absolute;inset:22px 4px auto;color:var(--ink,#f4eddf);letter-spacing:1px}.bottle .cap{position:absolute;z-index:2;left:15px;top:7px;width:33px;height:60px;background:repeating-linear-gradient(90deg,#222 0px,#30302b 2px,#1b1c19 3px);border-radius:6px 6px 2px 2px;box-shadow:3px 4px 5px #0002,inset 2px 0 2px #fff3;transition:transform .35s}.bottle.selected .cap{transform:translateY(-10px) rotate(-8deg)}.bottle.selected:after{content:'';width:3px;height:3px;background:#514639;border-radius:50%;position:absolute;bottom:-10px;left:30px}.bottle.silver .glass{background:linear-gradient(115deg,#8d8a82,#fff 30%,#777970 55%,#ecece9 73%,#94958d)}.bottle.clear .glass{background:linear-gradient(90deg,#fff6,#faf6e327,#fff8)}.tray-caption{display:flex;justify-content:space-between;padding:16px 18px 0;font-size:8px;letter-spacing:1.5px}.tray-caption button{font-size:9px;letter-spacing:.2px;opacity:.55}.tools{display:flex;gap:13px;align-items:flex-end}.tool{height:159px;width:51px;position:relative;padding:0;transition:transform .2s}.implement{position:absolute;left:22px;top:9px;height:119px;width:7px;background:linear-gradient(90deg,#5c281c,#bd7853 45%,#623f28);border-radius:5px 5px 1px 1px;transform:rotate(13deg);transform-origin:bottom;box-shadow:4px 5px 4px #766b4930;transition:transform .3s}.tool:nth-child(2) .implement{transform:rotate(9deg)}.tool:nth-child(3) .implement{transform:rotate(17deg)}.tool:nth-child(4) .implement{transform:rotate(-9deg)}.implement:after{content:'';position:absolute;bottom:0;width:100%;height:24px;background:linear-gradient(90deg,#66685d,#eeeadb 45%,#a4a291 70%,#eeeade)}.implement i{position:absolute;bottom:-16px;left:0;width:7px;height:17px;background:linear-gradient(90deg,#3f2515,#916c40,#422819);border-radius:0 0 2px 2px}.liner{width:4px;background:linear-gradient(90deg,#b3a18b,#e0ceb7,#96836a)}.liner i{width:3px;height:21px;bottom:-20px;left:1px;clip-path:polygon(0 0,100% 0,65% 100%)}.dot{width:5px;background:linear-gradient(90deg,#473b32,#99867b,#443a31)}.dot i{width:7px;height:7px;background:radial-gradient(circle at 30% 25%,white,#77776f);border-radius:50%;bottom:-6px;left:-1px}.swab{width:4px;height:100px;top:25px;background:#e2d7bf}.swab:after,.swab i{width:10px;left:-3px;height:24px;border-radius:50%;background:radial-gradient(ellipse at 35% 40%,#fffef6,#d6ceba);box-shadow:1px 1px 2px #7a705233}.swab:after{top:-9px}.swab i{bottom:-9px}.tool-label{position:absolute;bottom:-4px;left:0;right:0;font-size:9px;opacity:.5}.tool.selected .tool-label{opacity:1}.tool.selected .tool-label:after{content:'';display:block;width:3px;height:3px;background:#554b3f;border-radius:50%;margin:6px auto -9px}.tool:hover .implement,.tool.selected .implement{transform:translateY(-7px) rotate(0deg)}.bottom-line{position:absolute;bottom:25px;left:35px;right:35px;display:flex;align-items:center;justify-content:space-between;font-size:9px;opacity:.65}.bottom-line #undo{font-size:23px;display:flex;align-items:center;gap:8px}.bottom-line #undo span{font-size:9px}#status{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.zoom-hint{font-size:9px}#cursor{position:fixed;pointer-events:none;display:none;z-index:20;width:19px;height:19px;border:1px solid #ffffffc0;border-radius:50%;box-shadow:0 0 0 1px #4b3e3844;transform:translate(-50%,-50%)}#cursor span{position:absolute;width:5px;height:5px;left:6px;top:6px;background:var(--polish,#bf3020);border-radius:50%}#back{position:absolute;right:35px;bottom:26px;font-size:11px;opacity:.6}#toast{position:absolute;bottom:59px;left:50%;transform:translateX(-50%);font-size:10px;opacity:0;transition:opacity .3s;background:#f3efe3c9;padding:10px 16px;border-radius:2px;pointer-events:none}.presenting .table-objects{transform:translateY(230px);opacity:0;pointer-events:none}.presenting .table-objects *{pointer-events:none}.presenting .top-actions,.presenting .bottom-line,.presenting #guide{opacity:0;pointer-events:none}.presenting .signature{opacity:.4}.zoomed #guide{opacity:0!important}.zoomed .signature span{opacity:0}.zoomed .table-objects{bottom:60px}.painting #guide{opacity:0} @media(max-width:700px){#workspace{min-height:600px}.signature{top:24px;left:23px;font-size:26px}.signature span{font-size:7px}.top-actions{top:25px;right:22px;gap:20px}#guide{top:24%;width:220px}#guide p{font-size:23px}.table-objects{left:15px;right:15px;bottom:64px;gap:5px;align-items:flex-end}.polish-zone{width:calc(100% - 148px)}.tray{gap:12px;padding:18px 8px 12px}.bottle{width:48px;height:113px}.bottle .glass{width:44px;left:2px;height:55px}.bottle .cap{left:10px;width:29px;height:54px;top:8px}.bottle.selected:after{left:22px}.tray-caption{padding:14px 6px 0;gap:5px;font-size:7px;letter-spacing:1px}.tray-caption button{font-size:8px}.tools{gap:1px}.tool{width:36px;height:137px}.implement{height:100px;left:15px}.swab{height:82px}.tool-label{font-size:8px}.bottom-line{left:23px;right:23px;bottom:21px}.zoom-hint{display:none}#status{left:auto;right:0;transform:none;max-width:75%;white-space:normal;text-align:right;font-size:8px}#cursor{display:none!important}}@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* The same table and controls, redrawn as a printed manicure diagram. */
:root, #workspace, #loading{background:#f5f0e7}
#workspace:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.055;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.5' filter='url(%23p)'/%3E%3C/svg%3E");mix-blend-mode:multiply}
.bottle .glass{background:var(--color);border:1.4px solid #846e5c;border-radius:10px 8px 10px 7px;box-shadow:none}
.bottle .glass:before{top:9px;left:7px;width:3px;height:15px;background:#f8f0de;opacity:.6;transform:rotate(3deg);border-radius:2px}
.bottle .cap{background:#39362f;border:1.3px solid #746151;border-radius:4px 5px 1px 2px;box-shadow:none}
.bottle .cap:before{content:'';position:absolute;left:6px;top:9px;bottom:10px;border-left:1px solid #aca18c;opacity:.35;transform:rotate(-1deg)}
.bottle.silver .glass{background:#b2b5ad}
.bottle.clear .glass{background:#ede6d5}
.implement{width:8px;background:#c98472;border:1px solid #8a7161;border-radius:4px 3px 1px 2px;box-shadow:none}
.implement:after{left:-1px;width:calc(100% + 2px);background:#b9c7ba;border:1px solid #8a7161;border-radius:1px}
.implement i{left:-1px;width:8px;background:#7c6651;border:1px solid #806553;border-radius:0 0 3px 2px}
.liner{width:5px;background:#ddd0ad}.liner i{width:4px;left:0;background:#806553;border:0}
.dot{width:6px;background:#b6c9c1}.dot i{width:8px;height:8px;left:-2px;background:#e5d9bd;border:1px solid #8a7161;border-radius:50%}
.swab{width:4px;background:#d2c1a3;border:.7px solid #aa8e72}
.swab:after,.swab i{width:11px;left:-4px;background:#fcf6e9;border:1px solid #aa927b;box-shadow:none;border-radius:48% 43% 49% 45%}
#cursor{border-color:#96775d;box-shadow:none}

/* Material lab: small labels printed around the existing illustrated table. */
.table-objects{bottom:123px}.category{display:block;font-size:8px;letter-spacing:2px;text-transform:uppercase;opacity:.5;margin:0 17px 3px}.tool-zone .category{text-align:right;margin-right:15px}.tools{gap:7px}.tool{width:42px;height:143px}.implement{height:103px;left:19px}.swab{height:84px}.tool:nth-child(4) .implement{transform:rotate(8deg)}.tool:nth-child(5) .implement{transform:rotate(-5deg)}.tool:nth-child(6) .implement{transform:rotate(-9deg)}.fan{background:#c4b695;width:7px}.fan i{width:30px;height:25px;left:-12px;bottom:-22px;clip-path:polygon(39% 0,62% 0,100% 83%,83% 100%,16% 100%,0 84%);background:repeating-linear-gradient(80deg,#b4a084 0 3px,#8a7461 3px 4px);border:0}.pick{background:#b3bdb5;width:5px}.pick i{width:3px;left:0;clip-path:polygon(0 0,100% 0,45% 100%);height:18px;background:#8a7461;border:0}.material-row{position:absolute;left:6.5%;right:6.5%;bottom:61px;display:flex;align-items:center;gap:22px;transition:opacity .6s,transform .7s}.material-row .category{margin:0}.material-row #materials{display:flex;flex-wrap:wrap;gap:17px}.material-row button{padding:7px 0;font-size:10px;opacity:.52;border-bottom:1px solid transparent}.material-row button[aria-pressed=true]{opacity:1;border-color:#867661}.material-row button.changed{animation:material-ink .45s ease-out}.material-row #material-note{font-size:9px;opacity:.5;margin-left:auto;max-width:165px;text-align:right}#object-tray{position:absolute;right:0;bottom:-37px;display:flex;align-items:center;gap:15px;background:#f5f0e7}#object-tray[hidden]{display:none}#object-tray button{padding:4px 2px;min-width:20px;font-size:17px;opacity:.5}#object-tray button:last-child{font-size:8px;letter-spacing:1px}#object-tray button[aria-pressed=true]{opacity:1;text-decoration:underline;text-underline-offset:5px}.presenting .material-row{opacity:0;transform:translateY(120px);pointer-events:none}.zoomed .table-objects{bottom:123px}.bottom-line{bottom:22px}.bottle .cap{top:7px}.polish-zone{width:350px}@keyframes material-ink{from{opacity:.2;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.table-objects,.zoomed .table-objects{bottom:142px;left:15px;right:15px;gap:8px}.polish-zone{width:calc(100% - 171px)}.tools{gap:0}.tool{width:27px;height:112px}.implement{left:11px;height:77px;top:6px}.swab{height:65px;top:13px}.tool-label{font-size:7px}.bottle{height:98px}.bottle .cap{height:43px;top:9px}.bottle .glass{height:50px}.category{font-size:7px;margin-left:6px}.tool-zone .category{margin-right:4px}.tray-caption{flex-wrap:wrap;gap:8px;padding-top:12px}.material-row{left:22px;right:22px;bottom:58px;gap:10px;align-items:flex-start}.material-row .category{margin-top:8px}.material-row #materials{gap:3px 13px}.material-row button{font-size:9px;padding:6px 0}.material-row #material-note{display:none}#object-tray{bottom:-31px;gap:8px}#object-tray button{font-size:15px;min-width:17px}.table-objects .tray{padding-top:12px}.zoomed .signature{opacity:.6}.fan i{width:24px;left:-9px}}
@media(prefers-reduced-motion:reduce){.material-row button.changed{animation:none}}
.bottle.selected[data-material=jelly] .glass{background:color-mix(in srgb,var(--color) 48%,#f5f0e7);animation:material-ink .5s ease-out}
.bottle.selected[data-material=chrome] .glass{background:linear-gradient(100deg,var(--color) 0 20%,#eee9d8 31%,#777a70 43%,var(--color) 63%)}
.bottle.selected[data-material=magnetic] .glass{background:linear-gradient(110deg,var(--color) 15%,#dedbbb 44%,var(--color) 60%)}
.bottle.selected[data-material=glitter] .glass{background-image:radial-gradient(#efe4c1 1px,transparent 1.5px),radial-gradient(#9c947f 1px,transparent 1.5px);background-size:11px 13px,17px 19px;background-position:3px 5px,7px 2px}
.bottle.selected[data-material=pearl] .glass{background:linear-gradient(115deg,var(--color),#e3d9d9 45%,var(--color))}
.bottle.selected[data-material=matte] .glass:before{opacity:0}.bottle.selected[data-material=gloss] .glass:before{height:27px;opacity:.9}

/* A shallow ceramic dish sits at the table edge; the approved tools stay together. */
#charm-dish{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%) rotate(-.5deg);width:min(510px,calc(100% - 34px));height:65px;border:1px solid #cbc2b2;border-radius:43% 39% 16px 14px / 13px 12px 16px 14px;background:linear-gradient(174deg,#fffaf0,#e4ddce 43%,#f1eade 90%);box-shadow:inset 0 3px 2px #fffaf0,inset 0 6px 9px #8b7a5d16,1px 5px 6px #77634819;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(2,1fr);padding:5px 13px 3px;touch-action:none;transition:transform .75s,opacity .6s;z-index:3}
#charm-dish canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#charm-dish button{z-index:1;min-width:0;touch-action:none;cursor:grab;padding:0}
#charm-dish button:active{cursor:grabbing}
#charm-dish button:focus-visible{outline-offset:-2px;outline-color:#ad9b82}
.table-objects,.zoomed .table-objects{bottom:123px}.material-row{bottom:88px}.bottom-line{bottom:59px}
.presenting #charm-dish{transform:translate(-50%,110px) rotate(-.5deg);opacity:0;pointer-events:none}
.carrying-charm #scene canvas{touch-action:none;cursor:none!important}.carrying-charm #cursor{display:none!important}
#toast{bottom:148px;z-index:5;max-width:calc(100% - 36px);width:max-content;text-align:center}
@media(max-width:700px){.table-objects,.zoomed .table-objects{bottom:172px}.material-row{bottom:94px}.bottom-line{bottom:64px}#charm-dish{height:66px;width:calc(100% - 26px)}#toast{bottom:171px;font-size:9px}}
#workspace[data-tool=pick] #scene canvas{touch-action:none}