:root{--clay-base: #d4d6d0;--clay-shadow: #b9bcb4;--clay-highlight: #eef0ea;--clay-text: #636860;--clay-accent: #848882;--etch-dark: rgba(0, 0, 0, .14);--etch-light: rgba(255, 255, 255, .42)}*{margin:0;padding:0;box-sizing:border-box}html,body,#root{width:100%;height:100%;background:var(--clay-base);color:var(--clay-text);font-family:Comic Sans MS,Rounded,system-ui,-apple-system,sans-serif;overflow:hidden}.sculpted{filter:url(#clay-mold)}.etched-no-color{color:var(--clay-base);text-shadow:-1px -1px 1px var(--etch-dark),1px 1px 1px var(--etch-light)}.color-etched{color:var(--clay-text);text-shadow:-1px -1px 1px var(--etch-dark),1px 1px 1px var(--etch-light)}.dopple-app{width:100%;height:100%;display:flex;background:var(--clay-base);position:relative}.dopple-app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;opacity:.03;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");z-index:1000}.viewport{flex:1;position:relative;margin:16px 0 16px 16px;border-radius:30px;overflow:hidden;background:var(--clay-base);box-shadow:inset 10px 10px 25px var(--clay-shadow),inset -8px -8px 20px var(--clay-highlight)}.viewport canvas{width:100%!important;height:100%!important}.demo-panel{width:340px;background:var(--clay-base);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;margin:16px;border-radius:24px;box-shadow:7px 7px 15px var(--clay-shadow),-7px -7px 15px var(--clay-highlight)}.panel-header{display:flex;justify-content:space-between;align-items:center}.demo-panel h2{font-size:18px;margin-bottom:4px}.back-chip{padding:4px 12px;font-size:12px;font-weight:600;background:var(--clay-base);color:var(--clay-text);border:none;border-radius:12px;cursor:pointer;box-shadow:3px 3px 6px var(--clay-shadow),-3px -3px 6px var(--clay-highlight);transition:all .15s}.back-chip:hover{box-shadow:4px 4px 8px var(--clay-shadow),-4px -4px 8px var(--clay-highlight);transform:translateY(-1px)}.back-chip:active{box-shadow:inset 3px 3px 6px var(--clay-shadow),inset -2px -2px 4px var(--clay-highlight);transform:translateY(1px)}.demo-panel section{display:flex;flex-direction:column;gap:6px;padding:12px 0;border-bottom:1px solid rgba(0,0,0,.06)}.demo-panel label{font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--clay-accent);display:flex;align-items:center;gap:8px;font-weight:700}.demo-panel .value{font-size:14px;color:var(--clay-text);font-weight:600}.demo-panel .badge{font-size:10px;background:var(--clay-base);padding:2px 10px;border-radius:10px;color:var(--clay-accent);text-transform:none;letter-spacing:0;box-shadow:inset 2px 2px 4px var(--clay-shadow),inset -2px -2px 4px var(--clay-highlight)}.btn-row{display:flex;flex-wrap:wrap;gap:5px}.chip{padding:5px 12px;font-size:12px;font-weight:600;background:var(--clay-base);color:var(--clay-accent);border:none;border-radius:14px;cursor:pointer;transition:all .15s;box-shadow:3px 3px 6px var(--clay-shadow),-3px -3px 6px var(--clay-highlight)}.chip:hover{color:var(--clay-text);box-shadow:4px 4px 8px var(--clay-shadow),-4px -4px 8px var(--clay-highlight);transform:translateY(-1px)}.chip.active{color:var(--clay-text);font-weight:800;box-shadow:inset 3px 3px 6px var(--clay-shadow),inset -2px -2px 4px var(--clay-highlight);transform:translateY(1px)}.primary-btn{padding:10px 20px;font-size:14px;font-weight:700;background:var(--clay-base);color:var(--clay-text);border:none;border-radius:16px;cursor:pointer;transition:all .15s;margin-top:6px;box-shadow:5px 5px 12px var(--clay-shadow),-5px -5px 12px var(--clay-highlight);letter-spacing:.5px}.primary-btn:hover{box-shadow:6px 6px 14px var(--clay-shadow),-6px -6px 14px var(--clay-highlight);transform:translateY(-2px)}.primary-btn:active{box-shadow:inset 4px 4px 8px var(--clay-shadow),inset -3px -3px 6px var(--clay-highlight);transform:translateY(1px)}.color-row{display:flex;gap:8px;flex-wrap:wrap}.color-swatch{display:flex;flex-direction:column;align-items:center;gap:2px}.color-swatch .swatch{width:30px;height:30px;border-radius:50%;box-shadow:inset 2px 2px 4px #0000001a,inset -2px -2px 4px #ffffff4d,3px 3px 6px var(--clay-shadow),-3px -3px 6px var(--clay-highlight)}.color-swatch span{font-size:9px;color:var(--clay-accent);font-weight:600}.clip-list{display:flex;flex-wrap:wrap;gap:4px}.clip-tag{font-size:10px;padding:3px 8px;background:var(--clay-base);border:none;border-radius:8px;color:var(--clay-accent);font-weight:600;box-shadow:inset 2px 2px 3px var(--clay-shadow),inset -1px -1px 2px var(--clay-highlight)}.muted{font-size:11px;color:var(--clay-accent);opacity:.7}footer.muted{margin-top:auto;padding-top:8px;text-align:center}.demo-panel::-webkit-scrollbar{width:6px}.demo-panel::-webkit-scrollbar-track{background:transparent}.demo-panel::-webkit-scrollbar-thumb{background:var(--clay-shadow);border-radius:3px}.demo-panel::-webkit-scrollbar-thumb:hover{background:var(--clay-accent)}