.portfolio.drawing-board{position:relative;isolation:isolate;padding-bottom:110px}.drawing-board>.drawing-footer,.drawing-board>.profile{z-index:1}.drawing-board>.drawing-footer{position:relative}.drawing-surface{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0}[data-board-ready]>.drawing-surface{opacity:1}[data-board-ready] :is(.country-flag,.inline-doodle,.margin-drawing,.profile-drawing,.name-drawing){opacity:0}[data-board-ready] .marker:before,[data-board-ready] .pencil-underline:after{opacity:0}[data-board-editing]>.drawing-footer,[data-board-editing]>.profile{pointer-events:none;user-select:none}[data-board-editing]>.drawing-surface{pointer-events:auto;touch-action:none}.drawing-surface--draw{cursor:crosshair}.drawing-surface--erase{cursor:cell}.drawing-controls{--tray:#f7f6f4;--tray-edge:#ffffff;--control:#88888b;position:fixed;bottom:max(24px,env(safe-area-inset-bottom));right:28px;z-index:2;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,sans-serif}.dark .drawing-controls{--tray:#30302f;--tray-edge:#555553;--control:#bcbcbc}.drawing-controls.is-expanded{right:auto;left:50%;transform:translateX(-50%);max-width:calc(100vw - 24px)}.drawing-controls button{display:grid;place-items:center;flex-shrink:0;width:44px;min-height:44px;padding:0;border-radius:50%;cursor:pointer;color:var(--control);transition:color .15s,background .15s}.drawing-controls button:hover:not(:disabled){color:var(--ink);background:#88888812}.drawing-controls button:disabled{opacity:.3;cursor:default}.drawing-controls :is(button,input):focus-visible{outline:2px solid #748aab;outline-offset:2px}.drawing-controls button>svg{width:19px;height:19px}.drawing-controls svg{pointer-events:none}.drawing-controls .redo-icon{transform:scaleX(-1)}.drawing-controls .drawing-launch,.drawing-pill{background:linear-gradient(180deg,var(--paper),var(--tray));border:1px solid var(--tray-edge);box-shadow:0 0 0 1px #7777771c,0 9px 24px #26262217,0 2px 5px #26262208}.drawing-pill{justify-content:center;gap:4px;height:86px;padding:0 16px;border-radius:48px;max-width:calc(100vw - 24px)}.drawing-pill,.pill-group{display:flex;align-items:center}.pill-divider{height:26px;width:1px;flex-shrink:0;background:#88888830;margin:0 8px}.physical-tools{align-self:stretch}.drawing-controls .physical-tool-button{position:relative;height:100%;width:49px;overflow:hidden;border-radius:0}.physical-tool{position:absolute;width:22px;height:82px;bottom:-20px;left:50%;transform:translateX(-50%);transition:transform .2s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(2px 1px 2px #00000012);pointer-events:none}.physical-tool-button[aria-pressed=true] .physical-tool{transform:translate(-50%,-12px)}.physical-tool-button:hover .physical-tool{transform:translate(-50%,-6px)}.physical-tool-button[aria-pressed=true]:hover .physical-tool{transform:translate(-50%,-12px)}.tool-barrel{position:absolute;top:35px;bottom:0;width:100%;border-top:5px solid #292928;background:linear-gradient(90deg,#d7d4ca,#fffef9 25%,#f6f4ed 65%,#dbd8d0)}.tool-tip{position:absolute;inset:0 0 auto;height:36px}.physical-tool--pencil .tool-tip{background:linear-gradient(90deg,#cbb38a,#f5dfae 38%,#e8c997 70%,#cfb785);clip-path:polygon(50% 0,100% 100%,0 100%)}.physical-tool--pencil .tool-tip:before{content:"";position:absolute;width:100%;height:13px;background:#272726;top:0}.physical-tool--pen .tool-tip{background:linear-gradient(90deg,#171716,#454542,#222221);clip-path:polygon(46% 0,55% 0,70% 65%,100% 84%,100% 100%,0 100%,0 84%,30% 65%)}.physical-tool--marker .tool-tip{top:9px;height:26px;background:var(--ink-color,#f4d337);clip-path:polygon(14% 17%,86% 0,86% 70%,100% 85%,100% 100%,0 100%,0 85%,14% 70%)}.physical-tool--marker .tool-barrel{border-top-color:var(--ink-color,#f4d337)}.physical-tool--eraser .tool-tip{top:8px;height:29px;border-radius:7px 7px 0 0;background:linear-gradient(90deg,#d5988c,#f4c0b3 30%,#eeb5a7 72%,#ce9689)}.physical-tool--eraser .tool-barrel{border-top:8px solid #a8a8a5;top:36px}.drawing-controls .drawing-launch{position:relative;width:64px;border-radius:50%;overflow:hidden}.drawing-launch .physical-tool{bottom:-26px}.size-button>span{display:block;border-radius:50%;background:var(--ink)}.color-ring{display:grid;place-items:center;width:29px;height:29px;padding:3px;border-radius:50%;background:conic-gradient(#ef555b,#ffdb61,#71c571,#30b4cf,#6f5ad4,#de77af,#ef555b)}.color-ring>span{display:block;width:100%;height:100%;border:3px solid var(--tray);border-radius:50%}.drawing-pill--stroke{width:560px}.stroke-sliders{display:flex;gap:28px;padding:0 10px;flex:1;min-width:0}.stroke-sliders label{display:flex;flex-direction:column;gap:6px;flex:1;min-width:0}.stroke-sliders label>span{display:flex;justify-content:space-between;color:var(--control);font-size:12px}.stroke-sliders output{color:var(--ink);font-variant-numeric:tabular-nums}.stroke-sliders input{width:100%;height:20px;accent-color:var(--ink);cursor:pointer}.color-strip{display:flex;overflow-x:auto;scrollbar-width:thin;max-width:620px}.color-strip button>span{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;box-shadow:inset 0 0 0 1px #00000020}.color-strip button[aria-pressed=true]>span{outline:2px solid var(--control);outline-offset:3px}.color-strip svg{width:18px;height:18px;color:white;filter:drop-shadow(0 1px 1px #000)}.custom-color{position:relative;width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;cursor:pointer}.custom-color input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer}.custom-color:focus-within{outline:2px solid #748aab;border-radius:50%}.canvas-announcement{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media (max-width:700px){.drawing-pill{padding:0 10px;gap:0;height:76px}.pill-divider{margin:0 4px}.drawing-controls .physical-tool-button{width:44px}.drawing-controls .restore-button{display:none}.drawing-pill--tools{flex-wrap:wrap;height:auto;padding:0 12px 6px;border-radius:30px;width:340px}.drawing-pill--tools .physical-tools{order:-1;width:100%;height:76px;justify-content:center;border-bottom:1px solid #88888818;margin-bottom:3px}.drawing-pill--tools>.pill-divider{display:none}.stroke-sliders{gap:14px;padding:0 4px}.drawing-controls{right:20px;bottom:max(20px,env(safe-area-inset-bottom))}.portfolio.drawing-board{padding-bottom:180px}}@media (prefers-reduced-motion:reduce){.drawing-controls button,.physical-tool{transition:none}}.tool-barrel{left:0}.drawing-controls .restore-inline{display:none}@media (max-width:700px){.drawing-controls .restore-inline{display:grid;align-self:center}}.stroke-sliders input{appearance:none;-webkit-appearance:none;height:10px;margin:7px 0;background:#dededb;border-radius:10px}.stroke-sliders input[aria-label="Ink opacity"]{background:linear-gradient(90deg,#292929,#b8b8b8)}.stroke-sliders input::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:20px;height:20px;border:1px solid #c5c5c2;border-radius:50%;background:#fff;box-shadow:0 2px 4px #00000020}.stroke-sliders input::-moz-range-thumb{width:20px;height:20px;border:1px solid #c5c5c2;border-radius:50%;background:#fff;box-shadow:0 2px 4px #00000020}.drawing-controls{--tray:#f0ede5;--tray-edge:#fffdf7;--control:#79776e}.dark .drawing-controls{--tray:#34332e;--tray-edge:#514f46;--control:#c1bdb0}.drawing-controls .drawing-launch,.drawing-pill{background:var(--tray);border:1px solid #a49d863d;box-shadow:inset 0 2px 0 var(--tray-edge),0 4px 0 color-mix(in srgb,var(--tray) 80%,#77705c),0 10px 24px #37302212}.drawing-pill{border-radius:18px 21px 16px 19px;gap:5px;padding:0 17px;height:92px}.drawing-controls button{border-radius:9px}.drawing-controls button:hover:not(:disabled){background:#a69b7820}.pill-divider{background:#9b937044;height:22px;transform:rotate(4deg)}.physical-tool{width:19px;height:84px;bottom:-18px;filter:drop-shadow(2px 2px 1px #62543520)}.physical-tool-button:first-child .physical-tool{rotate:-5deg}.physical-tool-button:nth-child(2) .physical-tool{rotate:3deg}.physical-tool-button:nth-child(3) .physical-tool{rotate:-2deg}.physical-tool-button:nth-child(4) .physical-tool{rotate:5deg}.tool-barrel{border-top:3px solid #857451;background:linear-gradient(90deg,#cfb86e 0 28%,#e8d58e 28% 70%,#c5ac62 70%)}.tool-barrel:after{content:"";position:absolute;inset:12px 5px auto;height:18px;border-top:1px solid #ffffff8c;border-bottom:1px solid #ffffff8c}.physical-tool--pen .tool-barrel{background:linear-gradient(90deg,#5e7e87 0 28%,#82a2a9 28% 70%,#607f89 70%);border-top-color:#3c535c}.physical-tool--marker{width:25px}.physical-tool--marker .tool-barrel{background:linear-gradient(90deg,#b59383 0 25%,#d5b4a2 25% 75%,#b99685 75%);border-top:5px solid var(--ink-color)}.physical-tool--eraser{width:25px}.physical-tool--eraser .tool-tip{border-radius:4px 5px 0 0;background:#cda89f}.physical-tool--eraser .tool-barrel{background:#e6ddc7;border-top:5px solid #9a9f88}.physical-tool--eraser .tool-barrel:after{border-color:#b1a78d}.physical-tool-button[aria-pressed=true]:after{content:"";position:absolute;bottom:3px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:var(--ink)}.color-ring{border-radius:45% 48% 43% 46%;background:conic-gradient(#c97c79,#e2c675,#91a47d,#73a2aa,#9384b0,#c97c79);transform:rotate(-8deg)}.color-ring>span{border-radius:43% 47% 45% 41%;border-width:2px;border-color:var(--tray)}.color-strip button>span{border-radius:45% 42% 39% 47%;transform:rotate(-4deg)}.color-strip button:nth-child(2n)>span{transform:rotate(6deg);border-radius:38% 45% 42% 40%}.drawing-controls .drawing-launch{border-radius:18px 21px 17px 20px;transform:rotate(-6deg);width:60px;height:64px}.drawing-controls .drawing-launch:hover{transform:rotate(-2deg)}.drawing-launch .physical-tool{rotate:12deg;bottom:-23px}.stroke-sliders label>span{font-family:Bradley Hand,Segoe Print,cursive;font-size:14px}.stroke-sliders output{font-family:-apple-system,BlinkMacSystemFont,sans-serif;font-size:12px}.stroke-sliders input{background:#d8d1be}.stroke-sliders input::-webkit-slider-thumb{background:#faf6e9;border-color:#bcb294}.stroke-sliders input::-moz-range-thumb{background:#faf6e9;border-color:#bcb294}@media (max-width:700px){.drawing-pill{padding:0 10px;gap:0;height:80px}.drawing-pill--tools{height:auto;padding:0 12px 6px;border-radius:18px 21px 16px 19px}.drawing-pill--tools .physical-tools{height:78px}}