:root{font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",sans-serif;color:#efe5c9;background:#151b1b;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:radial-gradient(ellipse at 49% 31%,#34403a 0,#1c2624 42%,#101616 90%)}button,a,select{-webkit-tap-highlight-color:transparent;font:inherit}button,select{color:inherit;cursor:pointer;border:1px solid #8e947150;background:#202c27;border-radius:5px;padding:10px 15px;min-height:42px}button:hover,a:hover{filter:brightness(1.2)}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #f8c367;outline-offset:4px}button:disabled{opacity:.4;cursor:default}a{color:#e7d7b4}button[hidden],[hidden]{display:none!important}#studio{height:100dvh;min-height:380px;display:flex;flex-direction:column;padding:0 max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));background:repeating-linear-gradient(91deg,transparent 0,transparent 169px,#00000012 170px,#00000012 173px);transition:background-color 1.1s}.top{height:66px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;gap:12px;z-index:2}.top>div{display:flex;gap:8px}.brand{font:11px Georgia,serif;letter-spacing:2.5px;color:#c1b393}.brand i{margin:0 9px;color:#6b7563}.quiet,select{background:#14201a66;font-size:12px;padding:7px 10px}.workbench{position:relative;display:flex;align-items:center;justify-content:center;flex:1;min-height:0}#stage{position:relative;aspect-ratio:1;width:min(calc(100dvh - 105px),calc(100vw - 250px));max-height:100%;flex-shrink:0}canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}.zoom{position:absolute;top:10px;left:10px;display:flex;gap:3px}.zoom button{padding:6px 12px;background:#101b1650;border-color:transparent;font-size:15px;min-height:38px}#hint{position:absolute;bottom:10px;left:0;width:100%;text-align:center;font-size:13px;letter-spacing:.12em;color:#f0d39d;pointer-events:none;min-height:24px;text-shadow:0 2px 6px #000}#tools{width:160px;flex-shrink:0;padding:0 10px;margin-left:20px;display:flex;flex-direction:column;gap:22px}.tool-set{display:flex;flex-direction:column;gap:10px}.tool{position:relative;border:0;background:transparent;display:flex;align-items:center;gap:10px;padding:5px 9px;color:#a7af99;text-align:left}.tool.active{background:#bdab6d12;color:#ffe0a0}.tool.active:after{content:"";position:absolute;width:3px;height:23px;left:0;background:#ffc563;border-radius:4px}.tool svg{width:65px;height:65px;filter:drop-shadow(2px 5px 3px #0008)}.tool span{font-size:12px;white-space:nowrap}.edit-actions{display:flex;flex-direction:column;gap:7px}.edit-actions button{font-size:12px;background:#17221b55;border-color:#a6a58424}#finish{display:flex;flex-direction:column;gap:9px}#finish button{font-size:12px}#finish a{font-size:11px;text-align:center;margin-top:8px}.primary{background:#e7af57;color:#292316;border-color:#f6cc7b;font-weight:700}#status{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);background:#13201bea;border-radius:5px;color:#f4dfad;font-size:13px;text-align:center;padding:10px 18px;max-width:85vw;z-index:4;pointer-events:none}#status:empty{display:none}footer{height:40px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #a4ad801c;font-size:11px;letter-spacing:2px;color:#a2aa91;flex-shrink:0}.edition{font-family:Georgia,serif;font-size:10px}body.lit{background:radial-gradient(ellipse at 47% 46%,#332b1e 0,#131918 48%,#080e10 95%)}dialog{max-width:min(92vw,570px);max-height:92dvh;border:1px solid #a39a734a;background:#17201e;color:#f4e6c8;border-radius:10px;padding:20px;box-shadow:0 30px 100px #0009}dialog::backdrop{background:#02080bc9;backdrop-filter:blur(5px)}#result-image{max-height:65dvh;max-width:100%;display:block;margin:12px auto;border-radius:5px;user-select:auto;-webkit-touch-callout:default}.close{display:block;margin-left:auto;padding:5px 12px;font-size:12px}.image-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}.image-actions>*{font-size:12px}.image-actions a{padding:10px}dialog p{font-size:12px;line-height:1.6;text-align:center}#x-help{opacity:.7}
@media(max-width:650px){#studio{padding:0 12px}.top{height:56px}.brand{font-size:8px;letter-spacing:1px}.brand i{margin:0 4px}.quiet,select{font-size:11px;padding:7px}.workbench{flex-direction:column;justify-content:center;gap:0}#stage{width:100%;max-width:min(100%,calc(100dvh - 210px));max-height:none}#tools{width:100%;margin:0;padding:0 4px;gap:10px}.tool-set{flex-direction:row;justify-content:space-evenly;gap:2px}.tool{flex-direction:column;gap:0;padding:0 8px;min-width:80px}.tool svg{width:56px;height:58px}.tool.active:after{width:26px;height:2px;left:calc(50% - 13px);bottom:-4px}.tool span{font-size:11px}.edit-actions{flex-direction:row;justify-content:center;gap:15px}.edit-actions button{min-height:34px;padding:5px 18px}#finish{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:7px}#finish a{width:100%;margin:0}#hint{bottom:4px;font-size:12px}.zoom{top:0;left:0}footer{height:35px;font-size:9px;letter-spacing:1px}body.lit .tool-set{display:none}body.lit .edit-actions{display:none}#status{bottom:155px}#result-image{max-height:61dvh}dialog{padding:14px}}
@media(max-height:560px) and (min-width:651px){.top{height:42px}footer{height:25px}#stage{width:min(calc(100dvh - 67px),calc(100vw - 200px))}#tools{gap:8px}.tool svg{height:44px;width:44px}.tool-set{gap:0}.edit-actions{flex-direction:row}.edit-actions button{padding:5px}.brand{font-size:9px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.model-icon{width:65px;height:75px;object-fit:contain;filter:drop-shadow(2px 5px 3px #0008)}
body.no-openings #knife{box-shadow:0 0 14px #ffc65f66;animation:invite-cut 2s ease-in-out infinite}
body.no-openings.lit .tool-set{display:flex}
body.no-openings.lit #shave,body.no-openings.lit #light{display:none}
@keyframes invite-cut{50%{box-shadow:0 0 22px #ffc65faa}}
.zoom #rotate{border:1px solid #b5a36c55;margin-right:8px;font-size:12px}
.zoom #rotate.active{background:#ad8a3d50;color:#ffe3a2}
body:not(.three-studio) #rotate{display:none}
.three-studio #stage{border-radius:10px;overflow:hidden}
.three-studio canvas{outline-offset:-3px}
@media(max-width:650px){.model-icon{width:66px;height:67px}.three-studio .tool{min-width:85px}.three-studio .zoom{top:6px;left:4px}.three-studio #hint{bottom:8px}}
