/* Vego · Vegobot · the drawnut page (its own page in Projects). The owner's fourth picture (27 Oct 17:59), drawn for a
   375-point phone: the page grey #F6F7F9, dark type, drawnut's greens; the logo and the icons set in from the page's
   margin, the banner, the photo card, drawnut's square and some lines running off the screen's edge (each of those
   boxes ends at the screen's edge and clips what is past it, so the page is never wider than the screen). */
/* his fonts (OFL, app/fonts/README.txt): Outfit for craft. and your canvas, Roboto (his phone's own font) for the small words */
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url("/fonts/Outfit-latin-var.woff?v=91ada02c73") format("woff")}
/* Roboto is the whole app's font: its @font-face is in css/shared/fonts.css */
.vcp{--vcp-ink:#0A0A0A;--vcp-dim:#6B7280;--vcp-green:#08B932;--vcp-green-ink:#0A7A3C;--vcp-line:#E3E4E8;--vcp-vline:#DBDEE8;--vcp-out:Outfit,Sora,Inter,system-ui,sans-serif;--vcp-rob:Roboto,Inter,system-ui,sans-serif;
  /* the page's own margin (main's): what runs off the edge reaches the screen's edge and stops there */
  --pad:16px;position:relative;display:flex;flex-direction:column;width:100%;padding:8px 0 24px;color:var(--vcp-ink);container-type:inline-size}
.vcp-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* one left margin for everything (owner 27 Oct 18:28: "left alignment for icons and words proper"): the logo, the banner,
   the first icon of each row, your canvas, What's New. and the photo card all start on the page's margin */
/* drawnut's logo; its square large at the top right, half off the screen (in the dark theme the word turns white) */
.vcp-top{position:relative;display:flex;align-items:center;height:60px;margin-inline-end:calc(-1 * var(--pad));overflow:hidden}
.vcp-logo{line-height:0}
/* drawnut's logo (owner 27 Oct 20:56, his new logo): his pill with the knot, then "drawnut / CAD made simple." — white
   words in the dark look; his pill again at the right, a third of it past the screen's edge */
