.code-preview-widget .hljs,.code-preview-widget codeline code{background-color:transparent;color:#f5f5f5}.code-preview-widget-container{--widget-bg:rgb(117, 125, 157);--widget-bradius:1em;--box-shadow:0em 0.4em 0.5em black;--text-color:whitesmoke;--desc-bg:linear-gradient(rgb(47, 86, 97), rgb(28, 68, 79));--desc-pad:1em;--desc-bradius:1em 1em 0em 0em;--desc-bcolor:transparent;--desc-bwidth:0;--desc-bstyle:solid;--code-bg:linear-gradient(rgb(71, 55, 107), rgb(51, 35, 87));--code-bradius:0em 0em 0em 1em;--code-bcolor:transparent;--code-bwidth:0;--code-bstyle:solid;--view-bg:linear-gradient(rgb(56, 66, 106), rgb(35, 45, 86));--view-bradius:0em 0em 1em 0em;--view-bcolor:transparent;--view-bwidth:0;--view-bstyle:solid}.code-preview-widget{background:var(--widget-bg);border-radius:var(--widget-bradius);box-shadow:0 .4em .5em black;display:flex;flex-wrap:wrap;padding:.5em;width:100%;height:100%}.description-area{border-color:var(--desc-bcolor);border-width:var(--desc-bwidth);border-style:var(--desc-bstyle);background-color:var(--desc-bg);border-radius:var(--desc-bradius);box-shadow:var(--box-shadow);height:25%;width:100%;overflow:scroll;box-sizing:border-box;color:var(--text-color);font-size:medium;overflow-wrap:break-word;padding:var(--desc-pad);line-height:1.5;z-index:200}.code-area{border-color:var(--code-bcolor);border-width:var(--code-bwidth);border-style:var(--code-bstyle);background-color:var(--code-bg);border-radius:var(--code-bradius);box-shadow:var(--box-shadow);color:gray;width:60%;height:75%;font-size:medium;box-sizing:border-box;display:flex;flex-direction:column}.code-area-header,.code-area-footer{height:0;position:relative}.code-area-body{height:calc(100% - 1em);padding-top:1em;color:var(--text-color);overflow:scroll;scroll-behavior:smooth;display:flex;flex-wrap:wrap;flex-direction:column;font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:13px}#codeView{overflow:visible}.preview-area{border-color:var(--view-bcolor);border-width:var(--view-bwidth);border-style:var(--view-bstyle);background-color:var(--view-bg);border-radius:var(--view-bradius);box-shadow:var(--box-shadow);width:40%;height:75%;box-sizing:border-box;background-size:1em 1em;background-image:linear-gradient(to right,grey .1px,transparent .5px),linear-gradient(to bottom,grey .1px,transparent .5px);display:flex;justify-content:center;align-items:center;position:relative;z-index:100}.preview-area #stepNumLabel{position:absolute;left:1em;bottom:1em;color:var(--text-color);font-size:large}.preview-canvas{min-height:50%;min-width:50%;max-height:90%;max-width:90%;object-fit:contain;border-radius:.25em;box-shadow:0 .4em .5em rgba(0,0,0,.5)}.preview-canvas:not([src]){background:rgba(245,245,245,.15);width:75%;height:75%;content-visibility:hidden}.code-area{counter-reset:lineNumber 0}codeline{counter-increment:lineNumber 1;display:flex;white-space:pre;height:18px;transition:height .1s}codeline::before{content:counter(lineNumber);display:inline-block;width:1em;text-align:right;margin:0 1.5em 0 .5em;color:rgba(128,128,128,.75);user-select:none}.codeline-hidden{counter-increment:lineNumber 0;height:0;transform:scaleY(0);transition:height .3s}codeline .hidden{visibility:hidden;transform:scaleY(0);transition:all .1s}codeline .visible{display:inline-block;overflow:hidden;animation:type .3s steps(60,end)forwards}.selected{transition:background-color .3s linear;background-color:rgba(0,187,255,.1);width:100%}@keyframes type{0%{width:0}100%{width:100%}}.code-preview-widget .btn{background:rgba(245,245,245,.1);border-radius:.25em;box-shadow:0 .1em .5em rgba(0,0,0,.5);padding:.5em;position:absolute;cursor:pointer;user-select:none}.code-preview-widget .btn:hover{background:rgba(245,245,245,.25)}.code-preview-widget .copy-btn{top:1em;right:1em}.code-preview-widget .prev-btn{min-width:3em;bottom:1em;right:5em}.code-preview-widget .next-btn{min-width:3em;bottom:1em;right:1em}.code-preview-widget .scrollbar::-webkit-scrollbar{width:.5em;height:.5em}.code-preview-widget .scrollbar::-webkit-scrollbar-track{background:0 0}.code-preview-widget .scrollbar::-webkit-scrollbar-thumb{background-color:rgba(128,128,128,.5);border-radius:1em;transition:background-color 2s linear}.code-preview-widget .scrollbar::-webkit-scrollbar-thumb:hover{background-color:rgba(128,128,128,.9);transition:background-color 2s linear}.code-preview-widget .scrollbar::-webkit-scrollbar-button{display:none}.code-preview-widget .scrollbar::-webkit-scrollbar-corner{background:0 0}.pf-landing-page-com .col-sm-1,.pf-landing-page-com .col-sm-2,.pf-landing-page-com .col-sm-3,.pf-landing-page-com .col-sm-4,.pf-landing-page-com .col-sm-5,.pf-landing-page-com .col-sm-6,.pf-landing-page-com .col-sm-7,.pf-landing-page-com .col-sm-8,.pf-landing-page-com .col-sm-9,.pf-landing-page-com .col-sm-10,.pf-landing-page-com .col-sm-11,.pf-landing-page-com .col-sm-12{padding-left:0;padding-right:0}.tutorial-card{display:flex;align-items:center;text-decoration:none;border:1px solid #ddd;border-radius:8px;background:#fff;transition:box-shadow .3s ease;min-height:150px;margin:20px;flex:1}.tutorial-card:hover{box-shadow:0 4px 10px rgba(0,0,0,.1)}.tutorial-card img{max-width:100%;height:auto;border-radius:4px}.tutorial-card h2{font-size:22px;color:#333;margin:0;text-align:center;width:100%}.tutorial-card .text-area{margin-left:10px;margin-right:10px}@media(max-width:768px){.tutorial-card{flex-direction:column;text-align:center;min-height:auto}.text-area{padding:10px 0}}@media(max-width:480px){.tutorial-card h2{font-size:20px}.tutorial-card img{display:none}}.tutorial-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between}