.main-content.personal-mode,.main-content.personal-mode .content-wrap{padding:0}.channel-viewport{background-color:var(--page-bg);background-size:cover;width:100%;min-width:0;container:channel/inline-size}.website-layout{--v-width:var(--s-width);--v-outer:var(--s-outer);--v-pad:var(--s-pad);--v-gap:var(--s-gap);--v-columns:var(--s-columns);--v-areas:var(--s-areas);--v-profile-display:var(--s-profile-display);--v-profile-direction:var(--s-profile-direction);--v-avatar-margin:var(--s-avatar-margin);--v-identity-pad:var(--s-identity-pad);--v-banner-height:var(--s-banner-height);--v-banner-fit:var(--s-banner-fit);--v-banner-position:var(--s-banner-position);--v-content-columns:var(--s-content-columns);--v-aside-display:var(--s-aside-display);--v-name-size:var(--s-name-size);--v-text-x:var(--s-text-x);--v-text-y:var(--s-text-y);--v-text-width:var(--s-text-width);--v-text-font:var(--s-text-font);--v-text-size:var(--s-text-size);--v-text-weight:var(--s-text-weight);--v-text-style:var(--s-text-style);--v-text-color:var(--s-text-color);--v-text-align:var(--s-text-align);--v-text-shadow:var(--s-text-shadow);--v-header-gap:var(--s-header-gap);--v-nav-row-gap:var(--s-nav-row-gap);--v-shell-rows:var(--s-shell-rows);--v-nav-direction:var(--s-nav-direction);--v-nav-align:var(--s-nav-align);--v-nav-gap:var(--s-nav-gap);--v-nav-padding:var(--s-nav-padding);--v-nav-overflow:var(--s-nav-overflow);--v-nav-top-border:var(--s-nav-top-border);--v-nav-link-padding:var(--s-nav-link-padding);--v-nav-link-left:var(--s-nav-link-left);--v-nav-link-bottom:var(--s-nav-link-bottom);--v-nav-white-space:var(--s-nav-white-space);--v-nav-studio-margin:var(--s-nav-studio-margin);--v-nav-display:var(--s-nav-display);--page-gap:var(--v-gap);max-width:min(var(--v-width), calc(100% - var(--v-outer) * 2));margin:var(--v-outer) auto}.website-layout.edge-desktop{border-radius:0}.website-layout .personal-shell{margin-top:var(--v-header-gap);grid-template-columns:var(--v-columns);grid-template-areas:var(--v-areas);grid-template-rows:var(--v-shell-rows);align-items:start;row-gap:var(--v-nav-row-gap);display:grid}.website-layout.cafe-side-desktop .personal-shell{column-gap:clamp(12px,1.4vw,20px);row-gap:max(16px, var(--v-nav-row-gap));padding-inline:clamp(12px,1.4vw,24px)}.website-layout.cafe-side-desktop .personal-identity,.website-layout.cafe-side-desktop .personal-nav{border-radius:min(var(--page-radius), 16px)}.website-layout .personal-identity{display:var(--v-profile-display);flex-direction:var(--v-profile-direction);padding:var(--v-identity-pad);background:var(--page-surface);flex-wrap:wrap;grid-area:identity;align-self:start;gap:12px;min-width:0}.website-layout .personal-name{min-width:0}.website-layout .personal-name h1{font-size:var(--v-name-size);overflow-wrap:anywhere}.website-layout .personal-name p{font-size:12px;line-height:1.5}.website-layout .personal-identity>.avatar,.website-layout .personal-avatar{margin-top:var(--v-avatar-margin);width:72px;height:72px}.website-layout.align-center .personal-identity{text-align:center}.website-layout.align-center .personal-name h1{justify-content:center}.website-layout .personal-actions{max-width:100%}.website-layout .personal-nav{display:var(--v-nav-display);flex-direction:var(--v-nav-direction);align-items:var(--v-nav-align);gap:var(--v-nav-gap);padding:var(--v-nav-padding);overflow-x:var(--v-nav-overflow);border-top-width:var(--v-nav-top-border);background:var(--page-surface);grid-area:nav;width:100%;min-width:0}.website-layout .personal-nav a{padding:var(--v-nav-link-padding);border-left:var(--v-nav-link-left) solid transparent;border-bottom-width:var(--v-nav-link-bottom);white-space:var(--v-nav-white-space)}.website-layout .personal-nav .studio-shortcut{margin-left:var(--v-nav-studio-margin)}.website-layout .personal-body{min-width:0;padding:var(--v-pad);grid-area:body}.website-layout .personal-layout{grid-template-columns:var(--v-content-columns);gap:var(--v-gap)}.website-layout .personal-side{display:var(--v-aside-display)}.website-layout .personal-widgets{gap:var(--v-gap)}.website-layout .website-banner{height:var(--v-banner-height);min-width:0;max-height:none;padding:0;display:grid}.website-banner .banner-image{width:100%;height:var(--v-banner-height);object-fit:var(--v-banner-fit);object-position:var(--v-banner-position);grid-area:1/1;display:block}.website-banner .banner-mobile{display:none}.website-banner .banner-headline{z-index:2;left:var(--v-text-x);top:var(--v-text-y);width:var(--v-text-width);max-width:100%;font-family:var(--v-text-font);font-size:var(--v-text-size);font-weight:var(--v-text-weight);font-style:var(--v-text-style);color:var(--v-text-color);text-align:var(--v-text-align);text-shadow:var(--v-text-shadow);overflow-wrap:anywhere;pointer-events:none;margin:0;line-height:1.25;position:absolute;bottom:auto}.builder-canvas .website-banner .banner-headline.drag-enabled{pointer-events:auto;cursor:grab;touch-action:none;outline-offset:3px}.builder-canvas .website-banner .banner-headline.drag-enabled:active{cursor:grabbing}.website-banner .banner-link{z-index:1;position:absolute;inset:0}.website-banner>.button{z-index:3}.channel-created{font-size:12px}.designed-widget{--m-width:var(--w-width);--m-height:var(--w-height);--m-ratio:var(--w-ratio);--m-pad:var(--w-pad);--m-fit:var(--w-fit);--m-columns:var(--w-columns);--m-display:var(--w-display);--m-span:var(--w-span);--m-bg:var(--w-bg);--m-canvas-height:var(--w-canvas-height);--m-canvas-ratio:var(--w-canvas-ratio);--m-art-position:var(--w-art-position);--m-art-height:var(--w-art-height)}.website-layout .personal-widget{border-radius:var(--section-radius,var(--page-radius));border-width:var(--section-border-width,1px);overflow:hidden}.website-layout .personal-widget>h2{font-weight:var(--section-title-weight,700)}.website-layout .personal-widget.designed-widget{display:var(--m-display);grid-column:var(--m-span);padding:var(--m-pad);background-image:var(--m-bg);background-position:50%;background-size:cover}.website-layout .widget-video.designed-widget{aspect-ratio:auto}.website-layout .transparent-widget{background-color:#0000;border:0;border-radius:0}.designed-widget>h2{padding:12px 16px 0}.designed-widget .media-box{width:min(100%, var(--m-width));height:var(--m-height);aspect-ratio:var(--m-ratio);object-fit:var(--m-fit);border-radius:0;margin:0 auto;display:block}.designed-widget .image-canvas{height:var(--m-canvas-height);aspect-ratio:var(--m-canvas-ratio)}.video-box{aspect-ratio:16/9;width:100%}.site-youtube{border:0;width:100%;height:100%;display:block}.youtube-poster{border-radius:inherit;color:#fff;cursor:pointer;background-color:#223e59;background-image:linear-gradient(135deg,#7da9c8 0%,#3f6787 45%,#1c324b 100%);background-position:50%;background-size:cover;border:0;flex-direction:column;justify-content:center;align-items:center;gap:12px;width:100%;height:100%;min-height:120px;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 0 0 100vmax #0a182b29}.youtube-thumbnail{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.youtube-poster:before{z-index:1;content:"";background:linear-gradient(#0000 50%,#0b1c3099);position:absolute;inset:0}.youtube-play,.youtube-title{z-index:2;position:relative}.youtube-play{background:#f13b51;border-radius:50%;place-items:center;width:62px;height:62px;padding-left:4px;font-size:24px;transition:transform .2s;display:grid;box-shadow:0 12px 32px #04111f47}.youtube-poster:hover .youtube-play,.youtube-poster:focus-visible .youtube-play{transform:scale(1.08)}.youtube-title{text-overflow:ellipsis;white-space:nowrap;max-width:90%;font-size:15px;font-weight:700;overflow:hidden}.image-canvas{aspect-ratio:1.6;width:100%;position:relative;overflow:hidden}.canvas-art{position:var(--m-art-position,absolute);width:100%;height:var(--m-art-height,100%);object-fit:var(--m-fit,contain);pointer-events:none;display:block;inset:0}.image-region{--a-x:var(--r-x);--a-y:var(--r-y);--a-width:var(--r-width);--a-height:var(--r-height);left:var(--a-x);top:var(--a-y);width:var(--a-width);height:var(--a-height);position:absolute}.image-region.region-youtube{aspect-ratio:16/9;height:auto}.region-youtube .youtube-poster{min-height:0}.image-region.editable-region{z-index:4;outline-offset:-2px;cursor:move;touch-action:none;-webkit-user-select:none;user-select:none;outline:2px dashed #1686bb}.image-region.editable-region.selected-region{outline:3px solid #087ba9;box-shadow:0 0 0 3px #fff9}.image-region.editable-region>:not(.region-resize-handle){pointer-events:none}.region-resize-handle{z-index:5;cursor:nwse-resize;background:#087ba9;border:3px solid #fff;border-radius:7px;width:24px;height:24px;position:absolute;bottom:-3px;right:-3px;box-shadow:0 2px 10px #071d3270}.region-resize-handle:after{content:"";border-bottom:2px solid #fff;border-right:2px solid #fff;position:absolute;inset:4px}.image-hotspot{border-radius:6px;justify-content:center;align-items:center;width:100%;height:100%;display:flex}.image-hotspot span{clip-path:inset(50%);width:1px;height:1px;position:absolute;overflow:hidden}.image-hotspot.with-label{color:#18384e;background:#ffffffed;box-shadow:0 4px 20px #0002}.image-hotspot.with-label span{clip-path:none;text-align:center;overflow-wrap:anywhere;width:auto;height:auto;padding:5px;position:static}.image-hotspot:hover,.image-hotspot:focus-visible{outline:3px solid var(--page-accent);outline-offset:-3px;background:#ffffff30}.image-showcase,.designed-widget .gallery-grid{grid-template-columns:repeat(var(--m-columns,3), minmax(0, 1fr));gap:var(--v-gap,12px);display:grid}.showcase-item{text-align:center;min-width:0;display:block}.showcase-item img{width:100%;height:var(--m-height,auto);aspect-ratio:var(--m-ratio,auto);object-fit:var(--m-fit,contain);display:block}.showcase-item span{padding:10px;font-size:13px;display:block}.device-editor-tabs{background:#edf3f7;border-radius:10px;gap:5px;margin:12px 0;padding:4px;display:flex}.device-editor-tabs button{color:#60798c;border-radius:7px;flex:1;padding:9px}.device-editor-tabs button.active{color:#087ba9;background:#fff;box-shadow:0 1px 4px #0001}.site-layout-editor>.checkbox-line{margin:15px 0}.site-layout-editor>h3{margin-top:22px}.widget-layout-editor>details{border-block:1px solid #e1eaf1;margin:14px 0;padding:12px 0}.widget-layout-editor>details>summary{cursor:pointer;font-weight:650}.widget-layout-editor h4{margin:20px 0 12px}.section-appearance{background:#f8fbfd;border:1px solid #dce7ef;border-radius:14px;padding:16px}.section-appearance-heading{gap:3px;margin-bottom:14px;display:grid}.section-appearance-heading strong{font-size:14px}.section-appearance-heading small,.appearance-hint{color:#63758a;font-size:11px}.section-appearance-fields{gap:12px;display:grid}.section-border-control{align-items:center;gap:12px;display:flex}.section-border-control input{accent-color:#087ba9;flex:1;min-width:0}.section-border-control output{text-align:right;font-variant-numeric:tabular-nums;min-width:30px}.canvas-fit-panel{border:0;gap:7px;margin:16px 0;padding:0;display:grid}.canvas-fit-panel legend{margin-bottom:9px;font-size:13px;font-weight:700}.canvas-fit-choice{cursor:pointer;background:#fff;border:1px solid #dce7ef;border-radius:11px;align-items:flex-start;gap:10px;padding:10px 12px;display:flex}.canvas-fit-choice:has(input:checked){background:#eef8fd;border-color:#4a9cc7}.canvas-fit-choice input{accent-color:#087ba9;margin-top:3px}.canvas-fit-choice span{gap:2px;display:grid}.canvas-fit-choice strong{font-size:12px}.canvas-fit-choice small{color:#63758a;font-size:10px}.canvas-editor .button-row{margin-bottom:14px}.widget-layout-editor .image-upload>img{object-fit:contain;max-height:130px}@container channel (max-width:760px){.channel-viewport:not([data-preview=desktop]) .website-layout.cafe-side-desktop .personal-shell{column-gap:0;row-gap:var(--v-nav-row-gap);padding-inline:0}.channel-viewport:not([data-preview=desktop]) .website-layout{--v-width:var(--sm-width);--v-outer:var(--sm-outer);--v-pad:var(--sm-pad);--v-gap:var(--sm-gap);--v-columns:var(--sm-columns);--v-areas:var(--sm-areas);--v-profile-display:var(--sm-profile-display);--v-profile-direction:var(--sm-profile-direction);--v-avatar-margin:var(--sm-avatar-margin);--v-identity-pad:var(--sm-identity-pad);--v-banner-height:var(--sm-banner-height);--v-banner-fit:var(--sm-banner-fit);--v-banner-position:var(--sm-banner-position);--v-content-columns:minmax(0, 1fr);--v-aside-display:var(--sm-aside-display);--v-name-size:min(var(--sm-name-size), 32px);--v-text-x:var(--sm-text-x);--v-text-y:var(--sm-text-y);--v-text-width:var(--sm-text-width);--v-text-font:var(--sm-text-font);--v-text-size:var(--sm-text-size);--v-text-weight:var(--sm-text-weight);--v-text-style:var(--sm-text-style);--v-text-color:var(--sm-text-color);--v-text-align:var(--sm-text-align);--v-text-shadow:var(--sm-text-shadow);--v-header-gap:var(--sm-header-gap);--v-nav-row-gap:var(--sm-nav-row-gap);--v-shell-rows:var(--sm-shell-rows);--v-nav-direction:var(--sm-nav-direction);--v-nav-align:var(--sm-nav-align);--v-nav-gap:var(--sm-nav-gap);--v-nav-padding:var(--sm-nav-padding);--v-nav-overflow:var(--sm-nav-overflow);--v-nav-top-border:var(--sm-nav-top-border);--v-nav-link-padding:var(--sm-nav-link-padding);--v-nav-link-left:var(--sm-nav-link-left);--v-nav-link-bottom:var(--sm-nav-link-bottom);--v-nav-white-space:var(--sm-nav-white-space);--v-nav-studio-margin:var(--sm-nav-studio-margin);--v-nav-display:var(--sm-nav-display)}.channel-viewport:not([data-preview=desktop]) .website-layout[data-nav-mobile=side] .personal-shell{grid-template:"identity""nav""body"/minmax(0,1fr)}.channel-viewport:not([data-preview=desktop]) .website-layout.edge-mobile{border-radius:0}.channel-viewport:not([data-preview=desktop]) .website-layout .banner-desktop{display:none}.channel-viewport:not([data-preview=desktop]) .website-layout .banner-mobile{display:block}.channel-viewport:not([data-preview=desktop]) .designed-widget{--m-width:var(--wm-width);--m-height:var(--wm-height);--m-ratio:var(--wm-ratio);--m-pad:var(--wm-pad);--m-fit:var(--wm-fit);--m-columns:var(--wm-columns);--m-display:var(--wm-display);--m-span:var(--wm-span);--m-bg:var(--wm-bg);--m-canvas-height:var(--wm-canvas-height);--m-canvas-ratio:var(--wm-canvas-ratio);--m-art-position:var(--wm-art-position);--m-art-height:var(--wm-art-height)}.channel-viewport:not([data-preview=desktop]) .image-region{--a-x:var(--rm-x);--a-y:var(--rm-y);--a-width:var(--rm-width);--a-height:var(--rm-height)}}