.vcp-logo img{display:block;width:150px;height:auto}
.vcp-logo .lg-w{display:none}
html[data-theme="dark"] .vcp-logo .lg-d{display:none}
html[data-theme="dark"] .vcp-logo .lg-w{display:block}
.vcp-mark{position:absolute;top:7px;inset-inline-end:-26px;width:78px;height:46px;line-height:0}
.vcp-mark img{display:block;width:100%;height:100%}
/* thin lines: from the left edge fading out, or coming in from the right, as in his picture */
.vcp-rule{height:1px;margin:0;border:0;background:linear-gradient(90deg,#E3E4E8 0 38%,rgba(227,228,232,0) 66%)}
.vcp-rule.r1,.vcp-rule.r3{margin-inline-start:calc(-1 * var(--pad))}
.vcp-rule.r2,.vcp-rule.r4{margin-inline-end:calc(-1 * var(--pad));background:linear-gradient(90deg,rgba(227,228,232,0) 0 34%,#E3E4E8 58% 100%)}
.vcp-rule.r2{margin-top:28px}
.vcp-rule.r3{margin-top:18px;background:linear-gradient(90deg,#E3E4E8 0 52%,rgba(227,228,232,0) 90%)}
.vcp-rule.r4{margin-top:16px}
html[dir="rtl"] .vcp-rule{transform:scaleX(-1)}
/* craft. LEARN TIPS: dark green with his lotus, his bulb on black at the right, running off the right edge (a picture:
   the same way round in Arabic) */
.vcp-craft{position:relative;display:block;height:81px;margin:12px calc(-1 * var(--pad)) 0 0;padding:0;border:0;border-start-start-radius:13px;border-end-start-radius:13px;overflow:hidden;cursor:pointer;text-align:start;color:#fff;direction:ltr;
  background:linear-gradient(90deg,rgba(9,9,9,0) 0 58%,#090909 66% 100%),radial-gradient(120% 170% at 6% 118%,#0E8A57 0%,#097048 28%,#0B4A30 55%,#0F2A1F 82%,#0E1F18 100%)}
.vcp-lotus{position:absolute;left:27%;bottom:-6px;width:38%;height:94%;line-height:0;pointer-events:none}
.vcp-lotus svg{width:100%;height:100%}
.vcp-cw{position:absolute;left:20px;top:21px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.vcp-cw b{font-family:var(--vcp-out);font-size:29px;line-height:.9;font-weight:500;letter-spacing:-.01em;color:#fff}
.vcp-cw i{display:block;padding:2px 6px 2px 7px;background:#29B554;color:#fff;font-style:normal;font-family:var(--vcp-rob);font-size:8.6px;line-height:1.05;font-weight:500;letter-spacing:.24em;white-space:nowrap}
.vcp-cbk{position:absolute;top:0;bottom:0;left:77%;line-height:0;pointer-events:none}
.vcp-bulb{display:block;height:88%;width:auto}
.vcp-craft:active{transform:scale(.99)}
/* his icons four to a row at 50 px (owner 27 Oct 16:25; 28 Oct 02:57 "50"), the first and the last of a row on the page's margins, a thin
   line between the columns; a word is centred under its icon, at most the space between two icons wide (82 px at most, so
   the first and last names stay inside the screen with 50 px icons) (the grid is the
   icons' own width: nothing reaches past the screen's sides — owner 27 Oct 15:46). The four lower icons share the
   columns of the eight above. */
.vcp-grid{display:grid;grid-template-columns:repeat(4,50px);justify-content:space-between;row-gap:12px;margin:21px 0 0;container-type:inline-size}
.vcp-ic{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0;padding:0;border:0;background:none;font:inherit;text-align:center;cursor:pointer;color:#1F2328;-webkit-tap-highlight-color:transparent}
.vcp-ic:not(:nth-child(4n))::after{content:"";position:absolute;top:10px;inset-inline-end:-12px;inset-inline-end:calc((200px - 100cqw) / 6);width:1px;height:38px;background:var(--vcp-vline)}
.vcp-ii{position:relative;display:block;width:50px;max-width:100%;aspect-ratio:1;border-radius:15px;box-shadow:0 6px 14px rgba(27,36,64,.14)}
.vcp-ii img,.vcp-ii svg{display:block;width:100%;height:100%;border-radius:15px}
/* his own home icons (29 Oct 07:08): squircles with see-through corners; the shadow follows their outline */
.vcp-ii.hi{border-radius:17px;box-shadow:none}
.vcp-ii.hi img{border-radius:0;filter:drop-shadow(0 5px 7px rgba(27,36,64,.16))}
.vcp-ic b{font-family:var(--vcp-rob);font-size:12.5px;line-height:1.25;font-weight:600;letter-spacing:0;color:#1B2440;overflow-wrap:break-word;hyphens:auto;width:max-content;max-width:82px;max-width:min(82px,calc((100cqw - 200px) / 3 + 50px))}
.vcp-g2{margin-top:16px}
/* your canvas >>>> the Drawings folder; What's New. under the canvas */
.vcp-mid{display:grid;grid-template-columns:minmax(0,1fr) 100px;grid-template-areas:"cv folder" "new folder";column-gap:12px;align-items:start}
.vcp-cv{grid-area:cv;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-width:0;padding-top:16px}
.vcp-canvas{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0;border:0;background:none;cursor:pointer;color:#0A0A0A;text-align:start}
.vcp-cvw{position:relative;display:flex;flex-direction:column;font-family:var(--vcp-out);line-height:1;color:#0A0A0A}
.vcp-cvw .c1{font-size:19px;font-weight:400;letter-spacing:-.005em}
.vcp-cvw .c2{font-size:20.5px;font-weight:700;letter-spacing:-.01em}
/* his pencil leans on the end of the words */
.vcp-pencil{position:absolute;top:-9px;inset-inline-start:calc(100% + 1px);width:37px;height:auto;pointer-events:none}
html[dir="rtl"] .vcp-pencil{transform:scaleX(-1)}
/* one line of words (other languages): a smaller pencil, so it stays clear of DRAW | ELEVATE | LEARN */
html:not([lang="en"]) .vcp-pencil{top:-13px;width:27px}
.vcp-canvas small{margin-top:9px;font-family:var(--vcp-rob);font-size:9.6px;line-height:1;font-weight:400;letter-spacing:.07em;color:#0A0A0A;white-space:pre}
.vcp-arrows{flex:none;width:34px;height:15.6px;margin-bottom:-1px}
html[dir="rtl"] .vcp-arrows{transform:scaleX(-1)}
.vcp-new{grid-area:new;justify-self:start;width:auto;min-width:108px;height:28px;margin-top:14px;padding:0 14px;border:1.5px solid #DAE1EC;border-radius:999px;background:rgba(255,255,255,.72);color:#0A0A0A;cursor:pointer;font-family:var(--vcp-rob);font-size:12.5px;line-height:1;font-weight:400;white-space:nowrap;box-shadow:0 6px 14px -8px rgba(30,60,120,.25),inset 0 1px 0 #fff}
.vcp-new b{font-weight:700}
.vcp-folder{grid-area:folder;position:relative;align-self:center;width:100px;margin-top:16px;padding:0;border:0;background:none;cursor:pointer;line-height:0;filter:drop-shadow(0 10px 12px rgba(46,180,60,.28))}
.vcp-fi svg{display:block;width:100px;height:80px}
.vcp-folder b{position:absolute;inset-inline-start:10px;bottom:13px;font-family:var(--vcp-rob);font-size:12.5px;line-height:1.2;font-weight:500;letter-spacing:.01em;color:#fff;white-space:nowrap;max-width:86px;overflow:hidden;text-overflow:ellipsis}
/* the photo card: the camera at its top left, "Easiest Choice by all means." set to the right, running off the right edge */
.vcp-photo{position:relative;display:block;min-height:74px;margin:10px calc(-1 * var(--pad)) 0 0;padding:28px 25px 17px 20px;border:0;border-start-start-radius:14px;border-end-start-radius:14px;background:linear-gradient(90deg,#ECEDF0 0%,#EBEBEE 55%,#EEEFF2 100%);cursor:pointer;text-align:end;color:#0A0A0A}
html[dir="rtl"] .vcp-photo{margin:10px 0 0 calc(-1 * var(--pad))}
.vcp-cam{position:absolute;top:17px;inset-inline-start:20px;width:26px;height:20px;line-height:0;color:#0A0A0A}
.vcp-cam svg{width:100%;height:100%}
.vcp-easy{display:flex;flex-direction:column;align-items:flex-end;gap:5px;margin:0;font-family:var(--vcp-rob);color:#0A0A0A;text-align:end}
.vcp-easy b{font-size:12.5px;line-height:1.2;font-weight:700;letter-spacing:.02em}
.vcp-easy span{font-size:11.6px;line-height:1.3;font-weight:400;letter-spacing:.02em}
p.vcp-easy{margin-top:16px}
.vcp-ic:active .vcp-ii,.vcp-folder:active,.vcp-new:active,.vcp-photo:active{transform:scale(.97)}
.vcp-t:focus-visible,.vcp-desk button:focus-visible{outline:2px solid #08B932;outline-offset:3px;border-radius:12px}
.vcp-off{margin:0;color:var(--vcp-dim);font-size:14px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.vcp-ic:active .vcp-ii,.vcp-folder:active,.vcp-new:active,.vcp-photo:active,.vcp-craft:active{transform:none}}
/* a tablet or a computer (owner 27 Oct 18:28: "not like a phone"): the parts across the screen — the logo and drawnut's
   square, a line; the banner and the photo card side by side; the twelve icons six to a row; your canvas, the arrows,
   the Drawings folder and What's New. in one white band. Nothing runs off the edges here. */
@media (min-width:700px){
  .vcp{--pad:0px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));column-gap:28px;align-items:start;max-width:1120px;margin-inline:auto;padding:12px 0 40px;
    grid-template-areas:"top top top top top top" "r1 r1 r1 r1 r1 r1" "craft craft craft craft photo photo" "g1 g1 g1 g1 g1 g1" "all all all all all all" "mid mid mid mid gauge gauge"}
  .vcp-top{grid-area:top;height:76px;margin:0;overflow:visible}
  .vcp-logo img{width:196px}
  .vcp-mark{position:static;width:78px;height:46px;margin-inline-start:auto}
  .vcp-rule.r1{grid-area:r1;margin:0;background:#E3E4E8}
  .vcp-rule.r2,.vcp-rule.r3,.vcp-rule.r4{display:none}
  .vcp-craft{grid-area:craft;height:150px;margin:22px 0 0;border-radius:18px}
  .vcp-cw{left:34px;top:38px;gap:8px}
  .vcp-cw b{font-size:46px}
  .vcp-cw i{font-size:11px;padding:3px 9px 3px 10px}
  .vcp-bulb{height:86%}
  .vcp-photo{grid-area:photo;display:flex;flex-direction:column;justify-content:flex-end;height:150px;min-height:0;margin:22px 0 0;padding:24px;border-radius:18px;background:linear-gradient(160deg,#EEF0F3 0%,#E9EBEE 100%)}
  .vcp-cam{top:24px;inset-inline-start:24px;width:32px;height:25px}
  .vcp-easy b{font-size:15px}
  .vcp-easy span{font-size:13px}
  .vcp-grid{justify-content:stretch;justify-items:center;row-gap:24px;margin:34px 0 0}
  .vcp-g1{grid-area:g1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .vcp-g2{grid-area:g2;grid-template-columns:repeat(2,minmax(0,1fr))}
  .vcp-ic::after{display:none}
  .vcp-ii{width:50px}
  .vcp-ic b{font-size:13.5px;max-width:120px}
  .vcp-mid{grid-area:mid;align-self:center;display:flex;align-items:center;gap:28px;margin-top:36px;padding:20px 28px;border-radius:18px;background:#fff;box-shadow:0 12px 30px -20px rgba(16,24,40,.3),0 1px 2px rgba(16,24,40,.05)}
  .vcp-cv{flex:0 1 auto;gap:28px;padding:0}
  .vcp-folder{order:2;margin:0}
  .vcp-new{order:3;margin:0 0 0 auto;height:34px;padding:0 20px;font-size:14px}
  html[dir="rtl"] .vcp-new{margin:0 auto 0 0}
}
/* the drawings box (owner 28 Oct 01:53, his second picture, in the dial's place): a near-black frame with three tiles —
   the tall light one at the left (this month, its lower part darker up to the count, a small mark on the level), drawnut's
   green at the top right (all drawings), the slate one with the blue water under it (finished). After the craft. tips on a
   phone; beside your canvas on a tablet or computer */
.vcp-wdg{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);grid-template-rows:repeat(2,minmax(0,1fr));gap:7px;width:100%;height:176px;margin:18px 0 4px;padding:7px;border:0;border-radius:33px;background:#151515;font:inherit;text-align:start;cursor:pointer;box-shadow:0 18px 34px -24px rgba(0,0,0,.6)}
.vcp-wdg > span{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.vcp-wdg b{position:relative;font-family:var(--vcp-out);font-weight:400;line-height:1;letter-spacing:-.02em;white-space:nowrap}
.vcp-wdg b + span{position:relative;margin-top:5px;font-family:var(--vcp-rob);line-height:1.2;font-weight:500}
.wd-a{grid-row:1 / 3;padding:18px 16px;border-radius:27px;background:#E8E8EA;color:#66666C}
.wd-a b{font-size:42px;color:#7C7C82}
.wd-a b + span{font-size:14.5px;max-width:9em}
.wd-lv,.wd-w{position:absolute;inset:0;width:100%;height:100%}
.wd-lv rect{fill:#CBCBCF}
.wd-lv .wd-k{fill:#A3A3A8}
.wd-b,.wd-c{justify-content:center;padding:0 16px;border-radius:24px;color:#fff}
.wd-b{background:linear-gradient(205deg,#6BE24A 0%,#2CCF6C 48%,#15BD86 100%)}
.wd-c{background:#33444F}
.wd-w path{fill:#6CB3D8}
.wd-b b,.wd-c b{font-size:31px}
.wd-b b + span,.wd-c b + span{font-size:12.5px;color:rgba(255,255,255,.92)}
.wd-c b + span{color:#E4F3FB}
.vcp-wdg:active{transform:scale(.99)}
html[data-theme="dark"] .vcp-wdg{box-shadow:0 0 0 1px rgba(255,255,255,.08)}
@media (min-width:700px){
  .vcp-wdg{grid-area:gauge;align-self:center;margin:36px 0 0;height:172px}
}
/* the home as the owner's picture (28 Oct 02:33 "do this same"; 03:06 "tab view and desktop view as well"): his green with
   drawnut's knot and his bulb hanging into a card in the page's colour, on it his logo and "Design matters. Time Matters." /
   "Vision like a pro. Learn today."; his soft grey band; the Drawings row — the green folder, DRAW | LEARN over "Drawings",
   a blue What's New.; a line; his icons, 50 px, thin lines between them; a line; the canvas band (the shield, his words, the
   pencil cube); the lower icons; the search; the craft. tips with your learning; the drawings box; the footer. On a phone
   the top is one picture (home-hero.webp: the card see-through); on a tablet or computer the same parts across the screen
   (home-green-wide.webp, the card drawn, his bulb cut out on its own: home-bulb.webp). */
.vcp-hero,.vcp-drow{display:none}
.vcp-hbulb{display:none}
/* his three new icons (vego-cad-page.js VCP_OWN): the picture 1.3 times the tile wide and 1.7 times high with its own shadow,
   the tile in the middle; no frame or shadow of ours, the lamp and the sofa reaching past the tile */
.vcp-ii.own,.dns-home.own{border-radius:0;box-shadow:none;overflow:visible}
.vcp-ii.own img,.dns-home.own img{position:absolute;left:-15%;top:-35%;width:130%;height:170%;max-width:none;border-radius:0}
.dns-home.own{position:relative}
/* the parts every screen shares */
.vcp-hcard{position:absolute;display:block;padding:0;border:0;border-radius:0;background:none;color:#0A0A0A;font:inherit;text-align:start;cursor:pointer}
.vcp-hlogo{position:absolute;line-height:0}
.vcp-hlogo img{display:block;width:100%;height:auto}
.vcp-hlogo .lg-w{display:none}
.vcp-hw{position:absolute;display:flex;flex-direction:column;align-items:flex-start}
.vcp-hw b{display:block;font-family:var(--vcp-out);line-height:1.2;font-weight:400;letter-spacing:-.005em;color:#0A0A0A;white-space:nowrap}
.vcp-hw strong{font-weight:700}
.vcp-hw .h2{margin-top:-.04em}
.vcp-hw .h3{display:block;font-family:var(--vcp-rob);line-height:1.3;letter-spacing:.03em;color:#141414;white-space:nowrap}
.vcp-dfold{flex:none;width:62px;padding:0;border:0;background:none;line-height:0;cursor:pointer;filter:drop-shadow(0 8px 10px rgba(46,180,60,.26))}
.vcp-dfold .vcp-fi svg{display:block;width:100%;height:auto}
.vcp-dtx{display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:0;border:0;background:none;color:#0A0A0A;cursor:pointer;text-align:start}
.vcp-dtx small{font-family:var(--vcp-rob);font-size:10.5px;line-height:1.2;font-weight:500;letter-spacing:.06em;color:#1F2328}
.vcp-dtx b{font-family:var(--vcp-out);font-size:24px;line-height:1.15;font-weight:400;letter-spacing:-.01em;color:#0A0A0A;overflow-wrap:anywhere}
/* his blue What's New.: a glossy pill, a light rim, white words */
.vcp-new2{flex:none;margin-inline-start:auto;height:36px;padding:0 20px;border:1.5px solid #D6F2FF;border-radius:999px;background:linear-gradient(180deg,#0796D8 0%,#2A9EDC 30%,#52B2E4 55%,#8CC8EC 82%,#B4E3FC 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 7px 14px -8px rgba(4,149,216,.75);color:#fff;font-family:var(--vcp-rob);font-size:15px;font-weight:400;letter-spacing:.03em;white-space:nowrap;cursor:pointer}
.vcp-new2 b{font-weight:700}
/* the carousel (owner 29 Oct 06:00, his panels 01–03; vego-cad-page.js vcpCarousel): white cards in a row that scrolls
   sideways and snaps to a card — the number in his green with a short line after it, the title in capitals with its last
   word in green, the words under it in grey, his drawing at the right (white lines on the dark look); dots and pause under */
.vcp-car{--car-g:#12906A;min-width:0}
.vcp-cart{display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--pad,16px) 12px;scroll-padding-inline:var(--pad,16px)}
.vcp-cart::-webkit-scrollbar{display:none}
.vcp-cs{flex:0 0 86%;scroll-snap-align:start;display:flex;align-items:center;gap:10px;min-height:172px;box-sizing:border-box;padding:16px;padding-inline:18px 12px;border:1px solid #ECEDF0;border-radius:22px;background:#fff;box-shadow:0 12px 26px -22px rgba(16,24,40,.45);overflow:hidden}
.vcp-cst{flex:1 1 54%;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.vcp-csn{display:flex;align-items:center;gap:10px;font-family:var(--vcp-out);font-size:13px;line-height:1;font-weight:600;letter-spacing:.02em;color:var(--car-g)}
.vcp-csn::after{content:"";width:40px;height:1.5px;border-radius:1px;background:currentColor;opacity:.75}
.vcp-csh{display:block;font-family:var(--vcp-out);font-size:17px;line-height:1.14;font-weight:700;letter-spacing:.01em;text-transform:uppercase;color:#0B0B0B;overflow-wrap:break-word}
.vcp-csh em{display:block;font-style:normal;color:var(--car-g)}
.vcp-csd{font-family:var(--vcp-rob);font-size:12.5px;line-height:1.45;color:#45474D}
.vcp-csp{flex:0 1 44%;align-self:stretch;display:flex;align-items:center;justify-content:center;min-width:0}
.vcp-csp img{display:block;width:auto;height:auto;max-width:100%;max-height:140px;object-fit:contain}
.vcp-cdots{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:2px}
.vcp-cd{display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.vcp-cd i{display:block;width:7px;height:7px;border-radius:999px;background:#C9CFCC;transition:width .25s,background-color .25s}
.vcp-cd[aria-current="true"] i{width:20px;background:var(--car-g)}
.vcp-cpz{display:grid;place-items:center;width:28px;height:28px;margin-inline-start:6px;padding:0;border:1px solid #E1E4E2;border-radius:50%;background:#fff;color:#3E4A43;cursor:pointer}
.vcp-cpz svg{width:12px;height:12px;fill:currentColor;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.vcp-cpz .i-play,.vcp-cpz[aria-pressed="true"] .i-pause{display:none}
.vcp-cpz[aria-pressed="true"] .i-play{display:block}
.vcp-cpz .i-pause{fill:none}
@media (prefers-reduced-motion:reduce){
  .vcp-cd i{transition:none}
  .vcp-cpz{display:none}
}
html[data-theme="dark"] .vcp-car{--car-g:#4FD1A0}
html[data-theme="dark"] .vcp-cs{background:#16201B;border-color:rgba(255,255,255,.07);box-shadow:none}
html[data-theme="dark"] .vcp-csh{color:#E9F3ED}
html[data-theme="dark"] .vcp-csd{color:#B4C4BA}
html[data-theme="dark"] .vcp-csp img{filter:invert(1) hue-rotate(180deg) brightness(1.05)}
html[data-theme="dark"] .vcp-cd i{background:#3A4A41}
html[data-theme="dark"] .vcp-cd[aria-current="true"] i{background:var(--car-g)}
html[data-theme="dark"] .vcp-cpz{background:#1D2722;border-color:#2C3A32;color:#C9D6CE}
/* Malayalam, Tamil, Hindi and Arabic: the same card, the words a little smaller */
:is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-csh{font-size:15px;line-height:1.3;letter-spacing:0}
:is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-csd{font-size:12px}
@media (min-width:700px){
  .vcp-cart{padding:4px 2px 12px;scroll-padding-inline:2px}
  .vcp-cs{flex-basis:calc(50% - 6px);min-height:184px;padding:18px;padding-inline:22px 14px}
  .vcp-csh{font-size:18.5px}
  .vcp-csd{font-size:13px}
  .vcp-csp img{max-height:150px}
}
html[data-theme="dark"] .vcp-hcard,html[data-theme="dark"] .vcp-hw b,html[data-theme="dark"] .vcp-hw .h3,html[data-theme="dark"] .vcp-dtx,html[data-theme="dark"] .vcp-dtx b,html[data-theme="dark"] .vcp-dtx small{color:#E9F3ED}
html[data-theme="dark"] .vcp-hlogo .lg-d{display:none}
html[data-theme="dark"] .vcp-ic b{color:#D7E2DB}
html[data-theme="dark"] .vcp-hlogo .lg-w{display:block}
@media (max-width:699px){
  .vcp{padding-top:0}
  .vcp > .vcp-title{order:0}
  .vcp-hero{order:1;position:relative;display:block;margin:-8px calc(-1 * var(--pad)) 0;aspect-ratio:882 / 679;container-type:inline-size;
    background:url("/img/drawnut/home-hero.webp?v=55fb9aa8a4") center top / 100% auto no-repeat,linear-gradient(90deg,#F8F6F7 0%,#F1EFF0 25%,#EBE9EA 50%,#EBEBEC 70%,#F2F3F5 100%) center bottom / 100% 9.72% no-repeat}
  .vcp-hcard{left:5.67%;right:6.35%;top:47%;bottom:9.72%}
  .vcp-hlogo{left:7.1%;top:14.4%;width:25%}
  .vcp-hw{left:37.4%;right:0;top:33%}
  .vcp-hw b{font-size:5.85cqw}
  .vcp-hw .h3{margin-top:2.2cqw;font-size:2.75cqw}
  .vcp-drow{order:2;display:flex;align-items:center;gap:14px;padding:12px 0 14px}
  .vcp-rule.r1{order:3;background:linear-gradient(90deg,#D6D7D9 0 52%,rgba(214,215,217,0) 80%)}
  .vcp-g1{order:4;position:relative;row-gap:26px;margin-top:26px}
  /* the faint line between his two rows, coming in from the right */
  .vcp-g1::before{content:"";position:absolute;top:50%;left:30%;right:calc(-1 * var(--pad));height:1px;background:linear-gradient(90deg,rgba(223,224,226,0),#DFE0E2 60%,#DADBDD)}
  .vcp-rule.r2{order:5;margin:18px calc(-1 * var(--pad)) 0;background:#D6D7D9}
  .vcp-rule.r3{display:none!important}
  /* the carousel: from the screen's left edge to its right, one card with the next peeking */
  .vcp-car{order:6;margin:16px calc(-1 * var(--pad)) 0}
  .vcp-g2{order:7;margin-top:24px}
  .vcp-rule.r4{order:8;margin-top:18px}
  .vcp-search{order:9;margin-top:18px}
  .vcp-craft{order:10;margin-top:12px}
  .vcp-desk{order:11}
  .vcp-wdg{order:12}
  .vcp-foot{order:13}
  .vcp-top,.vcp-mid,.vcp-photo,.vcp-easy{display:none!important}
  html[data-theme="dark"] .vcp-hero{background:url("/img/drawnut/home-hero.webp?v=55fb9aa8a4") center top / 100% auto no-repeat,linear-gradient(90deg,#15191B,#1B2022 50%,#16191B) center bottom / 100% 9.72% no-repeat}
  /* Malayalam, Tamil, Hindi and Arabic words are longer: the two lines may wrap inside the card, a little smaller */
  :is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-hw b{font-size:4.3cqw;white-space:normal;line-height:1.3}
  :is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-hw .h3{font-size:2.7cqw;white-space:normal;letter-spacing:0}
  /* the blue What's New. beside the longer words of the Drawings row */
  :is([lang=ml],[lang=ta],[lang=hi]) .vcp-new2{height:34px;padding:0 13px;font-size:13px;letter-spacing:0}
}
:is([lang=ml],[lang=ta]) .vcp-dtx b{font-size:20px}
@media (max-width:380px){
  :is([lang=ml],[lang=ta]) .vcp-dtx b{font-size:17px}
  :is([lang=ml],[lang=ta]) .vcp-drow{gap:10px}
  :is([lang=ml],[lang=ta]) .vcp-dfold{width:52px}
}
/* drawnut's search (owner 27 Oct 23:04, his picture): on the home a white field under the logo (in the top row between
   the logo and the pill on a tablet / computer); the panel — the field with its ×, a white box with Recent / Clear all or
   the results (the home's icons, a title and a line; a red bin to remove a recent one), the groups as soft pills with their
   counts at the bottom */
.vcp-search{display:flex;align-items:center;gap:10px;width:100%;height:46px;margin:2px 0 12px;padding:0 16px;border:0;border-radius:16px;background:#fff;color:#7B818C;font:inherit;font-size:14.5px;text-align:start;cursor:pointer;box-shadow:0 10px 24px -18px rgba(16,24,40,.35),0 0 0 1px rgba(16,24,40,.06)}
.vcp-search svg{flex:none;width:19px;height:19px;fill:none;stroke:#1F2328;stroke-width:2.2;stroke-linecap:round}
.vcp-search span{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[data-theme="dark"] .vcp-search{background:#1A201C;color:#9DB0A5;box-shadow:0 0 0 1px rgba(255,255,255,.06)}
html[data-theme="dark"] .vcp-search svg{stroke:#E9F3ED}
@media (min-width:700px){
  .vcp-search{grid-area:srch;justify-self:end;align-self:center;position:relative;z-index:1;width:min(440px,100%);margin:0}
}
#sheet[data-mode="dnsearch"]{background:#F4F5F6}
.dns{display:flex;flex-direction:column;gap:12px;min-height:0;height:100%;padding:14px 14px 16px;box-sizing:border-box}
.dns-top{display:flex;align-items:center;gap:12px;height:50px;padding:0 4px 0 12px}
.dns-top > svg{flex:none;width:22px;height:22px;fill:none;stroke:#1F2328;stroke-width:2.2;stroke-linecap:round}
.dns-top input{flex:1 1 auto;min-width:0;height:44px;border:0;outline:0;background:transparent;color:#111;font:inherit;font-size:17px;caret-color:#0A9F4D}
.dns-top input::placeholder{color:#A3A8B0}
html body #sheet[data-mode="dnsearch"] .dns-top input#dns-q{border:0!important;outline:0!important;box-shadow:none!important;background:transparent!important;padding:0!important;min-height:0!important;border-radius:0!important}
.dns-top input::-webkit-search-cancel-button{display:none}
.dns-x{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#E6E8EB;cursor:pointer}
.dns-x svg{width:18px;height:18px;fill:none;stroke:#3A3F45;stroke-width:2.2;stroke-linecap:round}
.dns-box{flex:1 1 auto;min-height:0;overflow:auto;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 14px 30px -24px rgba(16,24,40,.35)}
.dns-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 10px;font-size:13.5px;color:#8A8F98}
.dns-h button{border:0;background:none;padding:4px 0;color:#0A9F4D;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.dns-row{display:flex;align-items:center;border-top:1px solid #EEF0F2}
.dns-list > .dns-row:first-child{border-top:0}
.dns-h + .dns-list > .dns-row:first-child{border-top:1px solid #EEF0F2}
.dns-go{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:14px;padding:12px 16px;border:0;background:none;font:inherit;text-align:start;cursor:pointer}
.dns-go:hover{background:#FAFAFB}
.dns-ic{flex:none;display:block;width:46px;height:46px}
.dns-ic img,.dns-ic svg,.dns-home > *{display:block;width:100%;height:100%}
.dns-home{border-radius:12px;overflow:hidden}
.dns-tx{min-width:0}
.dns-tx b{display:block;font-size:15px;line-height:1.3;font-weight:600;color:#111;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dns-tx small{display:block;margin-top:2px;font-size:13px;line-height:1.35;color:#6B7280;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dns-rm{flex:none;display:grid;place-items:center;width:44px;height:44px;margin-inline-end:6px;border:0;border-radius:12px;background:none;cursor:pointer}
.dns-rm svg{width:19px;height:19px;fill:none;stroke:#E5574D;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dns-rm:hover{background:#FDECEB}
.dns-empty{margin:0;padding:26px 18px;font-size:14px;color:#8A8F98;text-align:center}
.dns-chips{flex:none;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.dns-chips::-webkit-scrollbar{display:none}
.dns-chip{flex:none;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 7px;border:0;border-radius:999px;color:#1F2328;font:inherit;font-size:14.5px;font-weight:500;white-space:nowrap;cursor:pointer;background:linear-gradient(135deg,#E3ECE6,#CFDDD4)}
.dns-chip i{display:grid;place-items:center;min-width:28px;height:28px;padding:0 6px;box-sizing:border-box;border-radius:999px;background:rgba(255,255,255,.8);font-style:normal;font-size:13px;font-weight:600}
.dns-chip i:empty{display:none}
.dns-chip:has(i:empty){padding-inline-start:18px}
.dns-c-designs{background:linear-gradient(135deg,#CFF3DB,#97E2B2)}
.dns-c-drawings{background:linear-gradient(135deg,#ECF8CA,#CDEB8C)}
.dns-c-library{background:linear-gradient(135deg,#D3F1ED,#A2DFD7)}
.dns-c-tips{background:linear-gradient(135deg,#FFE5C4,#FFC88C)}
.dns-chip.on{box-shadow:inset 0 0 0 2px rgba(10,60,30,.35)}
html[data-theme="dark"] #sheet[data-mode="dnsearch"]{background:#0F1311}
html[data-theme="dark"] .dns-box{background:#1A201C}
html[data-theme="dark"] .dns-top input,html[data-theme="dark"] .dns-tx b{color:#E9F3ED}
html[data-theme="dark"] .dns-top > svg{stroke:#E9F3ED}
html[data-theme="dark"] .dns-row,html[data-theme="dark"] .dns-h + .dns-list > .dns-row:first-child{border-color:rgba(255,255,255,.07)}
html[data-theme="dark"] .dns-go:hover{background:rgba(255,255,255,.03)}
@media (min-width:820px){
  #sheet[data-mode="dnsearch"]{width:min(560px,92vw);height:min(640px,86vh);border-radius:28px}
  .dns{padding:16px 16px 18px}
}
/* the Library, what's new and tips at the bottom (owner 27 Oct 18:46); the tips on a phone too (28 Oct 03:06) */
@media (max-width:699px){
  .vcp-desk{display:block;margin-top:16px}
  .vcp-dlib,.vcp-dnews,.vcp-dtips > h2.dn-sec{display:none}
}
@media (min-width:700px){
  .vcp-desk{grid-area:desk;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-areas:"lib lib lib lib news news" "tips tips tips tips tips tips";column-gap:28px;row-gap:32px;margin-top:40px}
  .vcp-dk h2{margin:0 0 14px;font-family:var(--vcp-out);font-size:19px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:#0A0A0A}
  .vcp-dlib{grid-area:lib}
  .vcp-dnews{grid-area:news}
  .vcp-dtips{grid-area:tips}
  .vcp-lbs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vcp-lb{display:flex;align-items:flex-start;gap:12px;padding:14px;border:1px solid #E8EAEE;border-radius:16px;background:#fff;text-align:start;cursor:pointer;color:#0A0A0A;box-shadow:0 8px 20px -18px rgba(16,24,40,.35)}
  .vcp-lb:hover{border-color:#BFE8CB}
  .vcp-lb span{display:flex;flex-direction:column;gap:3px;min-width:0}
  .vcp-lb b{font-size:14px;line-height:1.3;font-weight:600}
  .vcp-lb small{font-size:12px;line-height:1.35;color:#6B7280}
  .vcp-dnews .dn-news{gap:8px}
  .vcp-dnews .dn-nw{padding:10px 12px;border-radius:12px;background:#fff;border-color:#E8EAEE}
  .vcp-dnews .dn-nw b{font-size:13px}
  .vcp-tps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:14px}
  .vcp-dtips .dn-prog{max-width:560px}
}
@media (min-width:700px) and (max-width:1023px){
  .vcp-desk{grid-template-areas:"lib lib lib lib lib lib" "news news news news news news" "tips tips tips tips tips tips"}
  .vcp-tps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* the tips (owner 28 Oct 03:06 "tips needed as well"): white cards, a number that becomes a green tick once learned, the
   tip's own button and Learned / Mark as learned; on a phone a row to swipe, on a tablet or computer four to a row */
.vcp-tp{position:relative;display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;background:#fff;border:1px solid #E6EAE8;box-shadow:0 10px 24px -20px rgba(16,24,40,.35)}
.vcp-tp.on{background:linear-gradient(160deg,#EFFAF2 0%,#FFFFFF 70%);border-color:#CDEFD8}
.vcp-tpn{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#EEF1EF;color:#1F2328;font-size:13px;font-weight:700}
.vcp-tpn svg{width:15px;height:15px}
.vcp-tp.on .vcp-tpn{background:#12C35E;color:#fff}
.vcp-tp b{font-size:14.5px;line-height:1.3;font-weight:600;color:#0A0A0A}
.vcp-tp p{margin:0;font-size:12.5px;line-height:1.45;color:#4B5563;flex:1}
.vcp-tpf{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:4px}
.vcp-tp .rl-go{padding:0;border:0;background:none;color:#0A7A3C;font-weight:600;font-size:13px;cursor:pointer}
.vcp-tpf .dn-lbtn{margin-inline-start:auto}
.vcp-dall{margin-top:10px;padding:0;border:0;background:none;color:#0A7A3C;font-weight:600;font-size:13px;cursor:pointer}
@media (max-width:699px){
  .vcp-tps{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:12px calc(-1 * var(--pad)) 0;padding:4px var(--pad) 12px;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .vcp-tps::-webkit-scrollbar{display:none}
  .vcp-tp{flex:0 0 78%;scroll-snap-align:start}
}
/* Learned / Mark as learned: a small pill, green once learned */
.dn-lbtn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;border:1px solid #D9E2DC;border-radius:999px;background:#fff;color:#3E4A43;font:inherit;font-size:12.5px;font-weight:600;white-space:nowrap;cursor:pointer}
.dn-lbtn svg{width:14px;height:14px;color:#A4B0A8}
.dn-lbtn .l-on,.dn-lbtn.on .l-off{display:none}
.dn-lbtn.on .l-on{display:inline}
.dn-lbtn.on{background:#E6F8EC;border-color:#BDE9CB;color:#0A7A3C}
.dn-lbtn.on svg{color:#0BB85C}
/* your learning (owner 28 Oct 03:06 "a percentage monitor"): the share learned on a green ring, how many of how many, the
   next one and Continue */
.dn-prog{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;background:#fff;box-shadow:0 12px 28px -22px rgba(16,24,40,.4),0 0 0 1px rgba(16,24,40,.05)}
.dn-pin{display:flex;align-items:center;gap:14px;flex:1 1 auto;min-width:0}
.dn-ring{position:relative;flex:none;width:64px;height:64px}
.dn-ring svg{display:block;width:100%;height:100%;transform:rotate(-90deg)}
[dir="rtl"] .dn-ring svg{transform:rotate(-90deg) scaleY(-1)}
.dn-ring circle{fill:none;stroke-width:5.5}
.dn-ring .tr{stroke:#E3F3E8}
.dn-ring .fg{stroke:#12C35E}
.dn-ring b{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--vcp-out);font-size:17px;font-weight:600;color:#0A0A0A}
.dn-pw{display:flex;flex-direction:column;gap:2px;min-width:0}
.dn-pw b{font-family:var(--vcp-out);font-size:16px;line-height:1.25;font-weight:600;color:#0A0A0A}
.dn-pw small{font-size:12.5px;line-height:1.35;color:#5B6B62}
.dn-pnext{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.dn-pgo{flex:none;height:36px;padding:0 14px;border:0;border-radius:999px;background:#0B5B2C;color:#fff;font:inherit;font-size:13px;font-weight:600;white-space:nowrap;cursor:pointer}
.dn-prog-s{margin:0 0 16px;background:#F1FAF4;box-shadow:none}
.dn-learn .dn-lbtn{margin-top:8px}
.dn-ta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 10px;margin-top:8px}
.dn-tq{display:none;flex:none;place-items:center;width:20px;height:20px;margin-inline:auto 8px;border-radius:50%;background:#12C35E;color:#fff}
.dn-tq.on{display:grid}
.dn-tq svg{width:12px;height:12px}
html[data-theme="dark"] .vcp-tp,html[data-theme="dark"] .dn-prog{background:#16201B;border-color:rgba(255,255,255,.07);box-shadow:none}
html[data-theme="dark"] .vcp-tp.on{background:#173022}
html[data-theme="dark"] .vcp-tp b,html[data-theme="dark"] .dn-pw b,html[data-theme="dark"] .dn-ring b{color:#E9F3ED}
html[data-theme="dark"] .vcp-tp p,html[data-theme="dark"] .dn-pw small{color:#B4C4BA}
html[data-theme="dark"] .vcp-tpn{background:#24302A;color:#E9F3ED}
html[data-theme="dark"] .dn-lbtn{background:#1D2722;border-color:#2C3A32;color:#C9D6CE}
html[data-theme="dark"] .dn-lbtn.on{background:#173A26;border-color:#1F5A36;color:#7FE3A4}
html[data-theme="dark"] .dn-ring .tr{stroke:#24342B}
html[data-theme="dark"] .dn-prog-s{background:#16201B}
/* the footer (owner 28 Oct 03:06): drawnut's dark green; Rivea Decor FZE, support, mobile, Privacy Policy */
.vcp-foot{display:flex;flex-direction:column;gap:14px;margin:30px calc(-1 * var(--pad)) 0;padding:22px var(--pad) 26px;color:#fff;background:radial-gradient(120% 160% at 0% 120%,#0E8A57 0%,#0B4A30 45%,#0F2A1F 80%,#0E1F18 100%)}
.vf-brand{display:flex;align-items:center;gap:12px}
.vf-brand img{flex:none;width:56px;height:auto}
.vf-brand span{display:flex;flex-direction:column;gap:3px;min-width:0}
.vf-brand b{font-family:var(--vcp-out);font-size:19px;line-height:1.1;font-weight:500;color:#fff}
.vf-brand small{font-size:12px;line-height:1.4;color:#B5D3C2}
.vf-links{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.vf-links a{display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.07);text-decoration:none;color:#fff}
.vf-links a:hover{background:rgba(255,255,255,.12)}
.vf-links small{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7FDCA2}
.vf-links b{font-size:14.5px;line-height:1.3;font-weight:600;color:#fff;overflow-wrap:anywhere}
.vf-c{font-size:11.5px;color:#8FB09E}
/* the home on a tablet or computer (owner 28 Oct 03:06 "tab view and desktop view as well"): his picture's parts across the
   screen — the green with his bulb hanging into the card (his logo, his words → Learn); the Drawings row with the search at
   the right; a line; the twelve icons six to a row; the canvas band beside the drawings box; the tips with your learning,
   the Library and what's new; the footer. The logo row, the craft. banner, the photo card and the old canvas band are the
   phone's no more here. */
@media (min-width:700px){
  .vcp{grid-template-areas:"hero hero hero hero hero hero" "drow drow drow srch srch srch" "r1 r1 r1 r1 r1 r1" "g1 g1 g1 g1 g1 g1" "all all all all all all" "cvc cvc cvc cvc gauge gauge" "desk desk desk desk desk desk" "foot foot foot foot foot foot";padding-top:18px}
  .vcp-top,.vcp-craft,.vcp-photo,.vcp-mid,.vcp-rule.r2,.vcp-rule.r3,.vcp-rule.r4{display:none!important}
  .vcp-hero{grid-area:hero;display:block;position:relative;height:320px;border-radius:30px 30px 0 0;overflow:hidden;background:url("/img/drawnut/home-green-wide.webp?v=ec0e508d33") center top / 100% 80% no-repeat}
  .vcp-hcard{left:3.2%;right:3.2%;top:46%;bottom:0;border-radius:48px 48px 0 0;background:#F5F6F8}
  .vcp-hlogo{left:4.5%;top:50%;width:150px;transform:translateY(-50%)}
  .vcp-hw{left:calc(4.5% + 196px);top:50%;transform:translateY(-50%)}
  .vcp-hw b{font-size:38px}
  .vcp-hw .h3{margin-top:10px;font-size:15.5px}
  .vcp-hbulb{display:block;position:absolute;top:0;right:15%;height:62%;width:auto;z-index:2;pointer-events:none}
  .vcp-drow{grid-area:drow;display:flex;align-items:center;gap:16px;padding:24px 0 20px}
  .vcp-dfold{width:72px}
  .vcp-dtx small{font-size:11.5px}
  .vcp-dtx b{font-size:28px}
  .vcp-new2{margin-inline-end:8px}
  .vcp-rule.r1{grid-area:r1;margin:0;background:#D6D7D9}
  .vcp-car{grid-area:cvc;align-self:center;min-width:0;margin:30px 0 0}
  .vcp-wdg{margin-top:34px}
  .vcp-foot{grid-area:foot;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand c" "links links";align-items:center;gap:18px 28px;margin:44px 0 0;padding:26px 30px;border-radius:24px}
  .vf-brand{grid-area:brand}
  .vf-links{grid-area:links;grid-template-columns:repeat(3,minmax(0,1fr))}
  .vf-c{grid-area:c;justify-self:end}
  html[data-theme="dark"] .vcp-hcard{background:#0D0E12}
}
@media (min-width:700px) and (max-width:1023px){
  .vcp-hero{height:280px}
  .vcp-hlogo{width:120px;left:4%}
  .vcp-hw{left:calc(4% + 152px)}
  .vcp-hw b{font-size:28px}
  .vcp-hw .h3{font-size:13.5px;margin-top:8px}
  .vcp-hbulb{right:8%;height:58%}
  .vcp{grid-template-areas:"hero hero hero hero hero hero" "drow drow drow drow drow drow" "srch srch srch srch srch srch" "r1 r1 r1 r1 r1 r1" "g1 g1 g1 g1 g1 g1" "all all all all all all" "cvc cvc cvc cvc cvc cvc" "gauge gauge gauge gauge gauge gauge" "desk desk desk desk desk desk" "foot foot foot foot foot foot"}
  .vcp-search{justify-self:stretch;width:100%;margin:0 0 18px}
  .vcp-wdg{max-width:520px;width:100%;justify-self:center;margin-top:22px}
}
@media (min-width:700px){
  :is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-hw b{font-size:26px;white-space:normal;line-height:1.3}
  :is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-hw{right:24%}
  :is([lang=ml],[lang=ta],[lang=hi],[lang=ar]) .vcp-hw .h3{white-space:normal;letter-spacing:0}
}
/* About drawnut */
/* About drawnut, like the owner's picture (27 Oct 21:10) in drawnut's colours: a light card; his logo top left, the version
   large and faint top right; "CAD made simple." in drawnut's greens; three rising pillars with hexagon icons (the middle
   one green), their feet fanning out to the card's edge; side by side on a tablet or computer */
.dn-about .dn-ab-hero{position:relative;display:flex;flex-direction:column;margin:2px 0 18px;padding:18px 18px 0;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,#F7FAF8 0%,#EEF4F0 100%);box-shadow:inset 0 0 0 1px rgba(10,60,35,.06)}
.dn-ab-num{position:absolute;top:2px;inset-inline-end:14px;font-family:Roboto,Inter,system-ui,sans-serif;font-size:64px;line-height:1;font-weight:200;letter-spacing:-.02em;color:rgba(6,70,36,.08);pointer-events:none}
.dn-ab-lg{position:relative;line-height:0}
.dn-ab-lg img{display:block;height:32px;width:auto}
.dn-ab-lg .lg-w{display:none}
.dn-ab-txt{position:relative;margin-top:20px}
.dn-about .dn-ab-txt h2{margin:0;font-size:21px;line-height:1.32;font-weight:400;letter-spacing:-.005em;color:#10231A}
.dn-ab-txt h2 span{display:block}
.dn-ab-txt h2 .dn-ab-g{font-weight:700;background:linear-gradient(90deg,#067C3E 0%,#0DA552 55%,#3FA526 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.dn-about .dn-ab-txt p{margin:10px 0 0;font-size:12.5px;line-height:1.5;color:#66766D}
.dn-ab-foot{display:flex;align-items:center;justify-content:flex-end;gap:6px;margin-top:14px;padding-top:9px;border-top:1px solid rgba(10,60,35,.12);font-size:12.5px;font-weight:500;color:#5B6B62}
.dn-ab-foot svg{width:15px;height:15px;fill:none;stroke:#0DA552;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.dn-ab-cols{position:relative;display:flex;align-items:flex-end;height:236px;margin:34px 0 0;padding-bottom:44px}
.dn-ab-col{position:relative;z-index:1;flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;padding:34px 6px 0;text-align:center;background:linear-gradient(180deg,#FFFFFF 0%,#F8FBF9 100%);box-shadow:0 14px 26px -16px rgba(10,60,35,.28)}
.dn-ab-col.c1{height:54%}
.dn-ab-col.c2{height:74%}
.dn-ab-col.c3{height:96%}
.dn-ab-col.on{background:linear-gradient(180deg,#0BC862 0%,#08A452 62%,#078F47 100%);box-shadow:0 18px 30px -14px rgba(8,150,75,.5)}
.dn-ab-col b{font-size:17px;line-height:1.15;font-weight:700;color:#10231A}
.dn-ab-col small{margin-top:4px;font-size:11px;line-height:1.3;color:#6B7A72}
.dn-ab-col.on b{color:#fff}
.dn-ab-col.on small{color:rgba(255,255,255,.86)}
.dn-ab-hex{position:absolute;top:-23px;left:50%;width:46px;height:46px;transform:translateX(-50%);line-height:0}
.dn-ab-hex svg{width:100%;height:100%;overflow:visible}
.dn-ab-hex .hx{fill:#fff;stroke:#fff;stroke-width:6;stroke-linejoin:round;filter:drop-shadow(0 5px 8px rgba(10,60,35,.18))}
.dn-ab-hex .hi{fill:none;stroke:#08A453;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dn-ab-col.on .dn-ab-hex .hx{fill:#0BD86A;stroke:#0BD86A;filter:drop-shadow(0 8px 12px rgba(8,185,90,.5))}
.dn-ab-col.on .dn-ab-hex .hi{stroke:#fff}
.dn-ab-floor{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;overflow:visible}
.dn-ab-floor .fw0{stop-color:#F8FBF9}
.dn-ab-floor .fw1{stop-color:#F8FBF9;stop-opacity:.2}
.dn-ab-floor .fg0{stop-color:#078F47}
.dn-ab-floor .fg1{stop-color:#5ED38E;stop-opacity:.35}
[dir="rtl"] .dn-ab-floor{transform:scaleX(-1)}
html[data-theme="dark"] .dn-about .dn-ab-hero{background:linear-gradient(180deg,#141E19 0%,#0D1511 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.05)}
html[data-theme="dark"] .dn-ab-num{color:rgba(255,255,255,.06)}
html[data-theme="dark"] .dn-ab-lg .lg-d{display:none}
html[data-theme="dark"] .dn-ab-lg .lg-w{display:block}
html[data-theme="dark"] .dn-about .dn-ab-txt h2,html[data-theme="dark"] .dn-ab-col b{color:#E9F3ED}
html[data-theme="dark"] .dn-ab-txt h2 .dn-ab-g{background:linear-gradient(90deg,#0BD86A,#3BEC5C 55%,#9BE03A);-webkit-background-clip:text;background-clip:text}
html[data-theme="dark"] .dn-about .dn-ab-txt p,html[data-theme="dark"] .dn-ab-foot,html[data-theme="dark"] .dn-ab-col small{color:#9DB0A5}
html[data-theme="dark"] .dn-ab-col:not(.on){background:linear-gradient(180deg,#1C2923,#17221D)}
html[data-theme="dark"] .dn-ab-hex .hx{fill:#22332B;stroke:#22332B}
html[data-theme="dark"] .dn-ab-col.on .dn-ab-hex .hx{fill:#0BD86A;stroke:#0BD86A}
html[data-theme="dark"] .dn-ab-floor .fw0,html[data-theme="dark"] .dn-ab-floor .fw1{stop-color:#17221D}
/* Learn, his page (owner 27 Oct 22:44: "use this and don't change"): his green panel at the left as it is (a third of the
   width, as in his picture; 38 % on a phone), staying in view while the steps scroll; his white page at the right with the
   numbered steps and his pencil cube at the bottom right */
#sheet .sbody.dn-learn{padding:0!important}
.dn-lp{display:grid;grid-template-columns:38% minmax(0,1fr);align-items:start;background:#fff}
.dn-lp-panel{position:sticky;top:0;line-height:0;background:#2FAA2E}
.dn-lp-panel img{display:block;width:100%;height:auto}
.dn-lp-page{display:flex;flex-direction:column;min-width:0;padding:18px 14px 16px;color:#10231A}
.dn-learn ol{list-style:none;margin:0;padding:0;display:grid;gap:16px}
.dn-ln{display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start}
.dn-ln-n{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#E8F6EC;color:#0A9F4D;font-style:normal;font-size:14px;font-weight:700;line-height:1}
.dn-learn .dn-ln b{display:block;margin-top:4px;font-size:14.5px;line-height:1.3;font-weight:700;color:#10231A}
.dn-learn .dn-ln p{margin:3px 0 0;font-size:13px;line-height:1.5;color:#5B6B62}
.dn-lp-sketch{display:block;width:92%;height:auto;margin:26px 0 0 auto}
[dir="rtl"] .dn-lp-sketch{margin:26px auto 0 0}
@media (min-width:820px){
  #sheet[data-mode="dnlearn"]{width:min(940px,94vw)}
  .dn-lp{grid-template-columns:33.23% minmax(0,1fr)}
  .dn-lp-page{padding:34px 40px 22px}
  .dn-learn ol{gap:16px}
  .dn-ln{grid-template-columns:34px 1fr;gap:14px}
  .dn-ln-n{width:34px;height:34px;font-size:15px}
  .dn-learn .dn-ln b{margin-top:6px;font-size:16px}
  .dn-learn .dn-ln p{font-size:14px}
  .dn-lp-sketch{width:52%;margin-top:18px}
}
/* section names in drawnut's dark green pills, a short line at the right (owner 27 Oct 21:28, his picture's "Features") */
.vcp-dk .dn-sec{display:flex;align-items:center;justify-content:space-between;gap:12px}
.vcp-dk .dn-pill{display:inline-flex;align-items:center;height:30px;padding:0 15px;border-radius:999px;background:#0B5B2C;color:#fff;font-size:13.5px;font-weight:600;letter-spacing:0;white-space:nowrap}
.vcp-dk .dn-pill > span{margin-inline-end:.3em}
.vcp-dk .dn-sec small{font-family:Roboto,VegoIndic,system-ui,sans-serif;font-size:12.5px;font-weight:500;color:#5B6B62;text-align:end}
html[data-theme="dark"] .vcp-dk .dn-sec small{color:#9DB0A5}
/* everything under the card on the card's own left line (owner 27 Oct 21:20: "writings to be aligned") */
.dn-about > p,.dn-about > .dn-ab-v,.dn-about > .vc-acts{margin-inline:18px!important}
.dn-about > .vc-acts{margin-top:16px!important}
/* the words a size smaller in Malayalam and Tamil (their letters are wider) */
:is([lang=ml],[lang=ta]) .dn-ab-col b{font-size:14.5px}
:is([lang=ml],[lang=ta]) .dn-about .dn-ab-txt h2{font-size:18px;line-height:1.45}
/* a tablet or computer: the window wider; the pillars at the left, the words at the right, as in his picture */
@media (min-width:820px){
  #sheet[data-mode="dnabout"]{width:min(880px,92vw)}
  .dn-about .dn-ab-hero{display:grid;grid-template-columns:44% 1fr;grid-template-rows:auto 1fr auto;column-gap:36px;min-height:380px;padding:22px 30px 0}
  .dn-ab-lg{grid-column:1;grid-row:1}
  .dn-ab-lg img{height:38px}
  .dn-ab-num{font-size:104px;top:6px;inset-inline-end:24px}
  .dn-ab-txt{grid-column:2;grid-row:1/3;align-self:center;margin:56px 0 0}
  .dn-about .dn-ab-txt h2{font-size:28px}
  .dn-about .dn-ab-txt p{font-size:13px;max-width:360px}
  .dn-ab-foot{grid-column:2;grid-row:3;align-self:end;margin:16px 0 18px}
  .dn-ab-cols{grid-column:1;grid-row:2/4;height:300px;margin:30px 0 0}
  .dn-about > p,.dn-about > .dn-ab-v,.dn-about > .vc-acts{margin-inline:30px!important}
}
/* the side menu's logo: his pill where the menu is narrow (84 px), the white logo where it is wide */
body[data-mod="cad"] .ds-logo img.ds-dn-pill{display:none}
@media (min-width:768px) and (max-width:1359px){
  body[data-mod="cad"] .ds-top .ds-logo img:first-child{display:none}
  body[data-mod="cad"] .ds-top .ds-logo img.ds-dn-pill{display:block;width:50px;height:auto}
}
@media (min-width:1360px){body[data-mod="cad"] .ds-top .ds-logo img:first-child{height:34px}}
.dn-about p{margin:0 0 12px;font-size:14px;line-height:1.55;color:var(--ink,#0A0A0A)}
.dn-ab-v{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:16px 0;font-size:13px}
.dn-ab-v dt{color:var(--muted,#6B7280)}
.dn-ab-v dd{margin:0;font-weight:600}
/* drawnut, its own app (owner 27 Oct 18:28): its side menu on a tablet or computer in drawnut's green and black (18:28:
   "the blue at the left in a green gradient mixed with black"), the bottom bar on a phone white with drawnut's green +.
   The design system fixes these with very specific rules; these are stronger, and only while drawnut is open. */
body[data-mod="cad"] .fab{display:none!important}
body[data-mod="cad"] #bnav.bnav button .nis{display:none}
body[data-mod="cad"] #bnav.bnav button[aria-current="true"] .nio{display:none}
body[data-mod="cad"] #bnav.bnav button[aria-current="true"] .nis{display:block}
/* the drawnut tab's two icons elsewhere (the side menu): the outline, the solid one when chosen */
.dn-nav.nis{display:none}
body[data-mod="cad"] .ds-nav .nis{display:none}
body[data-mod="cad"] .ds-nav button[aria-current="true"] .nio{display:none}
body[data-mod="cad"] .ds-nav button[aria-current="true"] .nis{display:block}
/* on a wide computer: no CRM day list and lead guide at the right — drawnut's page takes the room */
body[data-mod="cad"] .drail{display:none!important}
body[data-mod="cad"] main{margin-inline-end:0!important}
/* drawnut tips and what's new */
.dn-tips .rl-faq{margin-bottom:8px}
.dn-news{display:flex;flex-direction:column;gap:10px}
.dn-nw{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;border-radius:14px;background:var(--pane,#fff);border:1px solid var(--line,#E6E8EC)}
.dn-nw i{flex:none;width:10px;height:10px;margin-top:5px;border-radius:3px;background:linear-gradient(135deg,#00AA55,#08B932 55%,#5CC21C)}
.dn-nw span{display:flex;flex-direction:column;gap:3px;min-width:0}
.dn-nw b{font-size:14px;line-height:1.35;font-weight:600}
.dn-nw small{font-size:12px;color:var(--muted,#8A8A95)}
/* the coloured app icons in the Vego CAD sheet (app-icons.js) */
.vapp{position:relative;flex:none;display:block;width:50px;height:50px;border-radius:14px;background:linear-gradient(150deg,#FFFFFF 0%,#F2F2F2 55%,#E3E3E3 100%);box-shadow:4px 7px 12px -5px rgba(0,0,0,.25),inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.05)}
.vapp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.vcad-i.vapp{width:44px;height:44px;border-radius:12px;color:inherit}
.vcad-t.main .vcad-i.vapp{background:linear-gradient(150deg,#FFFFFF 0%,#F2F2F2 55%,#E3E3E3 100%)}
/* his own Library icons (a picture each, with its own tile and corners) */
.vapp.vapp-img,.vcad-i.vapp.vapp-img{background:none!important;border-radius:22.5%;box-shadow:0 6px 14px -4px rgba(27,36,64,.22)}
.vapp.vapp-img img{position:absolute;inset:0;display:block;width:100%;height:100%;border-radius:inherit}

/* his fonts on this page: Vego's design system sets Inter on every element with very specific rules; these are stronger,
   and only on the drawnut page (Malayalam and Arabic fall back to Vego's own fonts) */
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cw b,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cvw span{font-family:Outfit,VegoIndic,Cairo,Inter,system-ui,sans-serif!important;font-feature-settings:normal!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-ic b,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cw i,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-canvas small,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-folder b,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-new,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-easy b,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-easy span{font-family:Roboto,VegoIndic,Cairo,Inter,system-ui,sans-serif!important;font-feature-settings:normal!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cw b{font-size:29px!important;line-height:.9!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cw i{font-size:8.6px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cvw .c1{font-size:19px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-cvw .c2{font-size:20.5px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-canvas small{font-size:9.6px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-folder b,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-new{font-size:12.5px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-easy b{font-size:12.5px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-easy span{font-size:11.6px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-ic b{font-size:12.5px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-tp p{font-size:12.5px!important;line-height:1.45!important;margin:0!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-tp b,html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-lb b{font-size:14px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-dk h2{font-family:Outfit,VegoIndic,Cairo,Inter,system-ui,sans-serif!important;font-size:19px!important;margin:0 0 14px!important}
/* Malayalam and Tamil a size smaller where the room is fixed (their letters are larger) */
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39):is([lang=ml],[lang=ta]) body .vcp .vcp-ic b{font-size:11.5px!important;line-height:1.3!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39):is([lang=ml],[lang=ta]) body .vcp .vcp-cvw .c2{font-size:16px!important;line-height:1.25!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39):is([lang=ml],[lang=ta]) body .vcp :is(.vcp-folder b,.vcp-new){font-size:10.5px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39):is([lang=ml],[lang=ta]) body .vcp .vcp-folder b{inset-inline-start:8px;max-width:88px}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39):is([lang=ml],[lang=ta]) body .vcp .vcp-cw i{letter-spacing:.04em!important;font-size:9.5px!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-wdg b{font-family:Outfit,VegoIndic,Cairo,Inter,system-ui,sans-serif!important;font-feature-settings:normal!important}
html:not(#z0):not(#z1):not(#z2):not(#z3):not(#z4):not(#z5):not(#z6):not(#z7):not(#z8):not(#z9):not(#z10):not(#z11):not(#z12):not(#z13):not(#z14):not(#z15):not(#z16):not(#z17):not(#z18):not(#z19):not(#z20):not(#z21):not(#z22):not(#z23):not(#z24):not(#z25):not(#z26):not(#z27):not(#z28):not(#z29):not(#z30):not(#z31):not(#z32):not(#z33):not(#z34):not(#z35):not(#z36):not(#z37):not(#z38):not(#z39) body .vcp .vcp-wdg b + span{font-family:Roboto,VegoIndic,Cairo,Inter,system-ui,sans-serif!important;font-feature-settings:normal!important}
/* drawnut's bar on a phone — the owner's picture (27 Oct 20:13 "use this, don't change anything"; 20:26 "the exact top
   one"): every size and place below is measured from his picture in the bar's height (--h; his bar is 6.54 times as long
   as it is high, and so is this one from a 390 px phone up; 56 px at least): the round button 0.725 high, 0.19 in from the left; Home's room 1.32 tabs
   (the bump), the others one tab each; his icons each in its own box (0.24–0.26 high, their tops 0.255–0.265 down);
   the words centred 0.65 down, the dot 0.82, the line (help-rail-nav.js dnBarLine) 0.897; his colours (the bar #1E1F21,
   the words #BDBFC2, the icons #D0D1D3). Only the words are larger than in his picture — there they would be 7 px on a
   phone, here 10 px — and they may run a little past their tab's room (never cut) */
@media (max-width:767px){
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav{--h:clamp(56px,calc((100vw - 24px) / 6.54),66px);position:fixed!important;left:12px!important;right:12px!important;inset-inline:12px!important;bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;height:var(--h)!important;padding:0!important;padding-inline:calc(var(--h) * .193) calc(var(--h) * .106)!important;display:flex!important;align-items:stretch!important;gap:0!important;border:0!important;outline:0!important;border-radius:999px!important;background:linear-gradient(180deg,#212224 0%,#1E1F21 45%,#1C1D1F 100%)!important;animation:none!important;box-shadow:inset 0 -1.5px 0 rgba(0,0,0,.42),0 1.5px 0 #0D0E0E,0 12px 22px -8px rgba(0,0,0,.45),0 3px 8px rgba(0,0,0,.16)!important;overflow:hidden!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav .dn-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav .dn-stroke{fill:none;stroke-width:calc(var(--h) * .042);stroke-linecap:round;stroke-linejoin:round}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button{position:relative;z-index:1;flex:1 1 0!important;min-width:0!important;height:100%!important;margin:0!important;padding:0!important;display:block!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:#D0D1D3!important;overflow:visible!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[data-view="vcad"]{flex-grow:1.32!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button.dn-orb{flex:0 0 calc(var(--h) * .725)!important;width:calc(var(--h) * .725)!important;height:calc(var(--h) * .725)!important;align-self:flex-start!important;margin:calc(var(--h) * .105) 0 0!important;margin-inline-end:calc(var(--h) * .192)!important;border-radius:50%!important;box-shadow:0 calc(var(--h) * .06) calc(var(--h) * .14) rgba(0,0,0,.55),0 1px 1px rgba(0,0,0,.35)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button.dn-orb img{display:block;width:100%;height:100%;border-radius:50%}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button svg.dn-i{position:absolute!important;left:50%!important;transform:translateX(-50%)!important;margin:0!important;color:#D0D1D3!important;filter:none!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .dn-i-home{top:calc(var(--h) * .265)!important;width:calc(var(--h) * .2647)!important;height:calc(var(--h) * .2582)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .dn-i-folder{top:calc(var(--h) * .265)!important;width:calc(var(--h) * .2876)!important;height:calc(var(--h) * .2418)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .dn-i-plus{top:calc(var(--h) * .265)!important;width:calc(var(--h) * .2386)!important;height:calc(var(--h) * .2418)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .dn-i-books{top:calc(var(--h) * .255)!important;width:calc(var(--h) * .2908)!important;height:calc(var(--h) * .2516)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .dn-i-grid{top:calc(var(--h) * .255)!important;width:calc(var(--h) * .2647)!important;height:calc(var(--h) * .2549)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .nis{display:none!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[aria-current="true"] .nio{display:none!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[aria-current="true"] .nis{display:block!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[aria-current="true"] svg.dn-i:not(.nis){color:#1ED760!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button>span{position:absolute!important;left:-8px!important;right:-8px!important;top:calc(var(--h) * .65 - 5.9px)!important;display:block!important;max-width:none!important;overflow:visible!important;white-space:nowrap!important;text-align:center!important;padding:0!important;font-size:10px!important;line-height:12px!important;font-weight:400!important;letter-spacing:.01em!important;color:#BDBFC2!important;text-shadow:0 1px 1px rgba(0,0,0,.45)}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[aria-current="true"]>span{color:#fff!important;font-weight:500!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button .dn-dot{position:absolute;left:50%;top:calc(var(--h) * .82);width:calc(var(--h) * .075);height:calc(var(--h) * .075);transform:translate(-50%,-50%);border-radius:50%;background:transparent}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[aria-current="true"] .dn-dot{background:linear-gradient(90deg,#0BCF68,#24E759 50%,#7FE24A);box-shadow:0 0 4px rgba(34,217,107,.45)}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #view{padding-bottom:calc(104px + env(safe-area-inset-bottom,0px))!important}
}
/* Malayalam, Tamil and Hindi: on a taller line, centred at the same place, so their signs above and below are never cut */
@media (max-width:767px){html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51):is([lang=ml],[lang=ta],[lang=hi]) body[data-mod="cad"] #bnav.bnav>button>span{top:calc(var(--h) * .65 - 8px)!important;line-height:16px!important;letter-spacing:0!important}}
/* drawnut's side menu on a tablet or computer: the craft. banner's own colours — black at the top, its dark greens and
   the green glow at the bottom (owner 27 Oct 18:46: "the same gradient as the craft card"); the buttons as in every
   Vego app (18:46: "standard"), in drawnut's green */
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .dside{background:radial-gradient(150% 55% at 0% 104%,#0E8A57 0%,#097048 28%,#0B4A30 55%,rgba(15,42,31,0) 85%),linear-gradient(180deg,#090909 0%,#0E1F18 45%,#0F2A1F 100%)!important;color:#DCEFE2!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-nav button{color:rgba(225,245,230,.78)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-nav button:hover{background:rgba(255,255,255,.06)!important;color:#fff!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-nav button[aria-current="true"]{background:rgba(255,255,255,.1)!important;color:#fff!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-nav button[aria-current="true"] .ds-ic{color:#5EE07F!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-new{background:#08B932!important;color:#fff!important;box-shadow:0 6px 16px rgba(8,185,50,.3)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-mods{background:rgba(255,255,255,.05)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-mods button{color:rgba(225,245,230,.72)!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] .ds-mods button[aria-pressed="true"]{background:#08B932!important;color:#fff!important}
/* drawnut's menu in the top bar, before the search: Home · Drawings · Library · craft. tips · What's new · About drawnut */
@media (min-width:768px){
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] header.top #tabs{display:flex!important;align-items:center;gap:2px;flex:1 1 auto;min-width:0;margin-inline:8px 16px!important;overflow-x:auto;scrollbar-width:none}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] header.top #tabs button{flex:none;padding:8px 12px!important;border-radius:999px!important;background:none!important;box-shadow:none!important;color:#3D4552!important;font-size:13.5px!important;font-weight:600!important;white-space:nowrap}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] header.top #tabs button:hover{background:rgba(8,185,50,.08)!important;color:#0A7A3C!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49) body[data-mod="cad"] header.top #tabs button[aria-current="true"]{background:rgba(8,185,50,.12)!important;color:#0A7A3C!important}
}
/* + start a drawing: his icons four to a row */
.dn-start .dn-sgrid{margin:18px 0 6px;row-gap:24px} /* room for the lamp over Furnitures (it reaches above its tile) */

/* narrower phones: Malayalam, Tamil and Hindi a little smaller (from 380 px), and from 340 px the bar nearer the screen's
   edges and Home's room a little less, so the words never meet */
@media (max-width:380px){
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51):is([lang=ml],[lang=ta],[lang=hi]) body[data-mod="cad"] #bnav.bnav>button>span{font-size:9.5px!important;letter-spacing:-.01em!important}
}
@media (max-width:340px){
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav{left:6px!important;right:6px!important;inset-inline:6px!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] #bnav.bnav>button[data-view="vcad"]{flex-grow:1.2!important}
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51):is([lang=ml],[lang=ta],[lang=hi]) body[data-mod="cad"] #bnav.bnav>button>span{font-size:9px!important;letter-spacing:-.02em!important}
}
/* drawnut's bar pages (owner 28 Oct 15:21: "bottom bar should work each part"; "Choose by categories: Aluminum, Glass,
   Pergola, Furniture, Joinery, Parking"): Drawings, Create, Library and More — the name in drawnut's type, the categories in
   a row (sideways on a phone; the chosen one in his green texture with white writing, as on the drawing screen), the
   drawings as cards (two or three across on a tablet or computer), the kinds as his icons. */
.dnp{--pad:16px;--vcp-vline:#DBDEE8;--vcp-out:Outfit,Sora,Inter,system-ui,sans-serif;display:flex;flex-direction:column;gap:14px;width:100%;max-width:1120px;margin-inline:auto;padding:12px 0 28px;color:#0A0A0A}
.dnp-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.dnp-ht{display:flex;flex-direction:column;gap:3px;min-width:0}
.dnp-head h1{margin:0;font-family:var(--vcp-out);font-size:28px;line-height:1.1;font-weight:600;letter-spacing:-.01em;color:#0A0A0A}
.dnp-head small{font-size:13px;color:#6B7280}
.dnp-go{flex:none;min-height:40px}
.dnp-cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * var(--pad));padding:2px var(--pad) 4px;scroll-padding-inline:var(--pad)}
.dnp-cats::-webkit-scrollbar{display:none}
.dnp-cat{flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 15px;border:1px solid #E3E4E8;border-radius:999px;background:#fff;color:#1B2440;font:inherit;font-size:14px;font-weight:600;line-height:1;white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dnp-cat i{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:10px;background:#F1F3F5;color:#4B5563;font-style:normal;font-size:12px;font-weight:600}
.dnp-cat[aria-selected="true"]{border-color:transparent;color:#fff;background:linear-gradient(rgba(0,64,32,.22),rgba(0,64,32,.22)),url("/img/drawnut/home-green-wide.webp?v=ec0e508d33") center/cover #027C3E}
.dnp-cat[aria-selected="true"] i{background:rgba(255,255,255,.24);color:#fff}
.dnd-list{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.dnd-row{display:flex;align-items:center;gap:4px;padding:4px 6px 4px 4px;border:1px solid #E5E7EB;border-radius:16px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.dnd-go{display:flex;flex:1;align-items:center;gap:14px;min-width:0;padding:10px;border:0;border-radius:12px;background:none;color:inherit;font:inherit;text-align:start;cursor:pointer}
.dnd-ic.vcp-ii{flex:none;width:44px;border-radius:13px}
.dnd-ic.vcp-ii img,.dnd-ic.vcp-ii svg{border-radius:13px}
.dnd-ic.vcp-ii.own img{border-radius:0}
.dnd-tx{display:flex;flex-direction:column;gap:3px;min-width:0}
.dnd-tx b{overflow:hidden;font-size:15px;font-weight:600;color:#0A0A0A;text-overflow:ellipsis;white-space:nowrap}
.dnd-tx small{overflow:hidden;font-size:12.5px;color:#6B7280;text-overflow:ellipsis;white-space:nowrap}
.dnd-del{display:grid;flex:none;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:none;color:#9CA3AF;cursor:pointer}
.dnd-del svg{width:20px;height:20px}
.dnd-del:hover,.dnd-del:focus-visible{background:#FEF2F2;color:#DC2626}
.dnp-empty{padding:34px 16px;border:1px dashed #D5D9E0;border-radius:18px;background:#fff;color:#6B7280;text-align:center}
.dnp-empty p{margin:0 0 14px;font-size:14.5px}
.dnp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-items:center;row-gap:24px;padding:16px 0 4px}
.dnp .vcp-ic::after{display:none}
.vcad.dnp-rows{gap:10px}
.dnp .vcp-foot{margin-top:18px}
@media (min-width:700px){
  .dnp{--pad:0px;gap:18px;padding:22px 0 40px}
  .dnp-head h1{font-size:34px}
  .dnp-cats{flex-wrap:wrap;overflow:visible}
  .dnd-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .dnp-grid{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:30px}
  .vcad.dnp-rows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media (min-width:1100px){
  .dnd-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dnp-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
html[data-theme="dark"] .dnp,html[data-theme="dark"] .dnp-head h1,html[data-theme="dark"] .dnd-tx b{color:#E9F3ED}
html[data-theme="dark"] .dnp-cat:not([aria-selected="true"]),html[data-theme="dark"] .dnd-row,html[data-theme="dark"] .dnp-empty{background:#1A201C;border-color:rgba(255,255,255,.08);color:#E9F3ED}
html[data-theme="dark"] .dnp-cat:not([aria-selected="true"]) i{background:rgba(255,255,255,.08);color:#C9D6CF}
.vcad-i.dnm-i{background:#EAF6EF;color:#097048}
.vcad-i.dnm-i svg{width:22px;height:22px}
html[data-theme="dark"] .vcad-i.dnm-i{background:rgba(11,224,112,.1);color:#6BE29A}
/* New drawing / Start a drawing in drawnut's green texture with white writing, as the drawing screen's main button */
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body[data-mod="cad"] .dnp .btn.pri{border-color:#027C3E!important;background:linear-gradient(rgba(0,64,32,.22),rgba(0,64,32,.22)),url("/img/drawnut/home-green-wide.webp?v=ec0e508d33") center/cover #027C3E!important;color:#fff!important;box-shadow:0 6px 14px -8px rgba(9,112,72,.7)!important}
/* the home's icons (owner 28 Oct 19:19): Draw Pad | Canvas | Floor Plan | All, spaced as on Create (four to a row, each in
   its own quarter, no lines between); All opens the rest under them — two rows of tools, then each family under a pill in
   his green; a kind not drawn yet carries "Soon" */
.vcp .vcp-g1.dnp-grid{padding:0;margin-top:22px}
.vcp .vcp-g1.dnp-grid::before,.vcp-g1 .vcp-ic::after,.vcp-all .vcp-ic::after{display:none!important}
.vcp-all{display:flex;flex-direction:column;gap:20px;margin-top:22px}
.vcp-all[hidden]{display:none}
.vcp-all .dnp-grid{padding:0}
.vcp-alls{display:flex;flex-direction:column;gap:14px}
/* Create: the families one under another */
.dnp-kinds{display:flex;flex-direction:column;gap:22px;margin:6px 0 8px}
.dnp-kinds .dnp-grid{padding:0}
.vcp-alls h2.dn-sec{display:flex;align-items:center;gap:12px;margin:0;font-size:inherit}
.vcp-alls h2.dn-sec::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,#DADBDD,rgba(218,219,221,0))}
.vcp-alls .dn-pill{display:inline-flex;align-items:center;height:30px;padding:0 15px;border-radius:999px;background:linear-gradient(rgba(0,64,32,.22),rgba(0,64,32,.22)),url("/img/drawnut/home-green-wide.webp?v=ec0e508d33") center/cover #027C3E;color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap}
.vcp-ic .vcp-ii{position:relative}
.dn-sb{position:absolute;top:-7px;inset-inline-end:-12px;padding:1px 6px;border:1.5px solid #fff;border-radius:999px;background:#1F2937;color:#fff;font-size:9.5px;font-style:normal;font-weight:700;line-height:1.4;letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 6px rgba(16,24,40,.25)}
.dn-soon .vcp-ii > svg,.dn-soon .vcp-ii > img{opacity:.92}
.dn-allb.on .vcp-ii{box-shadow:0 0 0 3px #fff,0 0 0 5.5px #0BB85C,0 6px 14px rgba(27,36,64,.14)}
.vcp .vcp-g1 .vcp-ic b,.vcp-all .vcp-ic b{max-width:84px}
html[data-theme="dark"] .vcp-alls h2.dn-sec::after{background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0))}
html[data-theme="dark"] .dn-sb{border-color:#0F1311}
@media (max-width:699px){
  .vcp .vcp-g1.dnp-grid,.vcp-all{order:4}
}
@media (min-width:700px){
  .vcp .vcp-g1.dnp-grid{grid-area:g1;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:30px}
  .vcp-all{grid-area:all;margin-top:26px}
  .vcp .vcp-g1 .vcp-ic b,.vcp-all .vcp-ic b{max-width:120px}
}
@media (min-width:1100px){
  .vcp .vcp-g1.dnp-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
}
/* a row's icon on its tile in drawnut's lists (Library, More, the packs) */
.vcad-i.dnt{width:44px;height:44px;padding:0;border-radius:12px;background:none;overflow:hidden;box-shadow:0 6px 14px -4px rgba(27,36,64,.22)}
.vcad-i.dnt > svg,.vcad-i.dnt > img{display:block;width:100%;height:100%;border-radius:12px}
.dn-calc{margin-top:12px}
.dn-badd{display:flex;flex-direction:column;gap:12px;margin-bottom:6px}
.dn-blist{margin-top:4px}
/* the Library's own windows: the main button in drawnut's green texture with white writing */
html:not(#b0):not(#b1):not(#b2):not(#b3):not(#b4):not(#b5):not(#b6):not(#b7):not(#b8):not(#b9):not(#b10):not(#b11):not(#b12):not(#b13):not(#b14):not(#b15):not(#b16):not(#b17):not(#b18):not(#b19):not(#b20):not(#b21):not(#b22):not(#b23):not(#b24):not(#b25):not(#b26):not(#b27):not(#b28):not(#b29):not(#b30):not(#b31):not(#b32):not(#b33):not(#b34):not(#b35):not(#b36):not(#b37):not(#b38):not(#b39):not(#b40):not(#b41):not(#b42):not(#b43):not(#b44):not(#b45):not(#b46):not(#b47):not(#b48):not(#b49):not(#b50):not(#b51) body #sheet:is([data-mode="dnjoin"],[data-mode="dntools"],[data-mode="dnconv"],[data-mode="dnarea"],[data-mode="dnbroch"]) .btn.pri{border-color:#027C3E!important;background:linear-gradient(rgba(0,64,32,.22),rgba(0,64,32,.22)),url("/img/drawnut/home-green-wide.webp?v=ec0e508d33") center/cover #027C3E!important;color:#fff!important}
/* on a phone each name stays inside its quarter (the next name never touches it); a name of one long word is made smaller to fit (dnFitNames) */
@media (max-width:699px){
  .vcp .vcp-g1 .vcp-ic b,.vcp-all .vcp-ic b{max-width:calc(25cqw - 6px)}
}